/*
 *  slt.gallery.js
 *
 *
 *
 */


// This sets if the gallery is set to "play" or "pause" by default
var playing = true;

// This is the interval between moving between gallery pages
var timing = 3000; // 30 seconds

var imageOn    =  'theme/styles/img/gallery-on.jpg'; //'img/myGallery_active.gif';
var imageOff   = 'theme/styles/img/gallery-off.jpg'; //'img/myGallery_off.gif';
var imagePlay  = 'theme/styles/img/play.gif'; //'img/myGallery_play.gif';
var imagePause = 'theme/styles/img/pause.gif'; //'img/myGallery_pause.gif';
//var prev = 'theme/styles/img/previous.gif';
//var next = 'theme/styles/img/next.gif';

$(document).ready(function () {

    var runGallery = function () {
        
        var galleryData = $(this).children('.imageElement');
        var galleryLength = galleryData.hide().size();
        var currentPage = 0;
        var currentTimeout = null;
        var animating = false;

        var nextPage = function () { showGallery(1+parseInt(currentPage))};
    
        // setup the controls
        var galleryControls = $('<div class="galleryControls"></div>');
        var galleryImage    = $('<div class="galleryImage"></div>');
        var galleryText    = $('<div class="galleryText"></div>');
        
       // var prev = $('<a href="#" class="control galleryNext"><img src="' + prev + '"></a>').click(
			//function() {showGallery(currentPage-1); 
			//return false;
			//});
       // var next = $('<a href="#" class="control galleryPrev">&gt;</a>').click(function() {showGallery(currentPage+1); return false;});
	    var prev = $('<a href="#" class="control prev"><img src="theme/styles/img/previous.gif" alt="Previous button"></a>').click(function() {showGallery(currentPage-1); return false;});
		var next = $('<a href="#" class="control next"><img src="theme/styles/img/next.gif" alt="Next button"></a>').click(function() {showGallery(currentPage+1); return false;});
        var play = $('<a href="#" class="control galleryPlay"><img src="' + imagePlay + '"></a>').click(
	    function() {
		currentTimeout = window.setTimeout(nextPage,timing);
		//$(this).hide();
		//galleryControls.children('a.galleryPause').show();
		playing = true;
		showGallery(1+parseInt(currentPage));
	    }
	);
        var pause= $('<a href="#" class="control galleryPause"><img src="' + imagePause + '"></a>').click(
	    function() { 
		if (currentTimeout != null) window.clearTimeout(currentTimeout); 
		//$(this).hide(); 
		//galleryControls.children('a.galleryPlay').show();
		playing = false;
	    }
	);
    
    
        galleryControls.append(prev);
        for (var i = 1; i <= galleryLength; i++) {
            galleryControls.append($('<a href="#" class="control" ref="' + i + '"><img src="' + imageOff + '" class="control' + i + '" ref="' + i + '"></a>').click(
                function() {showGallery(parseInt($(this).attr('ref'))); return false;}));
        }
		//galleryControls.append(prev);
        galleryControls.append(next);
        galleryControls.append(play);
        galleryControls.append(pause);
    
    
        // setup container elements
        $(this).append(galleryImage);
        $(this).append(galleryControls);
        $(this).append(galleryText);
	//if (playing)
        //galleryControls.children('a.galleryPlay').hide();
	//else
        //galleryControls.children('a.galleryPause').hide();
    
        // move between slideshow pages    
        var showGallery = function (page) {
            if (page == currentPage || animating) return;
            
	    
            if (currentTimeout != null)
                window.clearTimeout(currentTimeout);
    
            if (page > galleryLength) page = 1;
            if (page < 1) page = galleryLength;
            data = $(galleryData.get(page-1));
            
            var fadeIn = function () {
                galleryImage.animate({opacity: 1}, 500);
                galleryText.animate({opacity: 1}, 500);
                animating = false;
            
            }
                
            var setContent = function () {
                galleryImage.html(data.children('a.imageLink').clone());
                galleryText.html(data.children().not('a.imageLink').clone());
                currentPage = page;
      
                galleryControls.children('.control').children('img.control' + page).attr({src: imageOn});
            }
            
            var fadeOut = function () {
                animating = true;
                galleryImage.animate({opacity: 0}, 500, setContent);
                galleryText.animate({opacity: 0}, 500, fadeIn);
                galleryControls.children('.control').children('img.control' + currentPage).attr({src: imageOff});
    
            }
            
    //        var width = $('#galleryImage img').width();
    //        galleryControls.width(width);
            if (galleryImage.children().size() == 0)
                setContent();
            else
                fadeOut();
    
    		if (playing)
	            currentTimeout = window.setTimeout(nextPage,timing);
        }
    
        showGallery(1);
    };
    
    $('#myGallery').each ( runGallery );
    $('.myGallery').each ( runGallery );
    

});