var selected_tabid = "";
var tabCount = 6;
var enableTextSelectRestriction = false;

/*
http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
*/


// Initialisation (only)
$(".tab").click(function() {changeToTab(lastChar($(this).attr("id"))); });
$(".tab").mouseover(function() { onMouseOver(lastChar($(this).attr("id"))); });
$(".tab").mouseout(function() { onMouseOut(lastChar($(this).attr("id"))); });
$("#content2 .right_content .hyperlist li").mouseup(function() { changeToCarousel(2, $(this).index() + 1); });


// This is the code disabling text selection, needed for drag and drop
if (enableTextSelectRestriction) {
    document.onselectstart = new Function('return false');
    function ds(e) { return false; }
    function ra() { return true; }
    document.onmousedown = ds;
    document.onclick = ra;
}

$(".contents .bottom_slidebar").slider({max:4, orientation : 'horizontal', animate: true});

$(".contents .bottom_slidebar").bind('slide', function(e,ui){

	$(this).parent().find(".bottom_carouselLinks a").removeClass("carouselLinkSelected");

	$(this).parent().parent().find(".right_content > div").hide();
        $(this).parent().parent().find(".right_content").find('div:eq(' + ui.value + ')').show();

        $(this).parent().parent().find(".left_image > div").hide();
        $(this).parent().parent().find(".left_image").find('div:eq(' + ui.value + ')').show();
            
        $(this).parent().parent().find(".right_content").jScrollPaneRemove();
        $(this).parent().parent().find(".right_content").jScrollPane(
                {
                    scrollbarWidth : 12,
		    showArrows : true
                }
            );

            // 3)
    //       $(this).find(".ui-slider-handle").css('opacity', 0.5);

            // 4)
             $(this).parent().find(".bottom_carouselLinks a:eq("+ui.value+")").addClass("carouselLinkSelected");
}).bind('slidestop', function(){

	//$(this).find(".ui-slider-handle").css('opacity', 1);
	
});

$(".contents .bottom_carouselLinks a").click(function(){
	var event = jQuery.Event("slide");
	var ui = $();
	ui.value = $(this).index();
	$(this).parent().parent().find(".bottom_slidebar").trigger(event,[ui]).slider({value:$(this).index()});
	$(this).parent().parent().find(".bottom_carouselLinks a").removeClass("carouselLinkSelected");
	$(this).addClass("carouselLinkSelected");
});

