$(function(){
	// initialize scrollable  
/*	$("div.scrollable").scrollable({ 
        size: 4, 
        items: 'ul',
		navi:'ol.navi',
        hoverClass: 'hover'
	});*/
	
	animateThumbs();
	loadNewVideo();
	
	// loads bundles into player
	$("div#other-container ul li.publish").each(function(){
		if ( this.id ) {
			$(this).click(function() {
				// id of the BUNDLE
				var bundle_id = this.id.substr(7);
				// the full bundle (episode and array of extras)
				var bundle_new = bundle[bundle_id];
				// separate out episode and extras
				var bundle_episode = bundle_new[0];
				var bundle_extras = bundle_new[1];
				switch_player_item(bundle_episode['id'], bundle_episode['name'], bundle_episode['description']);

				// switch out header
				$('div#featured-container>img').replaceWith('<img src="images/episodes/episode-header-' + bundle_id + '.gif" width="745" height="50" />');
				
				$('#featured-chapters>ul li').replaceWith('<li title="' + bundle_episode['description'] + '" id="' + bundle_episode['id'] + '">' + '<div class="info"><p>' + bundle_episode['name'] + '</p></div><div><img src="' + bundle_episode['thumbnailUrl'] + '/width/140/height/85/" alt="" width="115" height="85" /><b></b></div></li>');
				var li = '';
				var i = 0;
				if (bundle_extras != null ) {
					for ( i = 0; i < bundle_extras.length; i++ ) {
						li += '<li title="' + bundle_extras[i]['description'] + '" id="' + bundle_extras[i]['id'] + '">' + '<div class="info"><p>' + bundle_extras[i]['name'] + '</p></div><div><img src="' + bundle_extras[i]['thumbnailUrl'] + '/width/140/height/85/" alt="" width="115" height="85" /><b></b></div></li>';
					}
					
				} else {
					li = '<li></li>';
				}
				$('#featured-thumbs ul').replaceWith('<ul>' + li + '</ul>');
				
				$('#featured-thumbs').jScrollPane();
				animateThumbs();
				// scroll back up to player!
				$('html, body').animate({scrollTop:100}, 'slow'); 
				
				//loads videos into player on CLICK
				loadNewVideo();
			});
		}
	});
	
	$('#featured-thumbs').jScrollPane();
	$("div.scrollable").scrollable(); 

});

var mykdp = new KalturaPlayerController("kaltura-static-playlist");

function switch_player_item(entry_id, title, desc) {
	mykdp.insertEntry(entry_id,true);
	mykdp.currentEntryId = entry_id;

	
	// populate name and description
	$("div#featured-episode dt").text(title);
	$("div#featured-episode dd").text(desc);
}

	//loads videos into player
	function loadNewVideo() {
		$("div#featured-chapters ul li").each(function(){
			if ( this.id ) {
				$(this).click(function(){ 
					switch_player_item(this.id, $("div#featured-container ul li#" + this.id + " p").text(), $("div#featured-container ul li#" + this.id).attr("title"));
				});
			}
		});
	}



// animates the play icon on rollover/rollout of thumbs
function animateThumbs() {
	$("#featured-chapters ul li div").hover(
		function(){
			ie = $.browser.msie;
			if ( ie )
				$(this).find("b").hide();
			else
				$(this).find("b").stop().animate({ opacity:0.4 }, 160 );
				KalturaThumbRotator.start($(this).find("img"));
		}, 
		function(){
			ie = $.browser.msie;
			if ( ie )
				$(this).find("b").show();
			else
				$(this).find("b").stop().animate({ opacity:1 }, 160 );
				KalturaThumbRotator.end($(this).find("img"));
		}
	);
}


KalturaThumbRotator = {

	slices : 16, // number of thumbs per video
	frameRate : 1000, // frameRate in milliseconds for changing the thumbs
	
	timer : null,
	slice : 0,
	img  : new Image(),
	
	thumbBase : function (o) // extract the base thumb path by removing the slicing parameters
	{
		var path = o.attr('src');
		
		var pos = path.indexOf("/vid_slice");
		if (pos != -1)
			path = path.substring(0, pos);
			
		return path;
	},
	

	change : function (o, i) // set the Nth thumb, request the next one and set a timer for showing it
	{
		slice = (i + 1) % this.slices;

		var path = this.thumbBase(o);
		
		o.attr('src', path + "/vid_slice/" + i + "/vid_slices/" + this.slices);
		o.attr('src', path + "/vid_slice/" + slice + "/vid_slices/" + this.slices);

		i = i % this.slices;
		i++;
		
		this.timer = setTimeout(function () { KalturaThumbRotator.change(o, i) }, this.frameRate);
	},
	
	start : function (o) // reset the timer and show the first thumb
	{
		clearTimeout(this.timer);
		var path = this.thumbBase(o);
		this.change(o, 1);
	},

	end : function (o) // reset the timer and restore the base thumb
	{
		clearTimeout(this.timer);
		o.attr('src', this.thumbBase(o));
	}
};