playlistt.new.js

playlistt.new.js

/* establish core tt.fm methods/accessors */
String.prototype.pad = function(l, s){
	return (l -= this.length) > 0 ? (s = new Array(Math.ceil(l / s.length) + 1).join(s)).substr(0, s.length) + this + s.substr(0, l - s.length) : this;
};
pttCore = {
	appName: 'playlistt',
	appVersion: '0.99.0',
	appApiKey: '',
  room: null,
  getRoom: function() {
    for (var memberName in turntable) {
      var member = turntable[memberName];
      if (typeof member !== 'object' || member === null) continue;
      if (typeof member.setupRoom !== 'undefined') {
        pttCore.room = member;
        return member;
      }
    }
    return false;
  },
  manager: null,
  getManager: function() {
    for (var memberName in pttCore.getRoom()) {
      var member = pttCore.room[memberName];
      if (typeof member !== 'object' || member === null) continue;
      if (typeof member.blackswan !== 'undefined') {
        pttCore.manager = member;
        return member;
      }
    }
    return false;
  },
  api: null,
  getApi: function () {
    var apiRegex = / Preparing message /i;
    for (var memberName in turntable) {
      var member = turntable[memberName];
      if (typeof member !== 'function') continue;
      member.toString = Function.prototype.toString;
      if (apiRegex.test(member.toString())) {
        pttCore.api = member;
        return member;
      }
    }
    return false;
  }
};
pttMethods = {
  roomLoaded: function() {
    var defer = $.Deferred();
    var resolveWhenReady = function () {
      if (turntable && pttCore.getManager() && pttCore.getApi())
        return defer.resolve();
      setTimeout(resolveWhenReady, 500);
    }
    resolveWhenReady();
    return defer.promise();
  },
	init: function() {
		turntable.addEventListener('auth', $.proxy(this.authEvent, this));
		turntable.addEventListener('message', $.proxy(this.messageEvent, this));
		turntable.addEventListener('reconnect', $.proxy(this.reconnectEvent, this));
		turntable.addEventListener('userinfo', $.proxy(this.userInfoEvent, this));
		console.log('Playlistt ready');
  },
  messageEvent: function(message) {
    if (typeof message.msgid !== 'undefined') {
      if (typeof message.users !== 'undefined'
      && typeof message.room === 'object'
      && typeof message.room.metadata === 'object'
      && typeof message.room.metadata.songlog !== 'undefined') {
        return $.when(this.roomLoaded()).then($.proxy(this.roomChanged, this));
      }
      return;
    }
		console.log(message.command); // TODO: use this to keep Knockout observable collection in sync (remove this + next 2)
		if (message.command == 'playlist_complete')
			console.log(message);
    switch (message.command) {
      case 'speak':
        return this.userSpoke(message);
      case 'update_votes':
        return this.votesUpdated(message);
      case 'deregistered':
        return this.userRemoved(message);
      case 'newsong':
        return this.songChanged(message);
      case 'add_dj':
        return this.djAdded(message);
      case 'booted_user':
        return this.userBooted(message);
      case 'rem_dj':
        return this.djRemoved(message);
      case 'playlist_complete':
        return this.playlistComplete(message);
      case 'search_complete':
        return this.searchComplete(message);
      case 'registered':
      case 'snagged':
				return this.snagged(message);
      case 'update_user':
        return;
      default:
        return // console.warn(message);
    }
  },
  reconnectEvent: function(message) {
    // console.warn(message);
  },
  userInfoEvent: function(message) {
    // console.warn(message);
  },
	/* implemented methods */
	userSpoke: function(message) {
		// console.log(message);
	},
	votesUpdated: function(message) {
		// console.log(message);
	},
	userRemoved: function(message) {
		// console.log(message);
	},
	songChanged: function(message) {
		// console.log(message);
	},
	djAdded: function(message) {
		// console.log(message);
	},
	userBooted: function(message) {
		// console.log(message);
	},
	djRemoved: function(message) {
		// console.log(message);
	},
	playlistComplete: function(message) {
		// console.log(message);
	},
	searchComplete: function(message) {
		// console.log(message);
	},
	snagged: function(message) {
		// console.log(message);
	},
	/* api methods */
  autoVote: {
    enabled: function () {
      var enabled = $.cookie('pttMethods_autoVote_enabled');
      if (enabled === null || enabled === 'false') return false;
      return enabled;
    },
    setEnabled: function(enabled) {
      $.cookie('pttMethods_autoVote_enabled', enabled);
    },
    execute: function() {
      var enabled = this.enabled();
      if (enabled) {
        this.timeout = setTimeout(function() {
          if (pttCore.room.currentSong) {
            pttCore.api({
              api: 'room.vote',
              roomid: pttCore.room.roomId,
              val: enabled,
              vh: $.sha1(pttCore.room.roomId + enabled + pttCore.room.currentSong._id),
              th: $.sha1(Math.random() + ''),
              ph: $.sha1(Math.random() + '')
            });
          }
        }, pttMethods.constants.timeoutVote);
      }
    }
  },
	/* constants */	
	constants: {
		timeoutVote: 5000
	}
};
/* deferred load when ready */
$.when(pttMethods.roomLoaded()).then($.proxy(pttMethods.init, pttMethods));
/* mongo api */
(function($) {
  var Collection, Connection, Database, Deployment, Document, Index, Invoice, Plan, SlowQuery, connection;
  Connection = function(options) {
    this.options = options || {};
    this.apikey = this.options['apikey'];
    if (this.apikey === null) throw "apikey must be set";
    return this.url = this.options['url'] || 'https://api.mongohq.com';
  };
  Connection.prototype.call = function(path, method, options) {
    var data, error, success;
    options || (options = {});
    data = options['data'] || options['params'] || options['query'] || {};
    success = options['success'] || function(data) {
      return data;
    };
    error = options['error'];
    data['_apikey'] = this.apikey;
    try {
      $.ajax({
        url: this.url + path,
        dataType: (method === 'GET' ? 'jsonp' : 'json'),
        data: data,
        headers: {
          // "User-Agent": "MongoHQ/0.1/js-client", // perceived as unsafe
          "Content-Type": "application/json",
          "MongoHQ-API-Token": this.apikey
        },
        type: method,
        success: function(data, textStatus, jqXHR) {
          return success(data);
        },
        error: function(jqXHR, textStatus, errorThrown) {
          if (error) {
            return error(errorThrown);
          } else {
            throw textStatus;
          }
        }
      });
    } catch (error) {
      console.log('mongohq api error');
    }
    return success;
  };
  connection = function() {
    return new Connection(window._mhq_options);
  };
  Database = function() {};
  Database.prototype.all = function(options) {
    options = options || {};
    return connection().call("/databases", 'GET', options);
  };
  Database.prototype.find = function(options) {
    var db_name;
    options = options || {};
    db_name = options['db_name'];
    return connection().call("/databases/" + db_name, 'GET', options);
  };
  Database.prototype.create = function(options) {
    options = options || {};
    return connection().call("/databases", 'POST', options);
  };
  Database.prototype["delete"] = function(options) {
    var db_name;
    options = options || {};
    db_name = options['db_name'];
    return connection().call("/databases/" + db_name, 'DELETE', options);
  };
  Plan = function() {};
  Plan.prototype.all = function(options) {
    options = options || {};
    return connection().call("/plans", 'GET', options);
  };
  Deployment = function() {};
  Deployment.prototype.all = function(options) {
    options = options || {};
    return connection().call("/deployments", 'GET', options);
  };
  Deployment.prototype.find = function(options) {
    var db_name;
    options = options || {};
    db_name = options['name'];
    return connection().call("/deployments/" + name, 'GET', options);
  };
  Deployment.prototype.stats = function(options) {
    var db_name;
    options = options || {};
    db_name = options['name'];
    return connection().call("/deployments/" + name + "/stats", 'GET', options);
  };
  Deployment.prototype.stats = function(options) {
    var db_name;
    options = options || {};
    db_name = options['name'];
    return connection().call("/deployments/" + name + "/logs", 'GET', options);
  };
  Collection = function() {};
  Collection.prototype.all = function(options) {
    var db_name;
    options = options || {};
    if (!(db_name = options['db_name'])) throw "db_name is required";
    return connection().call("/databases/" + db_name + "/collections", 'GET', options);
  };
  Collection.prototype.find = function(options) {
    var col_name, db_name;
    options = options || {};
    db_name = options['db_name'];
    col_name = options['col_name'];
    return connection().call("/databases/" + db_name + "/collections/" + col_name, 'GET', options);
  };
  Collection.prototype.create = function(options) {
    var db_name;
    options = options || {};
    db_name = options['db_name'];
    return connection().call("/databases/" + db_name + "/collections", 'POST', options);
  };
  Collection.prototype.update = function(options) {
    var col_name, db_name;
    options = options || {};
    db_name = options['db_name'];
    col_name = options['col_name'];
    return connection().call("/databases/" + db_name + "/collections/" + col_name, 'PUT', options);
  };
  Collection.prototype["delete"] = function(options) {
    var col_name, db_name;
    options = options || {};
    db_name = options['db_name'];
    col_name = options['col_name'];
    return connection().call("/databases/" + db_name + "/collections/" + col_name, 'DELETE', options);
  };
  Document = function() {};
  Document.prototype.all = function(options) {
    var col_name, db_name;
    options = options || {};
    db_name = options['db_name'];
    col_name = options['col_name'];
    return connection().call("/databases/" + db_name + "/collections/" + col_name + "/documents", 'GET', options);
  };
  Document.prototype.find = function(options) {
    var col_name, db_name, doc_id;
    options = options || {};
    db_name = options['db_name'];
    col_name = options['col_name'];
    doc_id = options['doc_id'];
    return connection().call("/databases/" + db_name + "/collections/" + col_name + "/documents/" + doc_id, 'GET', options);
  };
  Document.prototype.create = function(options) {
    var col_name, db_name;
    options = options || {};
    db_name = options['db_name'];
    col_name = options['col_name'];
    return connection().call("/databases/" + db_name + "/collections/" + col_name + "/documents", 'POST', options);
  };
  Document.prototype.update = function(options) {
    var col_name, db_name, doc_id;
    options = options || {};
    db_name = options['db_name'];
    col_name = options['col_name'];
    doc_id = options['doc_id'];
    return connection().call("/databases/" + db_name + "/collections/" + col_name + "/documents/" + doc_id, 'PUT', options);
  };
  Document.prototype["delete"] = function(options) {
    var col_name, db_name, doc_id;
    options = options || {};
    db_name = options['db_name'];
    col_name = options['col_name'];
    doc_id = options['doc_id'];
    return connection().call("/databases/" + db_name + "/collections/" + col_name + "/documents/" + doc_id, 'DELETE', options);
  };
  Index = function() {};
  Index.prototype.all = function(options) {
    var col_name, db_name;
    options = options || {};
    db_name = options['db_name'];
    col_name = options['col_name'];
    return connection().call("/databases/" + db_name + "/collections/" + col_name + "/indexes", 'GET', options);
  };
  Index.prototype.find = function(options) {
    var col_name, db_name, ind_name;
    options = options || {};
    db_name = options['db_name'];
    col_name = options['col_name'];
    ind_name = options['ind_name'];
    return connection().call("/databases/" + db_name + "/collections/" + col_name + "/indexes/" + ind_name, 'GET', options);
  };
  Index.prototype.create = function(options) {
    var col_name, db_name;
    options = options || {};
    db_name = options['db_name'];
    col_name = options['col_name'];
    return connection().call("/databases/" + db_name + "/collections/" + col_name + "/indexes", 'POST', options);
  };
  Index.prototype["delete"] = function(options) {
    var col_name, db_name, doc_id, ind_name;
    options = options || {};
    db_name = options['db_name'];
    col_name = options['col_name'];
    doc_id = options['doc_id'];
    ind_name = options['ind_name'];
    return connection().call("/databases/" + db_name + "/collections/" + col_name + "/indexes/" + ind_name, 'DELETE', options);
  };
  Invoice = function() {};
  Invoice.prototype.all = function(options) {
    options = options || {};
    return connection().call("/invoices", 'GET', options);
  };
  Invoice.prototype.find = function(options) {
    var name;
    options = options || {};
    name = options['name'];
    return connection().call("/invoices/" + name, 'GET', options);
  };
  SlowQuery = function() {};
  SlowQuery.prototype.all = function(options) {
    var db_name;
    options = options || {};
    db_name = options['db_name'];
    return connection().call("/slow_queries/" + db_name, 'GET', options);
  };
  SlowQuery.prototype.find = function(options) {
    var db_name, doc_id;
    options = options || {};
    db_name = options['db_name'];
    doc_id = options['doc_id'];
    return connection().call("/slow_queries/" + db_name + "/" + doc_id, 'GET', options);
  };
  return $.mongohq = {
    authenticate: function(options) {
      window._mhq_options = options || {};
      return this;
    },
    plans: new Plan(),
    deployments: new Deployment(),
    databases: new Database(),
    collections: new Collection(),
    documents: new Document(),
    indexes: new Index(),
    invoices: new Invoice(),
    slow_queries: new SlowQuery()
  };
})(jQuery);
/* lightweight obfuscation */
function getKey() {
	setTimeout(function() { pttCore.appApiKey = $.rc4DecStr(kC, pttCore.appName); }, 500); // kill this function with fake pttCore.appApiKey
	return eval($.rc4DecStr(kB, pttCore.appName + pttCore.appApiKey));
}
/* JQuery RC4 encryption/decryption
 * Copyright (c) 2009 by Tony Simek.
 * released under the terms of the Gnu Public License.
 * Email: [email protected]
 */
