/**
*	The class of the image slider. 
*
*	@version 1.00
*	@example:
*	oClassSlider = new ClassSlider();
*	oClassSlider.slider_set_images('/content_images/portfolio/items/resized/2/bigmac3.jpg');
*	oClassSlider.slider_set_images('/content_images/portfolio/items/resized/2/wallpaper.jpg');
*	oClassSlider.slider_set_id('portfolio_slider');
*	oClassSlider.slider_set_effect('horizontal');
*	oClassSlider.slider_set_size(200, 555);
*	oClassSlider.slider_set_step(200);
*	oClassSlider.slider_set_menu(true);
*	oClassSlider.slider_set_image_spacing(5);
*	oClassSlider.slider_set_menu_src('/content_images/portfolio/menu_active.png', '/content_images/portfolio/menu_inactive.png');
*	oClassSlider.slider_load();
*/
function ClassSlider() {
	this.m_aSliderImages 			= new Array();
	this.m_aSliderImagesEvents 		= new Array();
	this.m_sSliderID 				= 'sliders';
	this.m_sSliderEffect 			= 'horizontal'; // horizontal, vertical, fade, instant
	
	this.m_bSliderMenu				= true;
	this.m_bSliderActive			= false;
	
	this.m_iImageActive				= 0;
	this.m_aImagePreload			= new Array();
	this.m_aImageSpacing			= 0;
	
	// Slide options.
	this.m_iSliderHeight			= 200;	// pixels
	this.m_iSliderWidth				= 550;	// pixels
	this.m_iSliderScroll			= this.m_iSliderWidth;	// pixels
	this.m_iSliderSpeed				= 20;	// milliseconds
	this.m_iSliderStep				= 40;	// pixels
	this.m_iSliderStepDecrease		= 85;	// %
	this.m_iSliderStepDecreaseAt	= 50;	// %
	this.m_iSliderPosX				= 0;	// pixels
	this.m_iSliderPosY				= 0;	// pixels
	this.m_iSliderStepCounter 		= 1;
	this.m_iSliderSlides 			= 1;
	
	// Content image container.
	this.m_oSliderContent			= null;
	
	// Image objects.
	this.m_oSliderObjectMoving		= null;
	
	// Menu source images.
	this.m_sSliderMenuActiveSrc		= '';
	this.m_sSliderMenuInactiveSrc	= '';
}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

/**
*	Set the images (source) used for the slider.
*
*	@param string a_sImageSrc;
*/
function slider_set_images(a_sImageSrc) {
	if (a_sImageSrc) {
		this.m_aSliderImages.push(a_sImageSrc);
		
		// Preload the images.
		this.m_aImagePreload[this.m_aSliderImages.length-1]		= new Image()
		this.m_aImagePreload[this.m_aSliderImages.length-1].src	= a_sImageSrc
	}
}

/**
*	Set the images event used for in slider.
*
*	@param string a_sEventType;
*	@param string a_sEvent;
*/
function slider_set_images_event(a_sEventType, a_sEvent) {
	if (!this.m_aSliderImagesEvents[a_sEventType]) {
		this.m_aSliderImagesEvents[a_sEventType] = new Array();
	}
	this.m_aSliderImagesEvents[a_sEventType][this.m_aSliderImages.length-1] = a_sEvent;
//	this.m_aSliderImagesEvents[a_sEventType].push(a_sEvent);
	
}

/**
*	Set the image content ID..
*	
*	@param string a_sID
*/
function slider_set_id(a_sID) {
	this.m_sSliderID = a_sID;
}

/**
*	Set the effect type to be used.
*	Currently only the slide_left is supported.
*	
*	@examples: slide_left, slide_right, slide_up, slide_down, slide_fade.
*	@param string a_sEffect
*/
function slider_set_effect(a_sEffect) {
	this.m_sSliderEffect = a_sEffect;
}

/**
*	Set the step size.
*	@param int a_bSet
*/
function slider_set_step(a_iSet) {
	this.m_iSliderStep = a_iSet;
}

