//-----------------------------------------
//	Slider gallery
//-----------------------------------------
var self = 0;

function sliderGallery()
{
	// class variables here
	this.currentImgId = 1;
	this.nextImgId = 1;
	this.imagesInGallery = 0;
	this.timeoutId = null;
	
	this.nextImgStartPosPx = 662;
	this.sliderDelay = 5000;
	this.sliderDuration = 300;
	this.wholeGalleryContainerId = 'mainSliderGallery';
	this.containerDivClassName = 'sgImages';
	this.dotContainerClassName = 'sgPointers';
	this.galleryImgIdPrefix = 'img';
	
	self = this;
}


sliderGallery.prototype.init = function()
{
	$('.'+this.containerDivClassName+' img').css({'position':'absolute', 'left':'0px', 'z-index':'0', 'display':'none'});
	$('.'+this.containerDivClassName+' #'+this.galleryImgIdPrefix+this.currentImgId).css({'display':''});
	
	this.getImgCountInGallery(this.containerDivClassName);
    
	// slide if more than one image
	if(1 < this.imagesInGallery)
	{
		this.getNextImgId();
		this.restZindexes();
		this.startPosNextImg();
		this.slideNextDelay();
		
		// Hover event on mouse over gallery
		$('.'+this.containerDivClassName).unbind('mouseenter mouseleave')
			.hover(function(){self.slideStop();}, function(){ self.slideNextDelay();});
		
		// add 'dots' for each image.
		var dots = [];
		for (i = 1; i <= this.imagesInGallery; i++)
		{
			dots.push('<div class="outer"><div id="switch'+i+'">'+i+'</div></div>');
		}
        
		$('.'+this.dotContainerClassName, '#'+this.wholeGalleryContainerId).append(dots.join(''));
		$('.'+this.dotContainerClassName+' div').eq(0).addClass('on');
	}
}


sliderGallery.prototype.getImgCountInGallery = function() 
{
	this.imagesInGallery = $("."+this.containerDivClassName+" img").length;
}


sliderGallery.prototype.getNextImgId = function() 
{
	if(0 >= this.imagesInGallery) return false;

	// Go to the first item if we're at the end, otherwise go to the next one.
	this.nextImgId = (this.currentImgId < this.imagesInGallery) ? this.nextImgId + 1 : 1;
}


sliderGallery.prototype.getPrevImgId = function()
{
	if(0 >= this.imagesInGallery) return false

	// Go to the last item if we're at the beginning, otherwise go to the previous one.
	this.nextImgId = (this.currentImgId <= 1) ? this.imagesInGallery : this.currentImgId - 1;
}


sliderGallery.prototype.setCurrentImgId = function()
{
	this.currentImgId = this.nextImgId;
}


sliderGallery.prototype.updateDots = function()
{
	$dots = $('.'+this.dotContainerClassName+' div.outer', '#'+this.wholeGalleryContainerId);
	$dots.removeClass('on');
	$dots.eq(this.nextImgId-1).addClass('on');
}


//--------------------------------------------------------
//	set next image to starting position for slide
//--------------------------------------------------------

sliderGallery.prototype.startPosNextImg = function()
{
	// move the next image in to start position
	$('#'+this.galleryImgIdPrefix+this.nextImgId).css({'left':self.nextImgStartPosPx+'px', 'z-index':'2', 'display':''});
}


//---------------------------------------------------------
// set z-index for current Image to 1, the rest to 0
//---------------------------------------------------------

sliderGallery.prototype.restZindexes = function()
{
	for(var i = 0; i < this.imagesInGallery; i++)
	{
		var zIndex = 0;
		var galleryImgIdPrefixLength = this.galleryImgIdPrefix.length;

		// get the Id of the gallery image with prefix removed
		loopId = $('.'+this.containerDivClassName+' img')[i].id.substr(galleryImgIdPrefixLength);

		if(loopId == this.currentImgId)
		{
			zIndex = 1;
		}
		$('#'+this.galleryImgIdPrefix+loopId).css('z-index', zIndex);
	}
}

sliderGallery.prototype.slideNextDelay = function()
{
	// stop the queue of timeouts building up on mousehover out
	this.slideStop();
	
	this.timeoutId = setTimeout(function(){
		self.animate();
		}, this.sliderDelay);
}

sliderGallery.prototype.slideNextNow  = function()
{
	this.animate();
}

sliderGallery.prototype.slideStop = function()
{
	if(this.timeoutId)
	{
		clearTimeout(this.timeoutId);
		this.timeoutId = null;
	}
}

sliderGallery.prototype.nextImage= function()
{
	this.slideStop();
	this.slideNextNow();
}


sliderGallery.prototype.previousImage= function()
{
	this.slideStop();
	this.getPrevImgId();
	this.startPosNextImg();
	this.slideNextNow();
}

sliderGallery.prototype.animate= function()
{
	this.updateDots();
	
	$('.'+this.containerDivClassName+' #'+this.galleryImgIdPrefix+this.nextImgId).stop(true, true).animate({left:0}, {
		duration:self.sliderDuration,
		queue:true,
		step:function(now, fx){
			//clearTimeout(sliderGallery.timeoutId);
			//sliderGallery.timeoutId = 0;
		},
		complete:function(){
			self.setCurrentImgId();
			self.getNextImgId();
			self.restZindexes();
			self.startPosNextImg();
			self.slideNextDelay();
		}
	});
}

sliderGallery.prototype.switchImage = function(switchContainerClassName, switchElementId)
{
    // attach event
    $('.'+switchContainerClassName).bind('click', function(e) {

        // stop slider 
        self.slideStop();

        var elementIdLength = switchElementId.length;
        // Need to turn it from string to integer 
        var getImgId = parseInt(e.target.id.substr(elementIdLength));
        
        if(self.currentImgId != getImgId)
        {
            // set next image id. 
            self.nextImgId = getImgId;

            self.startPosNextImg();

            // animate in the image
            self.slideNextNow();
        }
    });
}