// JavaScript Document
function ImageSlideShow(holder_,width,height,arrayImages_, pozXButtonsNavigation, pozYButtonsNavigation)
{
	this.border = null;
	this.divImagesHolder = null;
	this.tableHolder = null;
	this.rowTable = null;
	this.columnHolder = null;
	this.arrayImages = arrayImages_;
	this.holder = holder_;
	this.divImagesHolder = null;
	this.buttonsHolder = null;
	this.image = null;
	this.imageName = 'No image added';
	this.selectedIndexImage = 0;
	this.allButtons = new Array();
	this.selectedButton = null;
	
	this.loadAllImages = function()
	{
		var image;
		
		var arrayStylesButtons = new Array('backImageSlideShow','backImageSlideShow_selected','nextImageSlideShow','nextImageSlideShow_selected',
										   'ul_holder_allButtonsForSlideShow_li','ul_holder_allButtonsForSlideShow_li_selected');
		for(var i=0;i<arrayStylesButtons.length;i++)
		{
			image = document.createElement('div');
			image.setAttribute('class',arrayStylesButtons[i]);
			image.setAttribute('className',arrayStylesButtons[i]);
			image.style.display = 'none';
		}
		
		for(var i=0;i<this.arrayImages.length;i++)
		{
			image = document.createElement('img');
			image.setAttribute('class','imagesInvisible');
			image.setAttribute('className','imagesInvisible');
			image.src = this.arrayImages[i].imageURL;
			document.body.appendChild(image);
		}
	}
	this.addTableHolder = function()
	{
		this.tableHolder = document.createElement('table');
		this.tableHolder.setAttribute('align','center');
		this.rowTable = this.tableHolder.insertRow(this.tableHolder.rows.length);
		this.columnHolder = this.rowTable.insertCell(0);
		this.holder.appendChild(this.tableHolder);
	}
	this.addDivImagesHolder = function()
	{
		if(browser.iCanAddRoundBorders() == true)
		$(".divImagesHolder").corner('5px');
		this.divImagesHolder = document.createElement('div');
		this.divImagesHolder.setAttribute('class','divImagesHolder');
		this.divImagesHolder.setAttribute('className','divImagesHolder');
		this.divImagesHolder.setAttribute('id','divImagesHolder');
		this.divImagesHolder.style.width = width+'px';
		this.divImagesHolder.style.height = height+'px';
		this.columnHolder.appendChild(this.divImagesHolder);
	}
	this.addBorderTo = function()
	{
		if(browser.iCanAddRoundBorders() == true)
		$(".imageSlideShowBorder").corner('5px');
		this.border = document.createElement('div');
		this.border.setAttribute('className','imageSlideShowBorder');
		this.border.setAttribute('class','imageSlideShowBorder');
		var border_width = width-2;
		this.border.style.width = border_width+'px';
		var border_height = height-2;
		this.border.style.height = border_height+'px';
		this.divImagesHolder.appendChild(this.border);
	}
	this.addAllButtons = function()
	{
		this.buttonsHolder = document.createElement('ul');
		this.buttonsHolder.setAttribute('className','ul_holder_allButtonsForSlideShow');
		this.buttonsHolder.setAttribute('class','ul_holder_allButtonsForSlideShow');
		this.btnBack = document.createElement('li');
		this.btnBack.setAttribute('className','backImageSlideShow');
		this.btnBack.setAttribute('class','backImageSlideShow');
		this.btnBack.imagesHolder = this;
		this.btnBack.onmousedown = function()
		{
			this.setAttribute('className','backImageSlideShow_selected');
			this.setAttribute('class','backImageSlideShow_selected');
		}
		this.btnBack.onmouseup = function()
		{
			this.setAttribute('className','backImageSlideShow');
			this.setAttribute('class','backImageSlideShow');
		}
		this.btnBack.onclick = function()
		{
			this.imagesHolder.clearAutoAnimation();
			
			this.imagesHolder.selectedIndexImage--;
			if(this.imagesHolder.selectedIndexImage < 0 )
			{
				this.imagesHolder.selectedIndexImage=this.imagesHolder.arrayImages.length-1;
			}
			this.imagesHolder.selectTheButton(this.imagesHolder.allButtons[this.imagesHolder.selectedIndexImage]);
		}
		this.buttonsHolder.appendChild(this.btnBack);
		
		var buttonImage;
		var indexImage;
		for(var iImg=0;iImg<this.arrayImages.length;iImg++)
		{
			buttonImage = document.createElement('li');
			this.allButtons.push(buttonImage);
			buttonImage.setAttribute('className','ul_holder_allButtonsForSlideShow_li');
			buttonImage.setAttribute('class','ul_holder_allButtonsForSlideShow_li');
			buttonImage.imagesHolder = this;
			buttonImage.indexImage = iImg;
			buttonImage.onmousemove = function()
			{
				  this.setAttribute('className','ul_holder_allButtonsForSlideShow_li_selected');
				  this.setAttribute('class','ul_holder_allButtonsForSlideShow_li_selected');
			}
			buttonImage.onmouseout = function()
			{
				if(this == this.imagesHolder.selectedButton)return;
				  this.setAttribute('className','ul_holder_allButtonsForSlideShow_li');
				  this.setAttribute('class','ul_holder_allButtonsForSlideShow_li');
			}
			buttonImage.onclick = function()
			{
				this.imagesHolder.clearAutoAnimation();
				this.imagesHolder.selectTheButton(this);
			}
			indexImage = iImg+1;
			buttonImage.innerHTML = indexImage+'';
			this.buttonsHolder.appendChild(buttonImage);
		}
		this.btnNext = document.createElement('li');
		this.btnNext.setAttribute('className','nextImageSlideShow');
		this.btnNext.setAttribute('class','nextImageSlideShow');
		this.btnNext.imagesHolder = this;
		this.buttonsHolder.appendChild(this.btnNext);
		this.btnNext.onmousedown = function()
		{
			this.setAttribute('className','nextImageSlideShow_selected');
			this.setAttribute('class','nextImageSlideShow_selected');
		}
		this.btnNext.onmouseup = function()
		{
			this.setAttribute('className','nextImageSlideShow');
			this.setAttribute('class','nextImageSlideShow');
		}
		this.btnNext.onclick = function()
		{
			this.imagesHolder.clearAutoAnimation();
			
			this.imagesHolder.selectedIndexImage++;
			if(this.imagesHolder.selectedIndexImage >= this.imagesHolder.arrayImages.length)
			{
				this.imagesHolder.selectedIndexImage=0;
			}
			this.imagesHolder.selectTheButton(this.imagesHolder.allButtons[this.imagesHolder.selectedIndexImage]);
		}
		this.divImagesHolder.appendChild( this.buttonsHolder );
		var topPozition = height-50;
		var leftPosition = width-(this.arrayImages.length)*45;
		this.buttonsHolder.style.left = pozXButtonsNavigation+'px';
		this.buttonsHolder.style.top = pozYButtonsNavigation+'px';
	}
	this.addImageHolder = function()
	{
		var date = new Date();
		this.imageName = 'image_'+date.getTime();
		$('.imageSlideShowHolder').corner('5px');
		this.image = document.createElement('div');
		this.image.onclick = function()
		{
			alert('A');
		}
		this.image.setAttribute('className','imageSlideShowHolder');
		this.image.setAttribute('class','imageSlideShowHolder');
		this.image.setAttribute('id',this.imageName);
		var widthImage = width-1;
		var heightImage = height-1;
		this.image.style.width = widthImage+'px';
		this.image.style.height = heightImage+'px';
		this.divImagesHolder.appendChild(this.image);
		//$('#'+this.imageName).css({ 'opacity' : 0 });
		/*
		
		$('#'+this.imageName).fadeOut(500, function()
		{
		});
		*/
	}
	this.setIndexSelectedImageTo_0 = function()
	{
		this.selectedIndexImage = 0;
		this.image.style.backgroundImage = 'url('+this.arrayImages[this.selectedIndexImage].imageURL+')';
		this.allButtons[this.selectedIndexImage].setAttribute('class','ul_holder_allButtonsForSlideShow_li_selected');
		this.allButtons[this.selectedIndexImage].setAttribute('className','ul_holder_allButtonsForSlideShow_li_selected');
		this.selectedButton = this.allButtons[this.selectedIndexImage];
	}
	this.selectTheButton = function(button)
	{
		if(this.selectedButton != null)
		{
			this.selectedButton.setAttribute('class','ul_holder_allButtonsForSlideShow_li');
			this.selectedButton.setAttribute('className','ul_holder_allButtonsForSlideShow_li');
		}
		this.selectedButton = button;
		this.selectedButton.setAttribute('class','ul_holder_allButtonsForSlideShow_li_selected');
		this.selectedButton.setAttribute('className','ul_holder_allButtonsForSlideShow_li_selected');
		
		this.selectedIndexImage = button.indexImage;
		this.animateTheImage(this.selectedIndexImage);
	}
	this.animateTheImage = function(index)
	{
		IGHG = this;
		$('#'+this.imageName).fadeOut(500, function()
		{
			IGHG.image.style.backgroundImage = 'url('+IGHG.arrayImages[IGHG.selectedIndexImage].imageURL+')';
			$('.imageSlideShowHolder').hide();
			$('.imageSlideShowHolder').fadeIn(500);
		})
	}
	this.loadAllImages();
	this.addTableHolder();
	this.addDivImagesHolder();
	this.addImageHolder();
	this.addBorderTo();
	this.addAllButtons();
	this.setIndexSelectedImageTo_0();
	
	this.durationImage = 7;
	this.timeInterval = 0;
	this.animateNextImage = function()
	{
		  IGHG.selectedIndexImage++;
		  if(IGHG.selectedIndexImage >= IGHG.arrayImages.length)
		  {
			  IGHG.selectedIndexImage=0;
		  }
		  IGHG.selectTheButton(IGHG.allButtons[IGHG.selectedIndexImage]);
	}
	this.timeInterval = setInterval(this.animateNextImage, this.durationImage*1000);
	this.clearAutoAnimation = function()
	{
		clearInterval(this.timeInterval);
	}
	IGHG = this;
}
var IGHG=null;