jQuery(document).ready(function() {

    /* initial values */
	
    var autoplay = 0; // 0:false, 1:true //;
    var allowFullScreen = 1; // 0:false, 1:true //;
    var showRelatedVideos = 1; // 0:false, 1:true //;
    var backGroundColor = "#FF"; // 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, "420", "215", "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.9
                });
            }
			
			
	
            $(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.9
                    }, 250);
                }else{
                    $(this).parent('div').animate({
                        "opacity":1
                    }, 250);
                }
				
            });
	
            $(this).parent("div").click(function(){
				
                e = $(this);
                $("#current").animate({
                    "opacity":0.9
                }, 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;
            });
        });
		
    }
});