/**
 * Since carousel.addItem uses an HTML string to create the interface
 * for each carousel item, this method formats the HTML for an LI.
 **/
 
 function out(e, articleNumber)
{
    if (!e) var e = window.event;
	var relTarg = e.relatedTarget || e.toElement;
    var element;
    if (e.target)
    {
        element = e.target;
    }
    else
    {
        element = window.event.srcElement;
    }
    
    if (element.tagName == "DIV" && element.id == "mycarousel" && relTarg.id != "d1" && relTarg.id != "d2"
            && relTarg.id != "u1" && relTarg.id != "closePic" && relTarg.id != "prev-arrow" && relTarg.id != "next-arrow" 
            && relTarg.id != "infokmbt" && relTarg.id != "region")
    {
        carouselCloseDiv(articleNumber);
    }  
}

var fmtItem = function(pictureNr) {

    var imagePath; 
    var imagePathBig; 

    imagePath = parseInt((articleNumber / 100)) + "/";
    imagePath = parseInt((articleNumber / 10000)) + "/" + imagePath;
    imagePath = parseInt((articleNumber / 1000000)) + "/" + imagePath;
    imagePath = parseInt((articleNumber / 100000000)) + "/" + imagePath;
    if (articleNumber > 580000000)
    { imagePath = countryNumber + "/" + imagePath; }
    
    imagePath = imagePath + articleNumber;
    if (currentImageVersion > 0)
    {
        imagePath += "_v" + currentImageVersion;
    }
    if (pictureNr > 1)
    {
       imagePath += "_" + pictureNr;
    }
    
    imagePathBig = ImgUserPath + imagePath + ".jpg";
    imagePath = ImgUserPath + imagePath + "_p.jpg";
    
    var innerHTML = '<a href="' + ViewArticlePageLink + '"><img src="' + imagePath + '"></a>';

    return innerHTML;
};

var load = function(carousel, start, last) {
    for(var i=start;i<=last;i++) {
        carousel.addItem(i, fmtItem(i));
    }
};

/**
 * 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(!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);
    }
};


/**
 * 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 = ImgPartnerPath + "/caroussel/left-enabled.gif";    
    } else {
        leftImage.src = ImgPartnerPath + "/caroussel/left-disabled.gif";
    }
    
};

var articleNumber;
var currentImageVersion;
var carInformation;
var ImgUserPath;
var ImgPartnerPath;
var ViewArticlePageLink;
var countryNumber;

var carousel; // for ease of debugging; globals generally not a good idea
var carouselLoad = function(articleNr, imageVersion, nbPictures, carInfo, ImgPartner, ImgUser, ViewArticlePage, countryNr, previousText, nextText) 
{
   var nbPicturesVisible = 4;
   
   //in case the last gallery was not closed
   if (articleNumber != undefined) { this.carouselCloseDiv(articleNumber); } ;  
   
   ImgPartnerPath = ImgPartner;
   ImgUserPath = ImgUser;
   articleNumber = articleNr;   
   currentImageVersion = imageVersion;
   carInformation = carInfo;
   ViewArticlePageLink = ViewArticlePage;
   countryNumber = countryNr;
   
   //if (nbPictures < nbPicturesVisible)
   //{
   //     nbPicturesVisible = nbPictures;
   //} 
   if (nbPictures > 4)
   {
        document.getElementById("carousel"+ articleNumber).innerHTML = "<div OnMouseOut=\"out(event," + articleNumber + ");\" id=\"mycarousel\" name=\"mycarousel\" class=\"carousel-component\"><img id=\"closePic\" name=\"closePic\" class=\"closePhoto\" src=\"" + ImgPartnerPath + "/caroussel/closeP.png\" alt=\"Close\" onclick=\"javascript:carouselCloseDiv(" + articleNumber + ")\" />" +
            "<div id=\"d1\" name=\"d1\"><img id=\"prev-arrow\" name=\"prev-arrow\" class=\"left-button-image\" src=\"" + ImgPartnerPath + "/caroussel/left-enabled.gif\" alt=\"" + previousText + "\" />" +
            "</div>" +
            "<div id=\"d2\" name=\"d2\"><img id=\"next-arrow\" name=\"next-arrow\" class=\"right-button-image\" src=\"" + ImgPartnerPath + "/caroussel/right-enabled.gif\" alt=\"" + nextText + "\"/>" +
            "</div>" +
            "<div id=\"region\" name=\"region\" class=\"carousel-clip-region\">" +
                "<ul id=\"u1\" name=\"u1\" class=\"carousel-list\">" +
                "</ul>" +
            "</div><div id=\"infokmbt\" name=\"infokmbt\" class=\"KmBodyType\">" + carInformation + "</div>" +
            "</div>";            
    }
    else
    {
        document.getElementById("carousel"+ articleNumber).innerHTML = "<div OnMouseOut=\"out(event," + articleNumber + ");\" id=\"mycarousel\" name=\"mycarousel\" class=\"carousel-component\"><img id=\"closePic\" name=\"closePic\" class=\"closePhoto\" src=\"" + ImgPartnerPath + "/caroussel/closeP.png\" alt=\"Close\" onclick=\"javascript:carouselCloseDiv(" + articleNumber + ")\" />" +
            "<div id=\"d1\" name=\"d1\" style=\"display:none\"><img id=\"prev-arrow\" name=\"prev-arrow\" class=\"left-button-image\" src=\"" + ImgPartnerPath + "/caroussel/left-enabled.gif\" alt=\"" + previousText + "\" />" +
            "</div>" +
            "<div id=\"region\" name=\"region\" class=\"carousel-clip-region\">" +
                "<ul id=\"u1\" name=\"u1\" class=\"carousel-list\">" +
                "</ul>" +
            "</div><div id=\"infokmbt\" name=\"infokmbt\" class=\"KmBodyType\">" + carInformation + "</div>" +
            "</div>";            
    }
              
    if (carousel != undefined) { carousel.reload() } ;  
    
    if (nbPictures > 4)
    {
        carousel = new YAHOO.extension.Carousel("mycarousel", 
            {
                wrap: true,
                size: nbPictures,
                numVisible:        nbPicturesVisible,
                navMargin:         40,
                scrollInc:         4,
                prevElement:       "prev-arrow",
                nextElement:       "next-arrow",
                loadInitHandler:   loadInitialItems,
                loadNextHandler:   loadNextItems,
                loadPrevHandler:   loadPrevItems,
                prevButtonStateHandler:   handlePrevButtonState           
      //          animationSpeed:    0.25,            
            }
            );    
    }
    else
    {
           carousel = new YAHOO.extension.Carousel("mycarousel", 
            {
                wrap: true,
                size: nbPictures,
                numVisible:        nbPicturesVisible,
                navMargin:         40,
                scrollInc:         4,
                prevElement:       "prev-arrow",
              //  nextElement:       "next-arrow",
                loadInitHandler:   loadInitialItems,
                loadNextHandler:   loadNextItems,
                loadPrevHandler:   loadPrevItems,
                prevButtonStateHandler:   handlePrevButtonState           
      //          animationSpeed:    0.25,            
            }
            );       
    }
};
     
 
var carouselCloseDiv = function(articleNr) 
{
    document.getElementById("carousel"+ articleNr).innerHTML = "";
 }