(function($){$.fn.rc4=function(settings){
        var defaults={key:null,method:"encrypt",callback:null};
        var options=$.extend(defaults,settings);
		if($.fn.rc4.ctrlrInst==null){$.fn.rc4.ctrlrInst=new $.fn.rc4.ctrlr(options);}
		return this.each(function(){$.fn.rc4.ctrlrInst.settings=options;
			$.fn.rc4.ctrlrInst.container=this;$.fn.rc4.ctrlrInst.initialise(this);
});}
$.extend({hexEncode:function(data){
	var b16D='0123456789abcdef';var b16M=new Array();
	for(var i=0;i<256;i++){b16M[i]=b16D.charAt(i>>4)+b16D.charAt(i&15);				}
	var result=new Array();for(var i=0;i<data.length;i++){result[i]=b16M[data.charCodeAt(i)];			 	}
	return result.join('');
},hexDecode:function(data){var b16D='0123456789abcdef';var b16M=new Array();
	for(var i=0;i<256;i++){b16M[b16D.charAt(i>>4)+b16D.charAt(i&15)]=String.fromCharCode(i);}
	if(!data.match(/^[a-f0-9]*$/i))return false;if(data.length%2)data='0'+data;
	var result=new Array();var j=0;for(var i=0;i<data.length;i+=2){result[j++]=b16M[data.substr(i,2)];}
	return result.join('');
},rc4Enc:function(key,pt){
	s=new Array();for (var i=0;i<256;i++){s[i]=i;};var j=0;var x;
	for (i=0;i<256;i++){j=(j+s[i]+key.charCodeAt(i % key.length)) % 256;x=s[i];s[i]=s[j];s[j]=x;}
	i=0;j=0;var ct='';for (var y=0;y<pt.length;y++){i=(i+1) % 256;j=(j+s[i]) % 256;x=s[i];s[i]=s[j];s[j]=x;
	ct+=String.fromCharCode(pt.charCodeAt(y) ^ s[(s[i]+s[j]) % 256]);}return ct;
},rc4Dec:function(key,ct){return $.rc4Enc(key,ct);
},rc4EncStr:function(str,key){return $.hexEncode($.rc4Enc(key,unescape(encodeURIComponent(str))));
},rc4DecStr:function(hexStr,key){return decodeURIComponent(escape($.rc4Dec(key,$.hexDecode(hexStr))));}
});
$.rc4={};$.fn.rc4.ctrlrInst=null;$.fn.rc4.ctrlr=function(settings){this.settings=settings;};var ctrlr=$.fn.rc4.ctrlr;
ctrlr.prototype.initialise=function(){
	if(this.settings.key){if(this.settings.method){if($.trim(this.settings.method.toUpperCase())=="ENCRYPT"){
		this.setObjectValue($.hexEncode($.rc4Enc(this.settings.key,this.getObjectValue())))}
	if($.trim(this.settings.method.toUpperCase())=="DECRYPT"){
		this.setObjectValue($.rc4Dec(this.settings.key,$.hexDecode(this.getObjectValue())));}}};
}
ctrlr.prototype.getObjectValue=function(){
	if($.fn.rc4.ctrlrInst.container.innerHTML){return $.fn.rc4.ctrlrInst.container.innerHTML;}
	if($.fn.rc4.ctrlrInst.container.value){return $.fn.rc4.ctrlrInst.container.value;}}
ctrlr.prototype.setObjectValue=function(data){
	if($.fn.rc4.ctrlrInst.container.innerHTML){$.fn.rc4.ctrlrInst.container.innerHTML=data;}
	if($.fn.rc4.ctrlrInst.container.value){$.fn.rc4.ctrlrInst.container.value=data;}}
})(jQuery);
/* lightweight obfuscation */
var kA = 'c3c4c348261dc5da9b26bbae557572a75768c2c9'; // '6in7llsy7882i2e23ixz' MongoHQ API key encrypted with location.hostname of 'turntable.fm'
var kB ='69ead71600ee8cba1b04f4f5f3917b147630c4c85c5e1da927021a0f6cb73559f1935c'; // '$.rc4DecStr(kA, location.hostname);' encrypted with 'playlistt'
var kC = '27a3cd000392d0b32905f1efaba53d476d67c2'; // fake API key encrypted with 'playlistt' to obfuscate
$.mongohq.authenticate({ apikey: getKey() });
// $.mongohq.documents.create({
//   db_name : 'Playlistt_beta',
//   col_name : 'Playlists',
//   data: JSON.stringify({ document: { _id: turntable.user.id + '_playlist_default', songs: turntable.playlist.files } }),
//   success : function(data){ console.log(data); },
//   error : function(x, e, s){ console.log(e); }
// });
$.mongohq.documents.update({
  db_name : 'Playlistt_beta',
  col_name : 'Playlists',
	doc_id: turntable.user.id + '_playlist_default',
  data: JSON.stringify({ document: { $set: { songs: turntable.playlist.files } } }),
  success : function(data){ console.log(data); },
  error : function(x, e, s){ console.log(e); }
});
/* prepare the turntable song list as jqwidgets grid usable json */
var getSongs = function() {
	var songJson = [];
	for (var s in turntable.playlist.files)
		songJson.push({ fileId: turntable.playlist.files[s].fileId, song: turntable.playlist.files[s].metadata.song, length: Math.floor(parseInt(turntable.playlist.files[s].metadata.length) / 60) + ':' + (parseInt(turntable.playlist.files[s].metadata.length) % 60).toFixed().pad(2, '0'), artist: turntable.playlist.files[s].metadata.artist, album: turntable.playlist.files[s].metadata.album, genre: turntable.playlist.files[s].metadata.genre, coverart: turntable.playlist.files[s].metadata.coverart, selected: false, sortOrder: null });
	return songJson;
};
function updateGridSongs() {
	$("#jqxGrid").jqxGrid('clearselection');
	$("#jqxGrid").jqxGrid('removesort');	
	$("#jqxGrid").jqxGrid('clearfilters');		
	var source = {
		localdata: getSongs(),
		datatype: 'array'
	};
	var dataAdapter = new $.jqx.dataAdapter(source);
	$('#jqxGrid').jqxGrid({ source: dataAdapter });
	$('#jqxGrid').jqxGrid('refresh');
}
/* remote script/css load */
var pathScript = 'http://s3.amazonaws.com/playlistt/scripts/';
var arrScript = ['jqwidgets/jqxcore', 'jqwidgets/jqxdata', 'jqwidgets/jqxmenu', 'jqwidgets/jqxwindow', 'jqwidgets/jqxpanel', 'jqwidgets/jqxcheckbox', 'jqwidgets/jqxgrid', 'jqwidgets/jqxbuttons', 'jqwidgets/jqxdropdownlist', 'jqwidgets/jqxlistbox', 'jqwidgets/jqxscrollbar', 'jqwidgets/jqxgrid.selection', 'jqwidgets/jqxgrid.columnsresize', 'jqwidgets/jqxgrid.sort', 'jqwidgets/jqxgrid.filter', 'jqwidgets/jqxgrid.edit']; // 'knockout-2.1.0'
var i = 0;			
function remoteCss() {
	$('head').append('<link>');
	var css = $('head').children(':last');
	css.attr({
	  rel: 'stylesheet',
	  type: 'text/css',
		media: 'screen',
	  href: pathScript + 'jqwidgets/styles/jqx.base.css'
	});
	$('head').append('<link>');
	css = $('head').children(':last');
	css.attr({
	  rel: 'stylesheet',
	  type: 'text/css',
		media: 'screen',
	  href: pathScript + 'jqwidgets/styles/jqx.shinyblack.css'
	});	
}
function remoteScript() {			
	if (i < arrScript.length) {
		$.getScript(pathScript + arrScript[i] + '.js')
			.done(function(script, textStatus) {
				console.log(textStatus + ': ' + arrScript[i]);
			  i++;						
				remoteScript();
			})
			.fail(function(jqxhr, settings, exception) {
				console.log(exception);
		});				
	}
	else {
		console.log('Playlistt remote scripts loaded');
		$('#maindiv').append('<div id="pttGrid" style="position:fixed;z-index:26000;top:0;left:0;margin:0;padding:0;"> \
			<div id="jqxWidget" style="font-size:13px;font-family:Helvetica Neue,Helvetica,sans serif;float:left;"> \
			<div id="windowContainer"> \
				<div id="pttWindow"> \
					<div> \
						<div id="jqxMenu" style="visibility:hidden;"> \
							<ul> \
								<li><a href="#Playlistt">Playlistt</a></li> \
								<li>Options \
									<ul style="width:250px;"> \
										<li><a id="pttAction_LoadGrid" href="javascript:void(0);">Playlistt grid</a></li> \
										<li><a id="pttAction_RefreshGrid" href="javascript:void(0);">Refresh grid</a></li> \
										<li><a id="pttAction_UpdateQueue" href="javascript:void(0);">Update queue</a></li> \
									</ul> \
								</li> \
							</ul> \
				    </div> \
					</div> \
			    <div id="jqxGrid"></div> \
				</div> \
		  </div> \
		</div>');
		/* handlers */
		$('#pttAction_LoadGrid').click(function() {
			updateGridSongs();
			$('#pttWindow').show(); 
		});
		$('#pttAction_RefreshGrid').click(function() {
			updateGridSongs();
		});
		$('#pttAction_UpdateQueue').click(function() { 
			var griddata = $('#jqxGrid').jqxGrid('getdatainformation'); // griddata.rowscount = total rows
			var selected = $('#jqxGrid').jqxGrid('selectedrowindexes');	
			var rows = [];
			for (var r = 0; r < griddata.rowscount; r++) {
				var row = $('#jqxGrid').jqxGrid('getrenderedrowdata', r);
				for (var s in selected)
					if (row.boundindex == selected[s])
						rows.push(row);
			}
			for (var i = rows.length - 1; i > -1; i--)
				$('div.title[title="' + rows[i].song.replace('"', '\"') + '"]').prevAll('div.goTop').click();
			setTimeout('updateGridSongs();', 1000);
		});		
		/* deferred load when ready */
		$.when(pttUi.uiLoaded()).then($.proxy(pttUi.init, pttUi));
	}
}
pttUi = {
	uiLoaded: function() {
    var defer = $.Deferred();
    var resolveWhenReady = function () {
      if ($('#jqxGrid').length > 0)
        return defer.resolve();
      setTimeout(resolveWhenReady, 500);
    }
    resolveWhenReady();
    return defer.promise();
  },
	init: function() {
		/* load menu */
	  $("#jqxMenu").jqxMenu({ width: '180px', height: '30px', theme: 'shinyblack' });
	  $("#jqxMenu").css('visibility', 'visible');
	  $("#disabled").jqxCheckBox({ width: '150px', height: '20px' });
	  $("#open").jqxCheckBox({ width: '150px', height: '20px' });
	  $("#hover").jqxCheckBox({ width: '150px', height: '20px' });
	  $("#topLevelArrows").jqxCheckBox({ width: '200px', height: '20px' });
	  $("#animation").jqxCheckBox({ width: '150px', height: '20px' });
	  $("#animation").bind('change', function (event) {
		var value = event.args.checked;
		// enable or disable the menu's animation.
		if (!value)
			$("#jqxMenu").jqxMenu({ animationShowDuration: 0, animationHideDuration: 0, animationShowDelay: 0 });
		else
			$("#jqxMenu").jqxMenu({ animationShowDuration: 300, animationHideDuration: 200, animationShowDelay: 200 });
		});
		$("#disabled").bind('change', function (event) {
		var value = event.args.checked;
		// enable or disable the menu
		if (!value)
			$("#jqxMenu").jqxMenu({ disabled: false });
		else
			$("#jqxMenu").jqxMenu({ disabled: true });
		});
		$("#hover").bind('change', function (event) {
		var value = event.args.checked;
		// enable or disable the menu's hover effect
		if (!value)
			$("#jqxMenu").jqxMenu({ enableHover: false });
		else
			$("#jqxMenu").jqxMenu({ enableHover: true });
		});
		$("#open").bind('change', function (event) {
		var value = event.args.checked;
		// enable or disable the opening of the top level menu items when the user hovers them
		if (!value)
			$("#jqxMenu").jqxMenu({ autoOpen: false });
		else
			$("#jqxMenu").jqxMenu({ autoOpen: true });
		});
		$("#topLevelArrows").bind('change', function (event) {
		var value = event.args.checked;
		// enable or disable the opening of the top level menu items when the user hovers them
		if (!value)
			$("#jqxMenu").jqxMenu({ showTopLevelArrows: false });
		else
			$("#jqxMenu").jqxMenu({ showTopLevelArrows: true });
		});
	  $("#jqxMenu").jqxMenu('disable', 'fin', true);	
		/* setup windows */
	  var windowContainer = $('#windowContainer');
	  var offset = windowContainer.offset();
	  $('#pttWindow').jqxWindow({ theme: 'shinyblack', width: 725, height: 530, showCollapseButton: true, position: { x: offset.left + 50, y: offset.top + 50} }); // height: 'auto'
		/* load grid */
		var imagerenderer = function (row, datafield, value) {
	  	return '<img height="25" width="25" src="' + value + '"/>';
	  }
		var source = {
			localdata: getSongs(),
			datatype: 'array'
		};
		var dataAdapter = new $.jqx.dataAdapter(source);
		$('#jqxGrid').jqxGrid({
			theme: 'shinyblack',
			width: 720,
			height: 500,
			sortable: true,
			filterable: true,
			columnsresize: true,
			editable: true,
			selectionmode: 'multiplerows',
			source: dataAdapter,
			columns: [
				{ text: '', datafield: 'coverart', editable: false, width: 25, cellsrenderer: imagerenderer },
				// { text: '', datafield: 'selected', columntype: 'checkbox', width: 40 }, // selectionmode: 'none'
				{ text: 'Sort', datafield: 'sortOrder', columntype: 'numeric', width: 40 },						
				{ text: 'Song', datafield: 'song', editable: false, width: 180 },
				{ text: 'Length', datafield: 'length', editable: false, width: 50 },
				{ text: 'Artist', datafield: 'artist', editable: false, width: 165 },
				{ text: 'Album', datafield: 'album', editable: false, width: 140 },
				{ text: 'Genre', datafield: 'genre', editable: false, width: 115 }			
			]
		});	
		// select or unselect rows when the checkbox is checked or unchecked.
	  $('#jqxGrid').bind('cellendedit', function(event) {
			if (event.args.value && event.args.columntype == 'checkbox') // added numeric
				$('#jqxGrid').jqxGrid('selectrow', event.args.rowindex);
			else if (event.args.columntype == 'checkbox')
				$('#jqxGrid').jqxGrid('unselectrow', event.args.rowindex);
	  });	
	  $('#jqxGrid').bind('sort', function (event) {
			$("#jqxGrid").jqxGrid('updatebounddata');	
	  });
  }
}
$(function() { remoteCss(); remoteScript(); });