﻿/**
 * SiteBackgroundGallery - jQuery plugin
 * By Alchemy Plus 
 * http://www.alchemyplus.com
 * 01/12/2011
**/


(function($) {
    var opts = new Array;
    
    $.fn.SiteBackgroundGallery = function(options){
    
    InitSiteBackgroundGallery = function (el) 
    {
        opts[el.id] = $.extend({}, $.fn.SiteBackgroundGallery.defaults, options);
        //
        opts[el.imageContainer] = $(el);
        //
        if(opts[el.id].previousButton != null) {
            $(opts[el.id].previousButton).click(function() {
                PreviousBanner(el);
            });
        }
        
        if(opts[el.id].nextButton != null) {
            $(opts[el.id].nextButton).click(function() {
                NextBanner(el);
            });
        }
        //
        var path = opts[el.id].path;
        $.get("/GetGalleryXml.aspx", {path: path}, function(data) { SiteBackgroundGalleryXml_LoadComplete(el, data); }, "xml");
    }
    
    SiteBackgroundGalleryXml_LoadComplete = function (el, data) 
    {
        var container = opts[el.imageContainer];
        $(data).find("image").each(function()
        {
            var src = $(this).attr("src");
            $(container).append('<img src="' + src + '" class="pageBackgroundImage" />');
        });
        //
        var index = opts[el.id].galleryIndex;
        var count = GetImageCount(el);
        if(index < 0 || index >= count) 
        {
            index = Math.floor(Math.random() * count);
            opts[el.id].galleryIndex = index;
        }
        GetImages(el).hide().eq(index).show();
        //
        if(GetImageCount(el) > 1 && opts[el.id].slideshow == true)
            BeginGallerySlideshow(el);
    }
    
    PreviousBanner = function(el) 
    {
        var container = opts[el.imageContainer];
        if(opts[el.id].isAnimating == true)
            return;
        //
        var previousIndex = opts[el.id].galleryIndex;
        var count = GetImageCount(el);
        clearTimeout(opts[el.id].timeoutID);
        //
        currentIndex = previousIndex - 1;
        if(currentIndex < 0)
            currentIndex = count - 1;
        opts[el.id].galleryIndex = currentIndex;
        //
        opts[el.id].isAnimating = true;
        GetImages(el).stop();
        switch(opts[el.id].transitionType)
        {
            case "switch":
                GalleryAnimation_Complete(el);
                break;
            case "slide":
                // slide
                var left = -1 * GetImageAt(el, currentIndex).width();
                GetImageAt(el, currentIndex).css({"margin-left": left}).show();
                GetImageAt(el, currentIndex).animate({"margin-left":  0}, opts[el.id].transitionDuration, function() { GalleryAnimation_Complete(el); });
                GetImageAt(el, previousIndex).animate({"margin-left":  GetImageAt(el, previousIndex).width()}, opts[el.id].transitionDuration);
                break;
            case "fade":
                // fade
                GetImageAt(el, previousIndex).fadeOut(opts[el.id].transitionDuration);
                GetImageAt(el, currentIndex).fadeIn(opts[el.id].transitionDuration, function() { GalleryAnimation_Complete(el); });
                break;
        }
    }
    
    NextBanner = function(el) 
    {
        var container = opts[el.imageContainer];
        if(opts[el.id].isAnimating == true)
            return;
        //
        var previousIndex = opts[el.id].galleryIndex;
        var count = GetImageCount(el);
        clearTimeout(opts[el.id].timeoutID);
        //
        currentIndex = previousIndex + 1;
        if(currentIndex >= count)
            currentIndex = 0;
        opts[el.id].galleryIndex = currentIndex;
        //
        opts[el.id].isAnimating = true;
        GetImages(el).stop();
        switch(opts[el.id].transitionType)
        {
            case "switch":
                GalleryAnimation_Complete(el);
                break;
            case "slide":
                // slide
                var left = $(container).width();
                GetImageAt(el, currentIndex).css({"margin-left": left}).show();
                GetImageAt(el, currentIndex).animate({"margin-left":  0}, opts[el.id].transitionDuration, function() { GalleryAnimation_Complete(el); });
                GetImageAt(el, previousIndex).animate({"margin-left":  -1 * GetImageAt(el, previousIndex).width()}, opts[el.id].transitionDuration);
                break;
            case "fade":
                // fade
                GetImageAt(el, previousIndex).fadeOut(opts[el.id].transitionDuration);
                GetImageAt(el, currentIndex).fadeIn(opts[el.id].transitionDuration, function() { GalleryAnimation_Complete(el); });
                break;
        }
    }
    
    BeginGallerySlideshow = function (el) 
    {
        var container = opts[el.imageContainer];
        opts[el.id].timeoutID = setTimeout(function() { NextGalleryTransition(el); }, opts[el.id].duration);
    }
    
    NextGalleryTransition = function (el) {
        NextBanner(el);
    }
    
    GalleryAnimation_Complete = function(el) 
    {
        switch(opts[el.id].transitionType)
        {
            case "switch":
            case "fade":
            case "slide":
                GetImages(el).hide().eq(opts[el.id].galleryIndex).show();
                break;
        }
        opts[el.id].isAnimating = false;
        if(opts[el.id].slideshow)
            opts[el.id].timeoutID = setTimeout(function() { NextGalleryTransition(el); }, opts[el.id].duration);
    }
    
    GetImages = function(el) 
    {
        return $(opts[el.imageContainer]).children(".pageBackgroundImage");
    }
    
    GetImageAt = function(el, index) 
    {
        return GetImages(el).eq(index);
    }
    
    GetImageCount = function(el)
    {
        return GetImages(el).length;
    }

	this.each (
		function(){ InitSiteBackgroundGallery(this); }
	);
		
};
	
	// default values
	$.fn.SiteBackgroundGallery.defaults = {
		duration: 5000, // delay between transition end and next begin
		transitionType: "switch", // switch, slide, fade
        transitionDuration: 1000, // duration of transition
        timeoutID: -1, // id returned from setTimeout 
        path: "/images/", // directory containing images
        slideshow: false,
        galleryIndex: 0, // start image, -1 = random
        isAnimating: false // indicates if effect is taking place
	};
	
})(jQuery);