/*
function setupCarouselLinks(tabid) {
    //loop thru all elements in the content
   // for (var i = 0; i < tabCount; i++) {
        /*
            Foreach links, bind a corresponding action to it, which is
            1) Hide other contents + images(if there are any)
            2) Show the content meant to show
            3) Remove style for "not selected links"
            4) Add "selected link" style
            5) Relocate the cursor
        
        $("#content" + tabid + " .bottom_carouselLinks a").mousedown(function(){
		
		
		
	},function() {
           // alert($(this).index()); // for debug

            // 1) and 2)
            $("#content" + tabid + " .right_content > div").hide();
            $("#content" + tabid + " .right_content").find('div:eq(' + $(this).index() + ')').show();

            $("#content" + tabid + " .left_image > div").hide();
            $("#content" + tabid + " .left_image").find('div:eq(' + $(this).index() + ')').show();
            
            $("#content" + tabid + " .right_content").jScrollPaneRemove();
            $("#content" + tabid + " .right_content").jScrollPane(
                {
                    scrollbarWidth : 12,
		    showArrows : true
                }
            );

            // 3)
            $("#content" + tabid + " .bottom_carouselLinks a").removeClass("carouselLinkSelected");

            // 4)
            $(this).addClass("carouselLinkSelected");

            // 5)
            $("#content" + tabid + " .ptgicon").offset(
            {
                left: ($("#content" + tabid + " .bottom_slidebar").find(".cell:eq(" + $(this).index() + ")").offset().left) + ($("#content" + tabid + " .bottom_slidebar").find(".cell:eq(" + $(this).index() + ")").width() / 2) - 15,
                top: $("#content" + tabid + " .ptgicon").parent().offset().top + 10
            }
            );
	}
        );

        $("#content" + tabid + " .bottom_slidebar .cell").mouseup(
        function() {
            $("#content" + tabid + " .bottom_carouselLinks").find("a:eq(" + $(this).index() + ")").mouseup();
        }
        );
   // }

    $("#content" + tabid + " .ptgicon").offset(
    {
        left: ($("#content" + tabid + " .bottom_slidebar").find(".cell:eq(0)").offset().left) + ($("#content" + tabid + " .bottom_slidebar").find(".cell:eq(0)").width() / 2) - 15,
        top: $("#content" + tabid + " .ptgicon").parent().offset().top + 10
    }
    );

    $("#content" + tabid + " .ptgicon").draggable(
    {
        containment: 'parent',
        grid: [1, 65535],
        start: function(event, ui) {
            if (!$.browser.msie) {
                $(this).stop().css('opacity', 0.5);
            }
        },
        stop: function(event, ui) {
            if (!$.browser.msie) {
                $(this).stop().css('opacity', 1);
            }
            for (i = 0; i < 5; i++) {
                diff = $(this).offset().left - $("#content" + tabid + " .bottom_slidebar").find(".cell:eq(" + i + ")").offset().left;
                if ((diff >= 0) && (diff < 134)) {
                    $(this).offset({
                        left: ($("#content" + tabid + " .bottom_slidebar").find(".cell:eq(" + i + ")").offset().left) + ($("#content" + tabid + " .bottom_slidebar").find(".cell:eq(" + i + ")").width() / 2) - 15,
                        top: $(this).offset().top
                    });

                    $("#content" + tabid + " .bottom_carouselLinks").find("a:eq(" + i + ")").mouseup();

                    break;
                }
            }

            if ($(this).offset().left < $(this).parent().offset().left) {
                $(this).offset({
                    left: ($("#content" + tabid + " .bottom_slidebar").find(".cell:eq(0)").offset().left) + ($("#content" + tabid + " .bottom_slidebar").find(".cell:eq(0)").width() / 2) - 15,
                    top: $(this).offset().top
                });
                $("#content" + tabid + " .bottom_carouselLinks").find("a:eq(0)").mouseup();
            }

            if ($(this).offset().left > ($(this).parent().offset().left + $(this).parent().width())) {
                $(this).offset({
                    left: ($("#content" + tabid + " .bottom_slidebar").find(".cell:eq(4)").offset().left) + ($("#content" + tabid + " .bottom_slidebar").find(".cell:eq(4)").width() / 2) - 15,
                    top: $(this).offset().top
                });
                $("#content" + tabid + " .bottom_carouselLinks").find("a:eq(4)").mouseup();
            }
        }
    }
    );

    // initialisation
    $("#content" + tabid + " .right_content > div").hide();
    $("#content" + tabid + " .right_content").find('div:eq(0)').show();
    $("#content" + tabid + " .left_image > div").hide();
    $("#content" + tabid + " .left_image").find('div:eq(0)').show();
    $("#content" + tabid + " .bottom_carouselLinks").find("a:eq(0)").addClass("carouselLinkSelected");
}*/

function changeToCarousel(tabid, carouselid) {
    $("#content" + tabid + " .bottom_carouselLinks").find("a:eq(" + carouselid + ")").mouseup();
}

function changeToTab(tabid) {
    
    $(".tab").removeClass("selected_tab");
    $(".tab").addClass("normal_tab");
    $("#tab" + tabid).removeClass("normal_tab");
    $("#tab" + tabid).addClass("selected_tab");

    $(".content").hide();
    // Transparent in IE is a little bit strange and so disable it for better appearance
    if ($.browser.msie) {
        $("#content" + tabid).show();
    } else {
        $("#content" + tabid).fadeIn();
    }

    $(".right_content").jScrollPaneRemove();
    if ((tabid == 1) || (tabid == 2) || (tabid == 3) || (tabid == 4) || (tabid == 5)) {
        $("#content" + tabid).find(".right_content").jScrollPane(
                {
                    scrollbarWidth: 12,
                    showArrows: true
                }
        );
    }
    
    selected_tabid = tabid;
}

function onMouseOver(tabid) {
    if (selected_tabid == tabid)
        $("#tab" + tabid).removeClass("selected_tab");
    else
        $("#tab" + tabid).removeClass("normal_tab");
    $("#tab" + tabid).addClass("onhover_tab");
}

function onMouseOut(tabid) {
    $("#tab" + tabid).removeClass("onhover_tab");
    if (selected_tabid == tabid)
        $("#tab" + tabid).addClass("selected_tab");
    else
        $("#tab" + tabid).addClass("normal_tab");
}

function lastChar(txt) {
    return txt.substr(txt.length - 1, 1);
}