jQuery(function () {
    jQuery("ul#topTenCollectionList").jcarousel({
        scroll: 1,
        initCallback: topten_collection_onload_callback,
        onButtonAfterAnimationCallBack: animation_callback
    });
});

function topten_collection_onload_callback (carousel, item) {
    //external control
    jQuery("ul#topTenCollectionListControl > li > a").each(function (index) {
        var item = jQuery(this);

        item.bind("click", function () {
            //set active clicked
            jQuery("ul#topTenCollectionListControl > li > a.Active").removeClass("Active"); //clear
            item.addClass("Active"); //set active

            //set active on carousel
            var active_item = carousel.list.find("> li.jcarousel-item").eq(index);
            set_active(carousel, active_item);

            //scroll carousel
            carousel.scroll(index+1, /*animating*/true, /*callback*/function () {
                move_to_visible(carousel, active_item);
            }); //scroll to item

            //show content
            show_topten_content(index);
            
            return false;
        });

    });

    //binding event to all items
    carousel.list.find("> li.jcarousel-item").each(function (index) {
        var item = jQuery(this);

        item.bind("click", function () {
            set_active(carousel, item);
            move_to_visible(carousel, item);

            //show content
            show_topten_content(index);

            //active button
            active_button(index);
        });

        item.bind("mouseover", function () { //hover
            carousel.list.find("> li.Hover").removeClass("Hover");         
            item.addClass("Hover");         
            return false;
        });
    });

    jQuery(document).bind("mouseover", function () { //hover remove
        carousel.list.find("> li.Hover").removeClass("Hover");         
    });

    //active item
    var active_item = carousel.list.find("> li.Active");
    var active_index = jQuery.inArray(active_item.get(0), carousel.list.find("> li"));

    //set active clicked
    jQuery("ul#topTenCollectionListControl > li > a.Active").removeClass("Active"); //clear
    jQuery("ul#topTenCollectionListControl > li > a").eq(active_index).addClass("Active"); //set active

    //set active on carousel
    set_active(carousel, active_item);

    //scroll carousel
    setTimeout(function () {
        carousel.scroll(active_index+1, /*animating*/false, /*callback*/function () {
            move_to_visible(carousel, active_item);
        }); //scroll to item
    }, 1);

    //show content
    show_topten_content(active_index);


}

function active_button (active_index) {
    jQuery("ul#topTenCollectionListControl > li > a.Active").removeClass("Active"); //clear
    jQuery("ul#topTenCollectionListControl > li > a").eq(active_index).addClass("Active");
}

function show_topten_content (active_index) {
    jQuery("#topTenRecipesList > li.Active").removeClass("Active"); //clear
    jQuery("#topTenRecipesList > li").eq(active_index).addClass("Active");
	jQuery("#topTenRecipesList > li.Active").find(".List").each(function() {
		var maxHeight=0;
		$(this).children("li").each(function() {
			if (parseInt($(this).outerHeight())>maxHeight) {
				maxHeight=parseInt($(this).outerHeight());
			}
		});
		$(this).children("li").each(function() {
			if (parseInt($(this).outerHeight())<maxHeight)
				$(this).css("padding-top",maxHeight-parseInt($(this).outerHeight())+"px");
		});
	});
}

function set_active (carousel, active_item) {
    carousel.list.find("> li.Active").removeClass("Active"); //clear
    active_item.addClass("Active"); //set active
}

function move_to_visible (carousel, active_item) {
    if ( active_item.position().left + active_item.width() + carousel.list.position().left > carousel.clip.width() ) { //force visible for active item (right-item)
        carousel.next();
    }
    else if ( active_item.position().left + carousel.list.position().left < 0 ) { //force visible for active item (left-item)
        carousel.prev();
    }
}

function animation_callback (carousel) {
    var active_item = carousel.list.find("> li.Active");
    var active_index = jQuery.inArray(active_item.get(0), carousel.list.find("> li"));

    if ( active_item.length > 0 ) {
        if ( active_item.position().left + active_item.width() + carousel.list.position().left > carousel.clip.width() ) { //right-item-invisible
            //set active for prev item
            active_item.removeClass("Active");
            active_item.prev().addClass("Active");
            active_index--;
        }
        else if ( active_item.position().left + carousel.list.position().left < 0 ) { //left-item-invisible
            //set active for next item
            active_item.removeClass("Active");
            active_item.next().addClass("Active");
            active_index++;
        }
        show_topten_content(active_index);
        active_button(active_index);
    }
}