/**
*	Set the slider content height and width.
*	
*	@param int a_iHeight
*	@param int a_iWidth
*/
function slider_set_size(a_iHeight, a_iWidth) {
	this.m_iSliderHeight	= a_iHeight;
	this.m_iSliderWidth		= a_iWidth;
}

/**
*	Set the menu active or inactive.
*	@param boolean a_bSet
*/
function slider_set_menu(a_bSet) {
	this.m_bSliderMenu = a_bSet;
}

/**
*	Set the menu link source images.
*	@param string a_sActive
*	@param string a_sInactive
*/
function slider_set_menu_src(a_sActive, a_sInactive) {
	this.m_sSliderMenuActiveSrc		= a_sActive;
	this.m_sSliderMenuInactiveSrc	= a_sInactive;
}

/**
*	Set the space between images.
*	@param int a_bSet
*/
function slider_set_image_spacing(a_iSet) {
	this.m_aImageSpacing = a_iSet;
}

/**
*	This function needs to be called to load the slider content element and will set the image in a row.
*/
function slider_load() {
	this.m_oSliderContent = document.getElementById(this.m_sSliderID);
	
	this.m_oSliderContent.innerHTML = '';
	
	this.m_iSliderScroll += this.m_aImageSpacing*this.m_aSliderImages.length;
	
	// Set the images in the content according to the slider effect set.
	switch (this.m_sSliderEffect) {
		case 'horizontal':
		case 'instant':
			for (i=0; i<this.m_aSliderImages.length; i++) {
				if (i) {
					this.m_oSliderContent.innerHTML += '<img id="'+this.m_sSliderID+'_'+i+'" style="position: absolute; top: 0px; left: '+(i*(this.m_iSliderWidth+this.m_aImageSpacing))+'px;" src="'+this.m_aSliderImages[i]+'" width="'+this.m_iSliderWidth+'" height="'+this.m_iSliderHeight+'" />'
				} else {
					this.m_oSliderContent.innerHTML += '<img id="'+this.m_sSliderID+'_'+i+'" style="position: absolute; top: 0px; left: '+(i*this.m_iSliderWidth)+'px;" src="'+this.m_aSliderImages[i]+'" width="'+this.m_iSliderWidth+'" height="'+this.m_iSliderHeight+'" />'
				}
			}
			return;
		default:
			for (i=0; i<this.m_aSliderImages.length; i++) {
				if (i) {
					this.m_oSliderContent.innerHTML += '<img id="'+this.m_sSliderID+'_'+i+'" style="position: absolute; top: 0px; left: '+(i*(this.m_iSliderWidth+this.m_aImageSpacing))+'px;" src="'+this.m_aSliderImages[i]+'" width="'+this.m_iSliderWidth+'" height="'+this.m_iSliderHeight+'" />'
				} else {
					this.m_oSliderContent.innerHTML += '<img id="'+this.m_sSliderID+'_'+i+'" style="position: absolute; top: 0px; left: '+(i*this.m_iSliderWidth)+'px;" src="'+this.m_aSliderImages[i]+'" width="'+this.m_iSliderWidth+'" height="'+this.m_iSliderHeight+'" />'
				}
			}
			return;
	}
}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

