/**
 * You must create the carousel after the page is loaded since it is
 * dependent on an HTML element (in this case 'mycarousel'.) See the
 * HTML code below.
 **/
var carousel; // for ease of debugging; globals generally not a good idea
var initCarousel = function(selectorType) 
{
	var channels = document.getElementById("channels_" + selectorType);
	if (channels)
	{
        tabs = channels.getElementsByTagName("li");
        if (tabs)
        {
            for (index = 0; index < tabs.length; index++)
            {
	            tab = tabs[index];
	            if (tab) {
	                var size = 21; var visibleCount = 7;
	                if (selectorType.toLowerCase() == "home") size = 18;
	                SetCarouselStyle(selectorType, tab.id);
	                var imagesArr = eval (tab.id + "Arr");
                    if (imagesArr) {
                        if (size == 18) {
                            visibleCount = 6;
                            if (imagesArr.length <= 6) size = 6; else if (imagesArr.length <= 12) size = 12;
                        }
                        else {
                            if (imagesArr.length <= 7) size = 7; else if (imagesArr.length <= 14) size = 14;
                        }
                    }
	                carousel = new YAHOO.extension.Carousel(tab.id + "_carousel", 
		                {
			                numVisible:        visibleCount,
			                animationSpeed:    0.5,
			                scrollInc:         visibleCount,
			                navMargin:         40,
			                prevElement:     tab.id + "_prevarrow",
			                nextElement:     tab.id + "_nextarrow",
			                loadInitHandler:   loadInitialItems,
			                loadNextHandler:   loadNextItems,
			                loadPrevHandler:   loadPrevItems,
			                size: size,
			                prevButtonStateHandler:   handlePrevButtonState,
			                nextButtonStateHandler:   handleNextButtonState
		                }
		                );
		         }
		     }
        }
    }
};

function SetCarouselStyle(selectorType, tabId)
{
    if (selectorType.toLowerCase() == "home") 
	{
        var carouselTab = document.getElementById(tabId + '_carousel');carouselTab.style.width = "795px"; carouselTab.style.margin = "0px";
//        var tabContent = document.getElementById(tabId + '_content');imageItems = tabContent.getElementsByTagName('li');
//        for (var index = 0; index < imageItems.length; index++) imageItems[index].style.width = "114px";
        var hilightedDiv = document.getElementById(tabId + '_hilightLabel');hilightedDiv.style.left = "48px";
        var channels = document.getElementById('channels_' + selectorType); channelsUL = channels.getElementsByTagName('ul');channelsUL[0].style.padding = "0px"; 
    }
    else 
    { 
//        var carouselTab = document.getElementById(tabId + '_carousel');carouselTab.style.width = "910px"; carouselTab.style.margin = "0 7px";
        var channels = document.getElementById('channels_' + selectorType);channels.style.background = "#fff"; channelsUL = channels.getElementsByTagName('ul');channelsUL[0].style.padding = "5px 7px 0"; 
    }
}

/**
 * Custom inital load handler. Called when the carousel loads the initial
 * set of data items. Specified to the carousel as the configuration
 * parameter: loadInitHandler
 **/
var loadInitialItems = function(type, args) {
	var start = args[0];
	var last = args[1]; 
	load(this, start, last);      
};

/**
 * Custom load next handler. Called when the carousel loads the next
 * set of data items. Specified to the carousel as the configuration
 * parameter: loadNextHandler
 **/
var loadNextItems = function(type, args) {	

	var start = args[0];
	var last = args[1]; 
	var alreadyCached = args[2];
	
	if(start != 1)
	{
	    hideHilighted(this);
	}
	
	if(!alreadyCached) {
		load(this, start, last);
	}
};

/**
 * Custom load previous handler. Called when the carousel loads the previous
 * set of data items. Specified to the carousel as the configuration
 * parameter: loadPrevHandler
 **/
var loadPrevItems = function(type, args) {
	var start = args[0];
	var last = args[1]; 
	var alreadyCached = args[2];
	
	if(start == 1)
	{
	    displayHilighted(this);
	}
	else
	{
	    hideHilighted(this);
	}
	
	if(!alreadyCached) {
		load(this, start, last);
	}
};

var load = function(tabID, start, last) 
{
    tabCarousel = document.getElementById(tabID._carouselElemID);
    LoadSelectedTabImages(tabCarousel, start-1);
};

/**
 * Custom button state handler for enabling/disabling button state. 
 * Called when the carousel has determined that the previous button
 * state should be changed.
 * Specified to the carousel as the configuration
 * parameter: prevButtonStateHandler
 **/
var handlePrevButtonState = function(type, args) {

	var enabling = args[0];
	var leftImage = args[1];
	if(enabling) {
		leftImage.src = "http://cache.reelzchannel.com/assets/widgets/movieselector/leftarrow.gif";	
	} else {
		leftImage.src = "http://cache.reelzchannel.com/assets/widgets/movieselector/leftnoarrow.gif";	
	}
	
};

/**
 * Custom button state handler for enabling/disabling button state. 
 * Called when the carousel has determined that the next button
 * state should be changed.
 * Specified to the carousel as the configuration
 * parameter: nextButtonStateHandler
 **/
var handleNextButtonState = function(type, args) 
{
	var enabling = args[0];
	var rightImage = args[1];
	if(enabling) {
		rightImage.src = "http://cache.reelzchannel.com/assets/widgets/movieselector/rightarrow.gif";
	} else {
		rightImage.src = "http://cache.reelzchannel.com/assets/widgets/movieselector/rightnoarrow.gif";
	}
};

 function displayHilighted(tabID)
 {
    var hilightedDiv = document.getElementById(tabID._carouselElemID.replace("_carousel", "_hilightLabel"));
    if (hilightedDiv.style.width != "0px")
    {
        hilightedDiv.style.display = "block";
    }
 }
 
 function hideHilighted(tabID)
 {
    var hilightedDiv = document.getElementById(tabID._carouselElemID.replace("_carousel", "_hilightLabel"));
    if (hilightedDiv.style.width != "0px")
    {
        hilightedDiv.style.display = "none";
    }
 }