/**
 * jquery.rgjqyoutube 1.0.0.
 * 
 * Copyright (c) 2009 RGdesign.org
 * http://www.rgdesign.org
 *
 * Dual licensed under MIT and GPL 2+ licenses
 * http://www.opensource.org/licenses
 *
 * Launch  : May 2009
 * Version : 1.0.0 - May 18 2009 15:54:00 GMT-0300
 */

/* -------- */
jQuery(document).ready(function() {

	/* initial values */
	
	var autoplay = 0; // 0:false, 1:true //;
	var allowFullScreen = 1; // 0:false, 1:true //;
	var showRelatedVideos = 0; // 0:false, 1:true //;
	var backGroundColor = "#070e07"; // for video player flash object //;
								
	function insertFlash(VIDEO_ID, DIV_ID){
		var params = { allowScriptAccess: "always", bgcolor: backGroundColor, allowFullScreen: true };
		var atts = { id: DIV_ID };
		swfobject.embedSWF("http://www.youtube.com/v/"+ VIDEO_ID +"&fs="+allowFullScreen+"&border=0&rel="+showRelatedVideos+"&autoplay="+autoplay+"", DIV_ID, "421", "344", "8.0.0", null, null, params, atts);
		}

	/**/
	var div = $('#jqTube div.menu'),
		ul = $('#jqTube ul.menu'),
		ulPadding = 15;
	var divWidth = div.width();
	div.css({overflow: 'hidden'});
	var lastLi = ul.find('li:last-child');
	//lastLi.attr("class", "lastItem");
	var firstLi = ul.find('li:first-child');
	//firstLi.attr("class", "firstItem");
	div.mousemove(function(e){
		var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
		var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
		div.scrollLeft(left);
	});

	$("#jqTube div.menu a").each(function(){
		if($(this).attr("id") == "selected"){
			rel = $(this).attr("href");
			$("#jqTube .scrollable .items").load(rel, function(){
				initThumbs();
			 });
			
			}
		$(this).click(function(){
			$("#selected").removeAttr("id");
			$(this).attr("id", "selected");
			rel = $(this).attr("href");
			
			/* here you can change the .html to other source, for example using a php with conditional "rel" */
			/* the point here is to use the "rel" attribute to load different items on the thumbs section */
			/* in this case i only use html from the items folder, named as the "rel" + .html */
			$("#jqTube .scrollable .items").load(rel, function(){
			    initThumbs();
				seek = $('div', '#itemsHolder' ).index( $( '.active', '#itemsHolder' )[0]);
				page = seek-4;
				
				amount = $("#itemsHolder div").size();
				if(amount == 1){$("#itemsHolder div:last").after("<div></div><div></div><div></div><div></div>");};
				if(amount == 2){$("#itemsHolder div:last").after("<div></div><div></div><div></div>");};
				if(amount == 3){$("#itemsHolder div:last").after("<div></div><div></div>");};
				if(amount == 4){$("#itemsHolder div:last").after("<div></div>");};
				
				$("#jqTube div.scrollable").scrollable().reload().seekTo(page);
			 });

			return false;
		});
	})
	/**/
	
	/**/
	
	function initThumbs(){
		$("#jqTube div.scrollable").scrollable({size: 5, speed: 600});
		
		$('#pane1').jScrollPane();
		reinitialiseScrollPane = function(){$('#pane1').jScrollPane();}
		
		
		actived = $('div', '#itemsHolder' ).index( $( '.active', '#itemsHolder' )[0]);
		if(actived == (-1)){
			$("#itemsHolder div:first").attr("class", "active");
			}
		
		$("#jqTube div.scrollable .items a").each(function(){
			d = $(this);
			$(this).children('span.pre').children('img').css({"height":66});
			if($(this).parent('div').attr("class") == "active"){
				
				amount = $("#itemsHolder div").size();
				if(amount<=5){
					$("#jqTube .next").addClass("disabled");
					}
				
				$(this).parent('div').attr("id","current");
				$(this).parent('div').css({"opacity":1});
				$("#jqTube .titleOut").html($(this).parent('div').children('span.title').html());
				
				title = $(this).parent('div').children('span.title').html();
				desc = $(this).parent('div').children('span.description').html();
				tags = $(this).parent('div').children('span.tags').html();
				comments = $(this).parent('div').children('span.comments').html();
				
				$('#jqTube .titleOut').html(title);
				
				$('#jqTube #mainHolder').slideDown(250);
				$('#jqTube .infoHolder .title').html(title);
				
				$('#pane1').empty().append($('<p>Nothing to see here</p>')).jScrollPane({scrollbarWidth:20, scrollbarMargin:10});
				$('#pane1').html(desc + "<br /><span class='\ttags\'>" + tags + "</span><br />" + "<span class='\comments\'>"+ comments +"</span>");
				reinitialiseScrollPane();
				
				VID = $('#current a').attr("href").match(/[a-zA-Z0-9-_]+$/);
				insertFlash(VID, 'videoPanel');
				
			}else{
				$(this).parent('div').css({"opacity":0.5});
			}
			
			
	
			$(this).hover(function(){
				// mouse hover state
				$("#jqTube .titleOut").html($(this).nextAll('span.title').html());
	
				if($(this).parent('div').attr("class") != "active"){
					$(this).parent('div').animate({"opacity":1}, 250);
				}else{
					
				}
				
			},function(){
				// mouse out state
				if($(".active")){
					$("#jqTube .titleOut").html($(".active").children('span.title').html());
				}else{
					$("#jqTube .titleOut").html('&nbsp;');
					}
				if($(this).parent('div').attr("class") != "active"){
					$(this).parent('div').animate({"opacity":0.5}, 250);
				}else{
					$(this).parent('div').animate({"opacity":1}, 250);
				}
				
			});
	
			$(this).parent("div").click(function(){
				
				e = $(this);
				$("#current").animate({"opacity":0.5}, 250);
				$("#current").removeAttr("id");
				$(this).attr("id","current");
								
				title = $(this).children('span.title').html();
				desc = $(this).children('span.description').html();
				tags = $(this).children('span.tags').html();
				comments = $(this).children('span.comments').html();
				
				$('#jqTube .titleOut').html(title);
				$('#jqTube .infoHolder .title').html(title);
				$('#pane1').empty().append($('<p>Nothing to see here yet...</p>')).jScrollPane({scrollbarWidth:5, scrollbarMargin:10});
				$('#pane1').html(desc + "<br /><span class='\ttags\'>" + tags + "</span><br />" + "<span class='\comments\'>"+ comments +"</span>");
				reinitialiseScrollPane();
				VID = e.children('a').attr('href').match(/[a-zA-Z0-9-_]+$/);
				insertFlash(VID, 'videoPanel');
				
				return false;
				});
			});
		
	}
});