/**
*	This function needs to be called for the slider to change the image. 
*	The user can not call the slider effect again durring the sliding process.
*	The given param has to be the an index value of the image source array.
*
*	@param int a_iImageID
*/
function slider_slide (a_iImageID) {
	// Check if the image id exits. Else return.
	if (a_iImageID=='next') {
		if (this.m_aSliderImages[this.m_iImageActive+1]) {
			a_iImageID = this.m_iImageActive+1;
		} else {
			return;
		}
	} else if (a_iImageID=='previous') {
		if (this.m_aSliderImages[this.m_iImageActive-1]) {
			a_iImageID = this.m_iImageActive-1;
		} else {
			return;
		}
	} else if (!this.m_aSliderImages[a_iImageID] && a_iImageID) {
		return;
	}
		
	// If the slider is still active the effect can not be called again.
	if (!this.m_bSliderActive) {
		if (a_iImageID != this.m_iImageActive) {
			
			// Set the menu link as active and the current active link as inactive.
			if (this.m_bSliderMenu) {
				oMenuActive			= document.getElementById(this.m_sSliderID+'_menu_'+this.m_iImageActive);
				oMenuActive.src		= this.m_sSliderMenuInactiveSrc;
				oMenuActiveNew		= document.getElementById(this.m_sSliderID+'_menu_'+a_iImageID);
				oMenuActiveNew.src	= this.m_sSliderMenuActiveSrc;
			}
			
			// Set the slider as currently active. Will be set to inactive once the moving effect is completed.
			this.m_bSliderActive 	= true;

			// Check if the image movement has to be from left to the right or the other way around.
			if (a_iImageID > this.m_iImageActive) {
				this.m_iSliderSlides = (a_iImageID-this.m_iImageActive);
				this.m_iSliderScroll = (this.m_iSliderSlides)*(this.m_iSliderWidth+(this.m_aImageSpacing*(this.m_iSliderSlides)));
			} else if (a_iImageID < this.m_iImageActive) {
				this.m_iSliderSlides = (this.m_iImageActive-a_iImageID);
				this.m_iSliderScroll = (this.m_iSliderSlides)*(this.m_iSliderWidth+(this.m_aImageSpacing*(this.m_iSliderSlides)));
			}
			
			// Set the images in the content according to the slider effect set.
			switch (this.m_sSliderEffect) {
				case 'horizontal':
					// Check if the image movement has to be from left to the right or the other way around.
					if (a_iImageID > this.m_iImageActive) {
						this.slider_slide_horizontal (a_iImageID,'left');
					} else if (a_iImageID < this.m_iImageActive) {
						this.slider_slide_horizontal (a_iImageID,'right');
					}
					break;
				case 'instant':
					// Check if the image movement has to be from left to the right or the other way around.
					if (a_iImageID > this.m_iImageActive) {
						this.slider_slide_instant (a_iImageID, 'left');
					} else if (a_iImageID < this.m_iImageActive) {
						this.slider_slide_instant (a_iImageID, 'right');
					}
					break;
				default:
					break;
			}
		}
	}
}


////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//	horizontal
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

/**
*	This function will move the images from right to the left.
*
*	@param int a_iImageID
*/
function slider_slide_horizontal (a_iImageID, a_sDirection) {

	if (this.m_iSliderPosX < this.m_iSliderScroll) {
		iStep 	= this.m_iSliderStep; //this.m_iSliderStepFinish
		iXLeft	= this.m_iSliderScroll-this.m_iSliderPosX;
		iSlides	= a_iImageID-this.m_iImageActive;
		
		if (iXLeft < ((this.m_iSliderWidth+(this.m_aImageSpacing*this.m_iSliderSlides))*(this.m_iSliderStepDecreaseAt/100))) {
			// Decrease the step amount by multiplying the step amount with a percentual decrease value.
			for (i=0; i<this.m_iSliderStepCounter; i++) {
				iStep = Math.round(iStep*(this.m_iSliderStepDecrease/100));
			}
			
			this.m_iSliderStepCounter++;
			
			// Allways add at least 1 px so that the slider keeps moving.
			iStep += 1;
		}
		
		// If the slider remaining sliding pixels is smaller than the step than the step will be the remaining pixels left.
		if ((this.m_iSliderScroll - this.m_iSliderPosX) < iStep) {
			iStep = (this.m_iSliderScroll - this.m_iSliderPosX);
		}
		
		// Set the new pos X by adding the step size.
		this.m_iSliderPosX += iStep;
		
		for (i=0; i<(this.m_aSliderImages.length); i++) {
			this.m_oSliderObjectMoving	= document.getElementById(this.m_sSliderID+'_'+i);
			
			if (this.m_oSliderObjectMoving) {
				// Set the object position.
				if (a_sDirection=='left') {
					this.m_oSliderObjectMoving.style.left 	= ((iStep*-1)+parseInt(this.m_oSliderObjectMoving.style.left))+'px';
				} else if (a_sDirection=='right') {
					this.m_oSliderObjectMoving.style.left 	= ((iStep)+parseInt(this.m_oSliderObjectMoving.style.left))+'px';
				}
			}
		}
		
		// Call this function again to keep moving the images.
		// Instance of this class.
		var oClassObject = this;
		var oTimerSlideLeft = setTimeout(function(){oClassObject.slider_slide_horizontal(a_iImageID,a_sDirection);},this.m_iSliderSpeed);
	} else {
		// Reset the variable parameters.
		this.m_iImageActive 		= a_iImageID;
		this.m_iSliderStepCounter 	= 1;
		this.m_iSliderPosX 			= 0;
		this.m_bSliderActive 		= false;
		clearTimeout(oTimerSlideLeft);
	}
}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//	instant
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

