$(document).ready(function(){
    var imageCarousel = "";
    var imageCarousel_itemList = [];
    var movieCarousel = "";
    var movieCarousel_itemList = [];
    var audioCarousel = "";
    var audioCarousel_itemList = [];
    var image = false;
    var movie = false;
    var audio = false;

    var largeImage = getData("largeImage", 1);
    setLargeImage(largeImage);
     var downloadImage = getData("downloadImage", 1);
    setDownloadImage(downloadImage);
    var imageText = getData("imageText", 1);
    setImageText(imageText);

    $("#imageCarouselList li").click(function(event){
        event.stopPropagation();
        var index = setCarouselClickEvent($(this), "imageThumbnails");
        imageCarouselClick(index);
    });
   
    function setLargeImage(data){
       $("#mainImage").attr("src", data);
    }
    function setDownloadImage(data){
	     $("#downloadImageLink").attr("href", data)
    }
     function setImageText(data){
        $("#imageOver span").text(data)
    }

    function setCarouselClickEvent(clickedElement, linkId){
        var id = $(clickedElement).find("a[id^='" + linkId + "']").attr("id");
        id = id.substr(linkId.length, id.length);
        return id;
    }
    
    function imageCarouselClick(index){
            var largeImage = getData("largeImage", index);
            setLargeImage(largeImage);
            var downloadImage = getData("downloadImage", index);
            setDownloadImage(downloadImage);
            var imageText = getData("imageText", index);
            setImageText(imageText);
    }
    
	function setRotation(selector, itemList){
        $(selector).each(function(i){
            var item = $(this).html();
            itemList.push(item);
        });
	}

    function imageCarousel_itemVisibleInCallback(carousel, item, i, state, evt){
        if (state != 'prev' && state != 'next')
            return;
        var idx = carousel.index(i, imageCarousel_itemList.length);
        var newItem = carousel.add(i, imageCarousel_itemList[idx - 1]);
        $(newItem).unbind('click');
        $(newItem).click(function(event){
            event.stopPropagation();
	        var index = setCarouselClickEvent($(this), "imageThumbnails");
	        imageCarouselClick(index);
        });
        setClass(newItem, "imageCarouselItem");
        setHover();
    };

    function imageCarousel_itemVisibleOutCallback(carousel, item, i, state, evt){
        if (state != 'prev' && state != 'next')
            return;
        carousel.remove(i);
    };

    function movieCarousel_itemVisibleInCallback(carousel, item, i, state, evt){
        if (state != 'prev' && state != 'next')
            return;
        var idx = carousel.index(i, movieCarousel_itemList.length);
        var newItem = carousel.add(i, movieCarousel_itemList[idx - 1]);
        setClass(newItem, "movieCarouselItem");
        setHover();
    };

    function movieCarousel_itemVisibleOutCallback(carousel, item, i, state, evt){
        if (state != 'prev' && state != 'next')
            return;
        carousel.remove(i);
    };

    function audioCarousel_itemVisibleInCallback(carousel, item, i, state, evt){
        if (state != 'prev' && state != 'next')
            return;
        var idx = carousel.index(i, audioCarousel_itemList.length);
        var newItem = carousel.add(i, audioCarousel_itemList[idx - 1]);
        setClass(newItem, "audioCarouselItem");
        setHover();
    };

    function audioCarousel_itemVisibleOutCallback(carousel, item, i, state, evt){
        if (state != 'prev' && state != 'next')
            return;
        carousel.remove(i);
    };
    setRotation("#imageCarouselList li", imageCarousel_itemList);
    setRotation("#movieCarouselList li", movieCarousel_itemList);
    setRotation("#audioCarouselList li", audioCarousel_itemList);
    if(imageCarousel_itemList.length > 5 ){
        $("#imageCarouselList").jcarousel({
            btnNextHTML: '<div></div>',
            btnPrevHTML: '<div></div>',
            scroll: 1,
            wrap: 'circular',
            itemVisibleInCallback: {onBeforeAnimation: imageCarousel_itemVisibleInCallback},
            itemVisibleOutCallback: {onAfterAnimation: imageCarousel_itemVisibleOutCallback}
        });
        setHover();
    }else{
        var shortImageCarousel = $("#imageCarouselList").jcarousel({
        });
        shortImageCarousel.size(imageCarousel_itemList.length);
        setHover();
    }
    if(movieCarousel_itemList.length > 5 ){
        $("#movieCarouselList").jcarousel({
            btnNextHTML: '<div></div>',
            btnPrevHTML: '<div></div>',
            scroll: 1,
            wrap: 'circular',
            itemVisibleInCallback: {onBeforeAnimation: movieCarousel_itemVisibleInCallback},
            itemVisibleOutCallback: {onAfterAnimation: movieCarousel_itemVisibleOutCallback}
        });
        setHover();
    }else{
        var shortMovieCarousel = $("#movieCarouselList").jcarousel({
        });
        shortMovieCarousel.size(movieCarousel_itemList.length);
        setHover();
    }
    if(audioCarousel_itemList.length > 5 ){
        $("#audioCarouselList").jcarousel({
            btnNextHTML: '<div></div>',
            btnPrevHTML: '<div></div>',
            scroll: 1,
            wrap: 'circular',
            itemVisibleInCallback: {onBeforeAnimation: audioCarousel_itemVisibleInCallback},
            itemVisibleOutCallback: {onAfterAnimation: audioCarousel_itemVisibleOutCallback}
        });
        setHover();
    }else{
        var shortMovieCarousel = $("#audioCarouselList").jcarousel({
        });
        shortMovieCarousel.size(audioCarousel_itemList.length);
        setHover();
    }
   function setClass(selector, classname){
        $(selector).each(function(){
            $(this).addClass(classname);
        });
    }
    function setHover(){
        $(".imageCarouselItem").hover(
		    function(){
		        removeOverlay(".imageCarouselItemOverLay");
			    $(this).children().prepend('<div class="imageCarouselItemOverLay" style="position: absolute; top: 0px; left: 0px; z-index: 90; background-color: #fff; display: none;"></div>');
			    $(".imageCarouselItemOverLay").css({ opacity: 0.24, width: '100%', height: '100%' });
			    $(".imageCarouselItemOverLay").fadeIn(300);
		    },
		    function(){
			    $(".imageCarouselItemOverLay").fadeOut(300, removeOverlay(".imageCarouselItemOverLay"));
		    }
	    );
        $(".movieCarouselItem").hover(
		    function(){
		        removeOverlay('.movieCarouselItemOverLay');
			    $(this).append('<div class="movieCarouselItemOverLay" style="position: absolute; top: 0px; left: 0px; z-index: 90; background-color: #fff; display: none;"></div>');
			    $('.movieCarouselItemOverLay').css({ opacity: 0.24, width: '155px', height: '87px' });
			    $('.movieCarouselItemOverLay').fadeIn(300);
		    },
		    function(){
			    $('.movieCarouselItemOverLay').fadeOut(300, removeOverlay('.movieCarouselItemOverLay'));
		    }
	    );
        $(".audioCarouselItem").hover(
		    function(){
		        removeOverlay('.audioCarouselItemOverLay');
			    $(this).append('<div class="audioCarouselItemOverLay" style="position: absolute; top: 0px; left: 0px; z-index: 90; background-color: #fff; display: none;"></div>');
			    $('.audioCarouselItemOverLay').css({ opacity: 0.24, width: '155px', height: '87px' });
			    $('.audioCarouselItemOverLay').fadeIn(300);
		    },
		    function(){
			    $('.audioCarouselItemOverLay').fadeOut(300, removeOverlay(".audioCarouselItemOverLay"));
		    }
	    );
	}
});