/**
 * BannerGallery - jQuery plugin
 * By Alchemy Plus 
 * http://www.alchemyplus.com
**/


(function($) {
    var opts = new Array;
    
    $.fn.BannerGallery = function(options){
    
    InitBannerGallery = function (el) 
    {
        opts[el.id] = $.extend({}, $.fn.BannerGallery.defaults, options);
        //
        $(el).width(opts[el.id].width);
        $(el).height(opts[el.id].height);
        $(el).css({"overflow": "hidden"});
        var container = $("<div>").appendTo($(el));
        $(container).css({"width": "50000px", "height": "100%"});
        opts[el.imageContainer] = container;
        //
        var path = opts[el.id].path;
        $.get("/GetGalleryXml.aspx", {path: path}, function(data) { BannerGalleryXml_LoadComplete(el, data); }, "xml");
    }
    
    BannerGalleryXml_LoadComplete = function (el, data) 
    {
        var container = opts[el.imageContainer];
        $(data).find("image").each(function()
        {
            var src = $(this).attr("src");
            $(container).append('<img src="' + src + '" />');
        });
        //
        if(opts[el.id].bannerIndex < 0 || opts[el.id].bannerIndex > $(container).children("img").length - 1)
            opts[el.id].bannerIndex = 0
        //
        //$(container).children("img").css({"position": "absolute", "top": 0, "left": 0, "border-right": "solid 2px #000000"}).load(function() { BannerImage_LoadComplete(el, $(this)); });
        $(container).children("img").hide().eq(opts[el.id].bannerIndex).show();
        $(container).children("img").css({"border-right": "solid 2px #000000"});
        BannerImagesLoaded(el);
    }
    
    BannerImage_LoadComplete = function(el, img) 
    {
        var container = opts[el.imageContainer];
        opts[el.id].imagesLoaded ++;
        if(opts[el.id].imagesLoaded == $(container).children("img").length) 
        {
            BannerImagesLoaded(el);
        }
    }
    
    SetSlideBannerPositions = function(el) 
    {
        var container = opts[el.imageContainer];
        var currentIndex = opts[el.id].bannerIndex;
        var count = $(container).children("img").length;
        if(currentIndex < 0 || currentIndex >= count) 
        {
            currentIndex = 0;
            opts[el.id].bannerIndex = currentIndex;
        }
        var left = 0;
        for(var i = 1; i < count; i++) 
        {
            var previousImage = $(container).children("img").eq(i - 1);
            left += previousImage.outerWidth();
            $(container).children("img").eq(i).css({"left": left});
        }
        /*//
        $(container).children("img").eq(currentIndex).css({"left": 0});
        //
        var left = 0;
        for(var i = currentIndex + 1; i < count; i++) 
        {
            var previousImage = $(container).children("img").eq(i - 1);
            left += previousImage.outerWidth();
            $(container).children("img").eq(i).css({"left": left});
        }
        left = 0;
        for(var i = 0; i < currentIndex; i++) 
        {
            var currentImage = $(container).children("img").eq(i);
            left -= currentImage.outerWidth();
            currentImage.css({"left": left});
        }*/
    }
    
    AnimateBannerPositions = function(el) 
    {
        var container = opts[el.imageContainer];
        var currentIndex = opts[el.id].bannerIndex;
        var count = $(container).children("img").length;
        if(currentIndex < 0 || currentIndex >= count) 
        {
            currentIndex = 0;
            opts[el.id].bannerIndex = currentIndex;
        }
        //
        var left = GetImageLeft(el, currentIndex);
        
        $(container).stop().animate({"margin-left":  left}, opts[el.id].transitionDuration, function() { BannerDisplayAnimation_Complete(el); });
        //$(container).effect("slide", {"direction": "right", "distance": 100, "mode": "hide"}, opts[el.id].transitionDuration, function() { BannerDisplayAnimation_Complete(el); });
        /*
        var direction = 1;
        var parentLeft = $(container).css("left");
        if(left < 0) 
            direction = 1;
        else 
            direction = -1;
        visibleImage.animate({"left": 0}, opts[el.id].transitionDuration, function() { BannerDisplayAnimation_Complete(el); });
        //
        left = 0;
        for(var i = currentIndex + 1; i < count; i++) 
        {
            var previousImage = $(container).children("img").eq(i - 1);
            left += previousImage.outerWidth();
            $(container).children("img").eq(i).animate({"left": left}, opts[el.id].transitionDuration);
        }
        left = 0;
        for(var i = currentIndex - 1; i > -1; i--) 
        {
            var currentImage = $(container).children("img").eq(i);
            left -= currentImage.outerWidth();
            currentImage.animate({"left": left}, opts[el.id].transitionDuration);
        }
        */
    }
    
    GetImageLeft = function(el, index) 
    {
        var container = opts[el.imageContainer];
        var left;
        var visibleImage = $(container).children("img").eq(index);
        left = visibleImage.position().left;
        var margin = parseInt($(container).css("margin-left"));
        if(isNaN(margin))
            margin = 0;
        margin -= left;
        return margin;
    }
    
    BannerImagesLoaded = function(el) 
    {
        var container = opts[el.imageContainer];
        switch(opts[el.id].transitionType)
        {
            case "slide":
                //SetSlideBannerPositions(el);
                $(container).children("img").show();
                var currentIndex = opts[el.id].bannerIndex;
                $(container).css({"margin-left": GetImageLeft(el, currentIndex)})
                break;
        }
        if($(container).children("img").length > 1)
            CreateNavigationControls(el);
        //
        if($(container).children("img") > 1 && opts[el.id].slideshow == true)
            BeginBannerGallery(el);
    }
    
    CreateNavigationControls = function(el) 
    {
        var container = opts[el.imageContainer];
        var currentIndex = opts[el.id].bannerIndex + 1;
        var nav = '<div class="bannerGalleryNavigation">';
        nav += '<a href="javascript: void(0);" class="bannerNavLeft">&lt;</a>';
        nav += ' <span class="bannerNavCurrent">' + currentIndex + '</span> of <span class="bannerNavTotal">' + $(container).children("img").length + '</span> ';
        nav += '<a href="javascript: void(0);" class="bannerNavRight">&gt;</a>';
        nav += '</div>';
        var isDefaultNavigationContainer = false;
        if(opts[el.id].navigationElement == null) 
        {
            isDefaultNavigationContainer = true;
            opts[el.id].navigationElement = el;
        }
        var nc = $(opts[el.id].navigationElement);
        $(nc).append(nav);
        var elNav = $(nc).children(".bannerGalleryNavigation")
        if(isDefaultNavigationContainer) {
            var top = $(el).height() - 25;
            var left = 0;
            elNav.css({"position": "absolute", "top": top + "px", "left": left + "px"});
        }
        elNav.children(".bannerNavLeft").click(function() { PreviousBanner(el); });
        elNav.children(".bannerNavRight").click(function() { NextBanner(el);  });
        //
        UpdateNavigationControls(el);
    }
    
    PreviousBanner = function(el) 
    {
        var container = opts[el.imageContainer];
        if(opts[el.id].isAnimating == true)
            return;
        //
        var previousIndex = opts[el.id].bannerIndex;
        var count = $(container).children("img").length;
        clearTimeout(opts[el.id].timeoutID);
        //
        currentIndex = previousIndex - 1;
        if(currentIndex < 0)
            currentIndex = count - 1;
        opts[el.id].bannerIndex = currentIndex;
        //
        UpdateNavigationControls(el);
        //
        opts[el.id].isAnimating = true;
        switch(opts[el.id].transitionType)
        {
            case "slide":
                // slide
                AnimateBannerPositions(el);
                break;
            case "fade":
                // fade
                //$(container).children("img").eq(previousIndex).fadeOut(opts[el.id].transitionDuration);
                //$(container).children("img").eq(currentIndex).fadeIn(opts[el.id].transitionDuration, function() { BannerFadeIn_Complete(el); });
                break;
        }
    }
    
    NextBanner = function(el) 
    {
        var container = opts[el.imageContainer];
        if(opts[el.id].isAnimating == true)
            return;
        //
        var previousIndex = opts[el.id].bannerIndex;
        var count = $(container).children("img").length;
        clearTimeout(opts[el.id].timeoutID);
        //
        currentIndex = previousIndex + 1;
        if(currentIndex >= count)
            currentIndex = 0;
        opts[el.id].bannerIndex = currentIndex;
        //
        UpdateNavigationControls(el);
        //
        opts[el.id].isAnimating = true;
        switch(opts[el.id].transitionType)
        {
            case "slide":
                // slide
                AnimateBannerPositions(el);
                break;
            case "fade":
                // fade
                //$(container).children("img").eq(previousIndex).fadeOut(opts[el.id].transitionDuration);
                //$(container).children("img").eq(currentIndex).fadeIn(opts[el.id].transitionDuration, function() { BannerDisplayAnimation_Complete(el); });
                break;
        }
    }
    
    UpdateNavigationControls = function(el) 
    {
        var container = opts[el.imageContainer];
        var nc = opts[el.id].navigationElement;
        var currentIndex = opts[el.id].bannerIndex;
        var count = $(container).children("img").length;
        $(nc).find(".bannerNavCurrent").text(currentIndex + 1);
        $(nc).find(".bannerNavTotal").text(count);
    }
    
    BeginBannerGallery = function (el) 
    {
        var container = opts[el.imageContainer];
        var images = $(container).children("img");
        var count = images.length;
        switch(opts[el.id].transitionType)
        {
            case "slide":
                // slide
                images.show();
                break;
            case "fade":
                images.hide();
                var index = opts[el.id].bannerIndex;
                if(index < 0 || index >= count)
                    index = Math.floor(Math.random() * count);
                opts[el.id].bannerIndex = index;
                images.eq(index).show();
                break;
        }
        opts[el.id].timeoutID = setTimeout(function() { NextTransitionBannerGallery(el); }, opts[el.id].duration);
        //
        UpdateNavigationControls(el);
    }
    
    NextTransitionBannerGallery = function (el) {
        NextBanner(el);
    }
    
    BannerDisplayAnimation_Complete = function(el) 
    {
        opts[el.id].isAnimating = false;
        if(opts[el.id].slideshow)
            opts[el.id].timeoutID = setTimeout(function() { NextTransitionBannerGallery(el); }, opts[el.id].duration);
    }

	this.each (
		function(){ InitBannerGallery(this); }
	);
		
};
	
	// default values
	$.fn.BannerGallery.defaults = {
	    width: 1600,
	    height: 440,
		duration: 5000, // delay between transition end and next begin
		transitionType: "slide", // "slide" or "fade"
        transitionDuration: 500, // duration of transition
        timeoutID: -1, // id returned from setTimeout 
        path: "/home/images/", // directory containing images
        slideshow: false,
        bannerIndex: 0, // start image, -1 = random
        navigationElement: null, // element to append navigation controls
        isAnimating: false, // indicates if effect is taking place
        imagesLoaded: 0 // number of images loaded
	};
	
})(jQuery);