/**
*	This function will move the images from left to the right without effect.
*
*	@param int a_iImageID
*/
function slider_slide_instant (a_iImageID, a_sDirection) {
	
	if (this.m_iSliderPosX < this.m_iSliderScroll) {
		iStep 	= this.m_iSliderScroll;
		
		// If the slider remaining sliding pixels is smaller than the step than the step will be the remaining pixels left.
		if ((this.m_iSliderScroll - this.m_iSliderPosX) < iStep) {
			iStep = (this.m_iSliderScroll - this.m_iSliderPosX);
		}
		
		// Set the new pos X by adding the step size.
		this.m_iSliderPosX += iStep;
				
		for (i=0; i<this.m_aSliderImages.length; i++) {
			this.m_oSliderObjectMoving	= document.getElementById(this.m_sSliderID+'_'+i);
			
			if (this.m_oSliderObjectMoving) {
				// Set the object position.
				if (a_sDirection=='left') {
					this.m_oSliderObjectMoving.style.left 	= ((iStep*-1)+parseInt(this.m_oSliderObjectMoving.style.left))+'px';
				} else if (a_sDirection=='right') {
					this.m_oSliderObjectMoving.style.left 	= ((iStep)+parseInt(this.m_oSliderObjectMoving.style.left))+'px';
				}
			}
		}

		// Call this function again to keep moving the images.
		// Instance of this class.
		var oClassObject = this;
		var oTimerSlideInstant = setTimeout(function(){oClassObject.slider_slide_instant(a_iImageID,a_sDirection);},this.m_iSliderSpeed);
	} else {
		// Reset the variable parameters.
		this.m_iImageActive 		= a_iImageID;
		this.m_iSliderStepCounter 	= 1;
		this.m_iSliderPosX 			= 0;
		this.m_bSliderActive 		= false;
		clearTimeout(oTimerSlideInstant);
	}
}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// Slider config functions.
ClassSlider.prototype.slider_set_images			= slider_set_images;
ClassSlider.prototype.slider_set_images_event	= slider_set_images_event;
ClassSlider.prototype.slider_set_image_spacing	= slider_set_image_spacing;
ClassSlider.prototype.slider_set_id				= slider_set_id;
ClassSlider.prototype.slider_set_effect			= slider_set_effect;
ClassSlider.prototype.slider_set_step			= slider_set_step;
ClassSlider.prototype.slider_set_size			= slider_set_size;
ClassSlider.prototype.slider_set_menu			= slider_set_menu;
ClassSlider.prototype.slider_set_menu_src		= slider_set_menu_src;
ClassSlider.prototype.slider_load				= slider_load;

// Slider effect functions.
ClassSlider.prototype.slider_slide				= slider_slide;
ClassSlider.prototype.slider_slide_instant		= slider_slide_instant;
ClassSlider.prototype.slider_slide_horizontal	= slider_slide_horizontal;