/// <reference path="jquery/jquery-1.4.1-vsdoc.js" />

/********************************************************************************|
 # This copyright notice must be kept untouched in the stylesheet at all times.  |
 # The original version of this script and the associated (x)html                |
 # is available at http://www.encodez.com/                                       |
 # Copyright (c) 2009 Encodez Systems. All rights reserved.                      |
 # ------------------------------------------------------------------------------|
 # This script and the associated (x)html may be modified in any                 | 
 # way to fit your requirements.                                                 |
 #                                                                               | 
 # DYNAMIC MULTI TRANSITION BANNER                                               |
 # Author       : MUNEER SAHEED                                                  |
 # Released on  : 16 June 2009                                                   |
 # Version      : 1.0.0                                                          |
 # Website      : http://www.encodez.com/                                        |
 # Contact      : muneer AT encodez DOT c o m                                    |
 #-------------------------------------------------------------------------------|
 *
 *
 * Properties
 * Following properties of can be editable according to
 * the final result expected.
 *
 * width of the banner
 * If changing this varibale, please do not forget to change
 * the CSS 
 * I    "#bannerTD"
 * II   "#bannerContainer"
 * III  "#bannerFooter"
 * IV   "#bannerFooterNav"
 */ 
var encBannerWidth = 711;

/*
 * This peroperty describes how the banner transition will be
 * The option availbale are
 * I    "slide"         - This slides the banner from left to right.
 * II   "slideDown"     - This slides the banner from top to bottom.
 * III  "fade"          - This makes the banner fade in/fade out.
 */
var encTransitionType = "fade";




/*
 * This property describes the transition of the banner.
 * If it is set to true, the banner will automatically change according to the Timeout
 * value. The selected transition type will be applied while auto transition.
 */
var encAutoRotateBanner = false;

/*
 * Transition timeout.
 */
var encAutoRotateTimeout = 5000;

/*
 * Enable or disable description footer containing thumbnail image.
 * If this is set to true, the properties "encDisableTextsAll", "encEnableThumbImageLink",
 * "encEnableDescription", "encEnableReadMore" will not be executed.
 */
var encEnableFooter = true;

/*
 * Disable all text from the footer
 * except the thumbnail image. This will make possible to 
 * maximise the number of thumbnail image using variable "encNumOfImages".
 */
var encDisableTextsAll = false;

/*
 * Enable/disable link for thumbnail click event.
 */
var encEnableThumbImageLink = true;

/*
 * Enable/disable description in footer
 */
var encEnableDescription = true;

/*
 * Enable/disable readmore button in footer.
 * read more button is described using ".bttnMore" class
 */
var encEnableReadMore = true;



/*
 * STOP !
 * WARNING !!!!
 * Please do not change the below variables.
 * Those are private variables and used for runtime configuration
 */
var encBusy = false;
var encCurrentBanner = -1;


$j(document).ready(function() {
    var numImagesElement = $j("#rotatorHeaderNumImages");
    if (numImagesElement.length != 0) 
    {
        encLoadBanner(numImagesElement.val(), rotatorHeaderImageArray, rotatorHeaderThumbNailImageArray, rotatorHeaderBannerText);
    }
});

/*
params 
* encNumOfImages - Describes the number of background images and thumbnail images are there. Recomended values are 3 or 4. Can be 1 to max possible according to the width of banner.
* encImageArray - This array contains the path to large version of background images. Path can be configured according to the user path. Arrange the images in order. This order will be executed while processing.
e.g. var encImageArray = new Array("/library/images/bannerRotator/large/image_1.jpg", "/library/images/bannerRotator/large/image_2.jpg", "/library/images/bannerRotator/large/image_3.jpg", "/library/images/bannerRotator/large/image_4.jpg");
* encThumbNailImageArray - This array contains the path to thumbnail version of background images. Path can be configured according to the user path.
e.g.  var encThumbNailImageArray = new Array("/library/images/bannerRotator/thumb/image_1.gif", "/library/images/bannerRotator/thumb/image_2.gif", "/library/images/bannerRotator/thumb/image_3.gif", "/library/images/bannerRotator/thumb/image_4.gif");
* encBannerTexts - This array contains the contents used in footer.
* 1   Title
* 2   Description
* 3   Link
* 4   Open in new window - True: Open in new window; False(Default): Open in same window
* If wanted to remove the link only for a single item, just remove the value.
e.g.
    
var encBannerTexts = new Array(4);

encBannerTexts[0] = new Array(3);
encBannerTexts[0][0] = "Bhubezi Clinic's millionth patient gets treated";

encBannerTexts[1] = new Array(3);
encBannerTexts[1][0] = "Ask The Elders competition closing soon";

encBannerTexts[2] = new Array(3);
encBannerTexts[2][0] = "Mission:Possible fundraising target reaches £250,000";
encBannerTexts[2][2] = "http://www.virginunite.com/missionpossible";
encBannerTexts[2][3] = "true";

encBannerTexts[3] = new Array(3);
encBannerTexts[3][0] = "RE*Generation UK helps 25% more children in 2009";
*/

