index.haml

!!!
%html{:xmlns => "http://www.w3.org/1999/xhtml"}
  %head
    %title Music Hounds
    %link{:href => "sp://import/css/adam.css", :rel => "stylesheet"}/
    %link{:href => "sp://import/css/shared.css", :rel => "stylesheet"}/
    %link{:href => "sp://import/css/api.css", :rel => "stylesheet"}/
    %link{:href => "sp:/css/main.css", :rel => "stylesheet"}
  %body
    #Header
      #Notifcations
        / spotify:app:musichounds
      %img#Logo{:src => "sp:/images/logo.png"}
      %h1 Music Hounds
    #Content
      #Homepage
        #JoinGame.capsule
          %h2 Join a Game
          %table#LobbyGameTable
            %tr
              %td Room Name
              %td Artist / Genre
              %td 
                Current 
                %br/
                Round
              %td 
                High 
                %br/
                Score
              %td
            %tr
              %td The best room ever! 
              %td A: Drake
              %td 1
              %td 0
              %td
                %a{:href => "#1"} Join
            %tr
              %td Hot like Fiya! 
              %td G: Hip Hop
              %td 1
              %td 0
              %td
                %a{:href => "#1"} Join

        #CreateGame.capsule
          %h2 Create New Game
          .new_game_param
            %label Style
            %select#ngpStyle
              %option{:value => ''} Any
              %option{:value => 'bluegrass'} Bluegrass
              %option{:value => 'country'} Country
              %option{:value => 'dance'} Dance
              %option{:value => 'grunge'} Grunge
              %option{:value => 'old school'} Old School
              %option{:value => 'pop'} Pop
              %option{:value => 'punk'} Punk
              %option{:value => 'r&b'} R&B
              %option{:value => 'rock'} Rock
              %option{:value => 'ska'} Aka
              %option{:value => 'soul'} Soul
          .new_game_param.separator
            ="- OR -"

          .new_game_param
            %label Artist
            %select#ngpArtist
              %option{:value => ''} Any
              %option{:value => 'Adele'} Adele
              %option{:value => 'Billy Joel'} Billy Joel
              %option{:value => 'Bon Jovi'} Bon Jovi
              %option{:value => 'Bruno Mars'} Bruno Mars
              %option{:value => 'Coldplay'} Coldplay
              %option{:value => 'Drake'} Drake
              %option{:value => 'Kelly Clarkson'} Kelly Clarkson
              %option{:value => 'Kylie Minogue'} Kylie Minogue
              %option{:value => 'Lil Wayne'} Lil' Wayne
              %option{:value => 'LMFAO'} LMFAO
              %option{:value => 'Madonna'} Madonna
              %option{:value => 'Nicki Minaj'} Nicki Minaj
              %option{:value => 'Rihanna'} Rihanna
              %option{:value => 'Tribe Called Quest'} A Tribe Called Quest
              %option{:value => 'U2'} U2
              %option{:value => 'Whitney Houston'} Whitney Houston
              %option{:value => 'Young Jezzy'} Young Jezzy
          %button#btnCreateGame{:class => "new-button"} Create New Game
        %br{:style=>"clear:both;"}/

      #PlayGame.capsule
        %ul#Players.capsule
          %li#player_3.current_player 
            %button#LeaveRoom.new-button{:value => 'leave'} Leave Room
            .name player_x4f23
            .points.message 10
          %li#player_1 
            .name player_x4f23
            .points.message 3
          %li#player_2 
            .name player_x4f23
            .points.message -2
        #GameBoard
          #GoalScore
            %h3 Goal Score
            .message 20
             
          #CurrentRound
            %h3 Current Round
            .message 1
          #ClueStage
            #Clue1
              %h3 Clue 1:
              .message And bring back all of those happy days Put your trouble down It's time to celebrate Let love shine And we will find
            #Clue2
              %h3 Clue 2:
              .message Everybody spread the word We're gonna have a celebration All across the world In every nation It's time for the good times
          
          #AnswerSpace
            %h3 The answer is...
            .message
          #ActionButtons
            %button#btnGotIt.new-button{:value => "yes"} I Got It!!
            %button#btnNoIdea.new-button{:value => "no"} No Idea
        %br{:style=>"clear:both;"}/

    #Footer
      #Powered
        Powered by EchoNest, Pusher, LyricFind & Spotify
      #Creator
        Created by Abel Martin

    %script#TMPCreateGame{:type => "text/x-jquery-tmpl"}
      
    / -- [0] Required libraries
    %script{:src=>"sp:/js/req/jquery-1.7.1.min.js"}
    %script{:src=>"sp:/js/req/underscore-1.3.1.min.js"}
    %script{:src=>"sp:/js/req/mustache-0.4.2.js"}
    %script{:src=>"sp:/js/req/backbone-0.9.1.min.js"}
    %script{:src=>"sp:/js/req/pusher-1.11.min.js"}

    / -- [1] API Keys
    %script{:src=>"sp:/js/app/api_keys.js"}

    / -- [2] Models
    / -- [3] Collections
    / -- [4] Views
    / -- [5] Writers


    :javascript 
      var gblSpotifyModels;
      var gblCurrentTrack;
      var gblPusher;
      $(function(){
        gblPusher = new Pusher('f741395dd9ac3fcd542b');
        var channel = gblPusher.subscribe('test_channel');
        channel.bind('my_event', function(data) {
          $("#Notifcations").html(data);
        });

        var sp = getSpotifyApi(1);
        gblSpotifyModels = sp.require('sp://import/scripts/api/models');

        if( gblSpotifyModels.player.playing ){
          gblCurrentTrack = gblSpotifyModels.player.track;
        }

        gblSpotifyModels.player.observe(gblSpotifyModels.EVENT.CHANGE, function(event) {
          if( gblSpotifyModels.player.playing ){
            console.log("1");
            gblCurrentTrack = gblSpotifyModels.player.track;
            console.log("2");
            var lbl_track = gblCurrentTrack.data.name + " - " + gblCurrentTrack.data.artists[0].name;
            console.log("3");
            $("#Notifcations").html(lbl_track);
          }
          /*else{
            $("#Notifcations").html("");
          }*/

          console.log("We should have updated the notification");
        });

        $("#LeaveRoom").click(function(){
          $("#Homepage").show();
          $("#PlayGame").hide();
        });


        if (localStorage.getItem("user_guid") == null){
          localStorage.setItem( "user_guid", guid() );
        }

        var u_guid = localStorage.getItem("user_guid");
        console.log( u_guid );
        $("#btnCreateGame").click(function(){
          $.when( createUser(), createRoom() ).done(function(user_data, room_data){
            //data is a payload with the room chanel name.
            $("#Homepage").hide();
            $("#PlayGame").show();

            var channel = gblPusher.subscribe(room_data.room_chanel);
            channel.bind('my_event', function(data) {
              $("#Notifcations").html(data);
            });
          });
        });
      });

      //I got the GUID code from StackOverflow
      //http://stackoverflow.com/questions/7940616/what-makes-this-pseudo-guid-generator-better-than-math-random
      function S4() {
         return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
      }

      function guid() {
         return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
      }

      function createRoom(){
        $.ajax({
          url: "http://mhbackend.heroku.com:3000/rooms.js",
          data: {
            room: {artist: $("#ngpArtist").val(), style: $("#ngpStyle").val()}
          },
          dataType: "json",
          type: "POST"
        });
      }
      
      //This really has no business being here, but I need it for testing. 
      function createUser(){
        var u_guid = localStorage.getItem("user_guid");
        var player_name = "player" + u_guid.split('-')[0];
        $.ajax({
          url: "http://mhbackend.heroku.com:3000/users.js",
          data: {
            user: {guid: u_guid, name: player_name}
          },
          dataType: "json",
          type: "POST"
        });
      }