// JavaScript Document
jQuery(document).ready(function() {																

var about = $('#playlist_description').html();

function pad2(number) {
   
     return (number < 10 ? '0' : '') + number;
   
}


	$(".gridcell").hover(function(){
		
		var currentId = $(this).attr('id'); /*grab full id of thumbnail*/
		var idNum = currentId.replace("gridcell",""); /*strip id to grab only the array number*/
		var meta = 'meta' + idNum;
		var htmlstr = $(this).find('div.meta').html();
		var metaArray = htmlstr.split("<br>");
		var name = metaArray[0];
		var duration = metaArray[1];
		var description = metaArray[2];
		
		secVar0 = parseFloat(duration);
		minVar = Math.floor(secVar0/60);  		// The minute
		secVar = secVar0 % 60;              	// The balance of seconds
		
		var seconds = pad2(secVar);		
		var duration2 = minVar + ':' + seconds;		

		document.getElementById('playlist_title').innerHTML = name;
		document.getElementById('playlist_duration').innerHTML = duration2;
		document.getElementById('playlist_description').innerHTML = description;
		
		
		$(this).css({'z-index' : '50000'}); /*Add a higher z-index value so this image stays on top*/ 
		$(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
			.animate({
				marginTop: '-100px', /* The next 4 lines will vertically align this image */ 
				marginLeft: '-130px',
				top: '20%',
				left: '20%',
				width: '240px', /* Set new width */
				height: '180px', /* Set new height */
				padding: '48px 50px 50px 48px' /*positions picture inside of dev that holds background image */
			}, 200); /* this value of "200" is the speed of how fast/slow this hover animates */
	
		} , function() {
		
		document.getElementById('playlist_title').innerHTML = 'ABOUT';
		document.getElementById('playlist_duration').innerHTML = '';
		document.getElementById('playlist_description').innerHTML = about;

		
		$(this).css({'z-index' : '0'}); /* Set z-index back to 0 */
		$(this).find('img').removeClass("hover").stop()  /* Remove the "hover" class , then stop animation queue buildup*/
			.animate({
				marginTop: '0', /* Set alignment back to default */
				marginLeft: '0',
				top: '0',
				left: '0',
				width: '140px', /* Set width back to default */
				height: '105px', /* Set height back to default */
				padding: '0px'
			}, 200);
		}, function(){
	});		


$(".scrollable").scrollable();

// setup ul.tabs to work as tabs for each div directly under div.panes
$("ul.tabs").tabs("div.panes > div",{
	/* tabs configuration goes here */

	// first configuration property
	initialIndex: 2

});



});