encLoadBanner = function(encNumOfImages, encImageArray, encThumbNailImageArray, encBannerTexts) {

    var encImg = new Array(encNumOfImages);
    var encThumbs = new Array(encNumOfImages);

    encImg = encPreloadImages(encImageArray, encNumOfImages);
    if (encEnableFooter) {
        encThumbs = encPreloadImages(encThumbNailImageArray, encNumOfImages);
    }

    $j("#bannerBody").html("");

    $j("div#bannerContainerCover").css("background-image", "url(" + encImg[0].src + ")");
    encTransformBanner(0, encImg);

    if (encEnableFooter) {
        var tmpCellWidth = Math.floor(encBannerWidth / encNumOfImages);
        var tmpLastCellWidth = tmpCellWidth + (encBannerWidth % encNumOfImages);

        var footerContents = "<table cellpadding='0' cellspacing='0' width='" + encBannerWidth + "' align='center'><tr>";
        for (i = 0; i < encNumOfImages; i++) {
            if ((i + 1) == encNumOfImages)
                footerContents += "<td class='footerCell' width='" + tmpCellWidth + "'>";
            else
                footerContents += "<td class='footerCell' width='" + tmpLastCellWidth + "'>";

            footerContents += "<div class='imgBgDiv_i'><div id='thumbDiv_" + i + "' class='imgDiv' style='background:url(" + encThumbs[i].src + ") 0px 0px no-repeat;'></div></div>";
            footerContents += "<ul id='footerContents_" + i + "'>";
            footerContents += "<li class='footerTitle'></li>";
            footerContents += "<li class='footerDesc'></li>";
            footerContents += "<li class='footerLink'></li>";
            footerContents += "</ul>";
            footerContents += "</td>";
        }
        footerContents += "</tr></table>";
        $j("#bannerFooterNav").html(footerContents);
        $j("#bannerFooter").fadeTo("fast", 0.4);
        showFooter();
        $j(".imgDiv").fadeTo("fast", 1);
    }


    if (!encDisableTextsAll && encEnableFooter) {
        for (i = 0; i < encNumOfImages; i++) {
            $j(".footerTitle:eq(" + i + ")").html(encBannerTexts[i][0]);
            if (encEnableDescription) $j(".footerDesc:eq(" + i + ")").html(encBannerTexts[i][1]);
        }
    }

    if (encEnableFooter) {
        footerIndex = 0;
        $j(".footerCell").each(function() {
            var ids = footerIndex;
            var url = encBannerTexts[ids][2]; ;
            $j(this).mouseup(function() {
                if (url != "") {
                    if (encBannerTexts[ids][3].toLowerCase() == "true") {
                        window.open(encBannerTexts[ids][2]);
                    } else {
                        window.location.href = url;
                    }
                }
            }).mouseenter(function() {
                if (url != "") {
                    $j(this).css("cursor", "pointer");
                }
                $j(".footerTitle").each(function() {
                    $j(this).removeClass("selected");
                });
                $j(".footerTitle", this).addClass("selected");
                encBusy = true;
                encTransformBanner(ids, encImg);
                $j(document).pngFix();
            }).mouseleave(function() {
                encBusy = false;
                $j(document).pngFix();
            });
            footerIndex++;
        }
        )


    }

    if (encAutoRotateBanner) {
        var tmpBannerTimer = setTimeout("encAutorotate(0," + encImg + "," + encNumOfImages + ")", encAutoRotateTimeout);
    }
}

showFooter = function() {
    $j("div#bannerFooter").animate({ width: '711px', opacity: '0.75' }, 'slow');
    $j(".footerTitle:eq(0)").addClass("selected");
}

encTransformBanner = function(ids, encImg)
{
    encCurrentBanner = ids;
    var currentBg = $j("div#bannerContainerCover").css("background-image");
    $j("div#bannerContainer").css("background-image", currentBg);
    
    var cssObj = {"opacity": "0.1", "background-repeat": "no-repeat", "background-image": "url(" + encImg [ids].src + ")"}
    $j("div#bannerContainerCover").css(cssObj);
    
    if(encTransitionType == "slide")
    {     
        $j("div#bannerContainerCover").css("background-position", "-50px 0");                
        $j("div#bannerContainerCover").stop().animate({backgroundPosition:"(0 0)", opacity:"1"}, {duration:600});
    }    
    else if(encTransitionType == "slideDown")
    {      
        $j("div#bannerContainerCover").css("background-position", "0 -50px");                
        $j("div#bannerContainerCover").stop().animate({backgroundPosition:"(0 0)", opacity:"1"}, {duration:600});
    }
    else
    {      
        $j("div#bannerContainerCover").stop().animate({opacity:"1"}, {duration:500});
    }
}

encAutorotate = function(bannerID, encImg, encNumOfImages)
{
    if(encCurrentBanner > -1)
    {
        bannerID = encCurrentBanner;
        encCurrentBanner = -1;
    }
    
    if(!encBusy)
    {
        if(bannerID < (encNumOfImages-1) && bannerID >= 0)
            bannerID++;
        else
            bannerID =0;
            
        encTransformBanner(bannerID,encImg);
    }

    var tmpBannerTimer = setTimeout("encAutorotate(" + bannerID + "," + encImg + "," + encNumOfImages + ")", encAutoRotateTimeout);
}

encPreloadImages = function(images, size)
{
    var tmpArray = new Array(size);
    for(i=0; i<size; i++)
    {
        tmpArray[i]      = new Image;
        tmpArray[i].src  = images[i];
    }
    return tmpArray;
}