///<reference path="yui/utilities/utilities.js" />

(function() {   
    
    //a reference to the carousel widget.
    var carousel
    
    //Local references to YUI
    var _DOM = YAHOO.util.Dom;
    var _EVENT = YAHOO.util.Event;
    
    //The product's attribute collection. 
    BBE.attributes = [ ];
    
    //The attribute drop-down lists (on the page).
    BBE.attributeSelects = [ ];

    /**
     * Since carousel.addItem uses an HTML string to create the interface
     * for each carousel item, this method formats the HTML for an LI.
     **/
    var fmtItem = function(attribute) {

  	    var innerHTML = 
  		    '<a onclick="attributeThumbClick(' + attribute.id + ')" title="' + attribute.name + '">' + 
  		    '<img src="' + attribute.thumb + '" width="120" alt="' + attribute.name + '" />' + 
  		    attribute.name + 
  		    '<\/a>';
	    return innerHTML;
    };

    /**
     * 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);	
	   
	    _DOM.setStyle("carousel-container", "display", "block");
    };

    /**
     * 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(!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(!alreadyCached) {
		    load(this, start, last);
	    }
    };

    var load = function(carousel, start, last) {
	    for(var i = start-1; i < last; i++) {
		    carousel.addItem(i+1, fmtItem(BBE.attributes[i]));
	    }
    };



    /**
     * Handler for enabling/disabling the carousel's "previous" button. 
     */
    var handlePrevButtonState = function(type, args) {

	    var enabling = args[0];
	    var leftImage = args[1];
	    if(enabling) {
		    leftImage.src = "client_scripts/carousel/images/left-enabled.gif";	
	    } else {
		    leftImage.src = "client_scripts/carousel/images/left-disabled.gif";
	    }
    };

    /**
     * Handler for enabling/disabling the carousel's "next" button. 
     */
    var handleNextButtonState = function(type, args) {

	    var enabling = args[0];
	    var leftImage = args[1];
	    if(enabling) {
		    leftImage.src = "client_scripts/carousel/images/right-enabled.gif";	
	    } else {
		    leftImage.src = "client_scripts/carousel/images/right-disabled.gif";
	    }
    };

    /**
     * Create the attribute image carousel after the page has loaded.
     */
    var initCarousel = function() 
    {
        //Init the image carousel only if there are attributes with images to display.
        if (BBE.attributes.length > 0) {
	        carousel = new YAHOO.extension.Carousel("dhtml-carousel", 
		        {
			        numVisible:        3,
			        animationSpeed:    0.25,
			        scrollInc:         3,
			        navMargin:         8,
			        size:              BBE.attributes.length,
			        prevElement:       "prev-arrow",
			        nextElement:       "next-arrow",
			        loadInitHandler:   loadInitialItems,
			        loadNextHandler:   loadNextItems,
			        loadPrevHandler:   loadPrevItems,
			        prevButtonStateHandler:   handlePrevButtonState,
			        nextButtonStateHandler:   handleNextButtonState
		        }
	        );
    	    
    	    //Get the attribute drop-down lists and display the image of the selected attributes.
	        BBE.attributeSelects = document.getElementsByName("cboAttribute");
	        for (var i=0; i < BBE.attributeSelects.length; i++) {
                if (BBE.attributeSelects[i].options.length == 2) { 
                    BBE.attributeSelects[i].selectedIndex = 1;
                }
                
    	        syncImagesWithCombos(BBE.attributeSelects[i]);
    	    }
	    }
    };

    _EVENT.addListener(window, "load", initCarousel);    
})();

function attributeThumbClick(att)
{
	var images = BBE.attributes;
	var selects = BBE.attributeSelects;

	for (var i=0; i < selects.length; i++) {
		var cb = selects[i];
		for (var j=0; j < cb.options.length; j++) {
			cb.options[j].selected = (cb.options[j].value == att);
		}
	}

	for (var k=0; k < images.length; k++) {
		if (images[k].id == att) {
			document.getElementById("product_img").src = images[k].image;
		}
	}	

	return true;
}

function syncImagesWithCombos(combo)
{
	var images = BBE.attributes;
	var selects = BBE.attributeSelects;

	if (combo) {
		var att = combo.options[combo.selectedIndex].value;
		for (var i=0; i < images.length; i++) {
			if (images[i].id == att) {
				document.getElementById("product_img").src = images[i].image;
			}
		}
	} 
}