var sliderList		= new Array();

function preloadImage()
{
	this.img_src		= '';
	this.preloaded		= false;
	this.preloader		= false;
	this.img			= false;
	
	/** Preloads image */
	this.preload = function (url)
	{
		this.img = new Image();
		this.img_src = url;
		this.img.src = url;
		this.preloaded = false;
		
		this.test();		
	}
	
	/** Checks if image has been preloaded and if is, sends callback */
	this.test = function ()
	{
		if (this.img.complete)
		{
			this.preloaded = true;
			this.preloader.preloadFinish(this.img_src);
		}
		else if (this.preloaded == false)
		{
			setTimeout('imagePreloader.test()', 10);
		}
	}
}

//Image preloader instance
var imagePreloader	= new preloadImage();

function Lightbox(pictures)
{
	this.pictures 		= pictures;
	//Array of pictures
	this.lightboxObj 	= false;
	this.imageImgObj	= false;
	this.imageObj 		= false;
	this.image    		= false;
	this.closeObj		= false;
	//Lightbox width & height
	this.old_w			= 200;
	this.old_h			= 150;
	//Lightpox image position
	this.new_x			= 0;
	this.new_y			= 0;
	//Lightbox visibile or not
	this.visible		= false;
	this.image_index	= 0;

	
	/** Initializes lightbox */
	this.init = function ()
	{
		var lb = document.getElementById('lightbox');
		
		if (!lb)
		{		
			var xhtml = '<div id="lightbox"></div><div id="lightbox_image"><img id="lightbox_image_img" src="/.gif" alt="" /><img id="lightbox_close" src="/pic/lightbox_close.gif" alt="Close" /></div>';
			document.getElementById('popup_container').innerHTML = document.getElementById('popup_container').innerHTML + xhtml;
		}

		
		this.lightboxObj	= document.getElementById('lightbox');
		this.imageObj		= document.getElementById('lightbox_image');
		this.imageImgObj	= document.getElementById('lightbox_image_img');
		this.image          = this.imageObj.getElementsByTagName('IMG');
		this.image 		 	= this.image[0];
		this.closeObj		= document.getElementById('lightbox_close');
		
		//Attaching objects
		this.lightboxObj.lightbox 	= this;
		this.imageObj.lightbox 		= this;
		this.image.lightbox 		= this;
		this.closeObj.lightbox 		= this;
		
		//Attaching events
		this.closeObj.onclick 			= function ( ) { this.lightbox.hide(); }
		
		this.imageImgObj.style.display = "none";
		
		this.imageObj.style.width = this.old_w + 'px';
		this.imageObj.style.height = this.old_h + 'px';
		
		changeOpac(0, 'lightbox_image_img');
		
		
	}
	
	/** Image preloading starts */
	this.show = function (pic_index)
	{
		if (pic_index >= 0 && pic_index < this.pictures.length)
		{
			this.image_index = pic_index;

			//Window height
			var w_size = getWindowSize();
			
			//Image position
			this.new_y = parseInt((w_size[1] - this.old_h) / 2) + getScrollTop();
			this.new_x = parseInt((w_size[0] - this.old_w) / 2) - 20;
			
			this.imageObj.style.left = this.new_x + 'px';
			this.imageObj.style.top = this.new_y + 'px';

			//Page content height
			var doc_height = getPageHeight();
			
			//Showing lightbox
			this.lightboxObj.style.height = doc_height + 'px';
			this.lightboxObj.style.display = "block";
			this.imageObj.style.display = "block";
			
			opacity('lightbox', 0, 80, 200);
			opacity('lightbox_image', 0, 100, 200);
			changeOpac(0, 'lightbox_close');
			
			this.visible = true;

			//Preloading image
			imagePreloader.preloader = this;
			setTimeout('imagePreloader.preload("' + this.pictures[pic_index] + '");',100);
		}
	}
	
	/** Image preloaded, showing it */
	this.preloadFinish = function ( url )
	{
		//Image preloaded, can show now
		this.image.src = url;
		
		//Window size
		var w_size = getWindowSize();

		//Image position
		var imgYpos = parseInt((w_size[1] - this.old_h) / 2) + getScrollTop();
		var imgXpos = parseInt((w_size[0] - this.old_w) / 2) - 20;
		
		animateSizePos('lightbox_image',
									imgXpos, imgYpos,
									this.old_w,	imagePreloader.img.width,
									this.old_h,	imagePreloader.img.height + 29,
									200);
		
		this.old_w = imagePreloader.img.width;
		this.old_h = imagePreloader.img.height + 30;
		
		//Showing image
		setTimeout("opacity('lightbox_close', 0, 100, 100);", 240);
		setTimeout("opacity('lightbox_image_img', 0, 100, 200);", 240);
		setTimeout("document.getElementById('lightbox_image_img').style.display='block';", 240);		
	}
	
	/** Hide lightbox */
	this.hide = function ()
	{
		/* Fading out lightbox */
		opacity('lightbox', 80, 0, 100);
		opacity('lightbox_image', 100, 0, 100);

		/* Hiding lightbox */
		setTimeout("document.getElementById('lightbox').style.display='none';",100);
		setTimeout("document.getElementById('lightbox_image').style.display='none';",100);
	
		/* Hiding image */
		setTimeout("changeOpac(0, 'lightbox_image_img');", 100);
		setTimeout("document.getElementById('lightbox_image_img').style.display='none';",100);
		
		this.visible = false;
	}

}

function Slider(thumbnails, pictures, elementPrefix, elementCount)
{
	this.pictures 		= pictures;
	this.thumbnails		= thumbnails;
	this.th_cache		= new Array();
	this.pictureCount	= pictures.length;
	
	this.elements		= new Array();
	this.elementPrefix 	= elementPrefix;
	this.elementCount  	= elementCount;
	
	this.allow_extra	= true;
	
	this.pictureStart	= 0;
	this.pictureNext	= 0;
	this.picturePos		= 0;
	
	this.movementTime	= 300;
	this.timeDelay		= 32;		/* Optimal, redrawing ~32 times / second */
	this.movementSpeed	= 0;
	this.direction		= -1;
	this.movementState  = 0;
	
	this.selfIndex		= 0;
	
	this.lightbox		= false;
	
	this.imagew			= 110;
	
	this.extra_blocks	= 0;
	this.extra_elements = new Array();
	
	/** Initializes Slider class */
	this.init = function () {
		this.movementSpeed = 110 / (this.movementTime / this.timeDelay);
		this.lightbox = new Lightbox(this.pictures);
		this.lightbox.init();
	
		for(var i = 0; i < this.pictures.length; i++)
		{
			this.th_cache[i] = new Image();
			this.th_cache[i].src = this.thumbnails[i];
		}
	
		for(var i = 1; i <= this.elementCount; i++)
		{
			var el = document.getElementById(this.elementPrefix + i);
			if (el)
			{
				/* Attaching events & properties to the image */
				el.slider		= this;
				el.onclick		= function() { this.slider.lightbox.show(i-1); };
				el.onmouseover	= function() {this.parentNode.className="image_wrapper hovered"; };
				el.onmouseout	= function() {this.parentNode.className="image_wrapper"; };
				
				/* Attaching events & properties to the image overlay block */
				el_over = document.getElementById('image_overlay_' + i);
				if (el_over)
				{
					el_over.slider		= this;
					el_over.image_index = i - 1;
					el_over.onclick 	= function() {this.slider.lightbox.show(this.image_index + this.slider.pictureStart);};
					el_over.onmouseover	= function() {this.parentNode.className="image_wrapper hovered";};
					el_over.onmouseout	= function() {this.parentNode.className="image_wrapper";};
					el_over.style.display = 'block';
				}
				
				this.elements[i-1] = el;
			}
		}
		
		this.elementCount = this.elements.length;
		
		this.selfIndex = sliderList.length;
		sliderList[this.selfIndex] = this;
		
		this.resize();
	};
	
	/** Does image transition step */
	this.sliderDo = function ()	{
	
		if (this.movementState == 0)
			return;
			
		if (this.movementState == 1)
		{
			this.picturePos = this.picturePos + this.movementSpeed * this.direction;
			var tmpPicturePos = parseInt(this.picturePos) + 'px';
			
			if (this.picturePos < -this.imagew || this.picturePos > this.imagew)
			{
				if (this.direction < 0)
					this.picturePos = this.direction * -this.imagew;
				else
					this.picturePos = -this.imagew;
				
				this.movementState = 2;
												
				for(var i = 0; i < this.elementCount; i++)
				{
					this.elements[i].src = this.thumbnails[this.pictureNext + i];
					this.elements[i].style.left = tmpPicturePos;
				}
			}else{
				for(var i = 0; i < this.elementCount; i++)
				{
					this.elements[i].style.left = tmpPicturePos;
				}
			}
		}
		else if (this.movementState == 2)
		{
			this.picturePos = this.picturePos + this.movementSpeed * this.direction;
			var tmpPicturePos = parseInt(this.picturePos) + 'px';
			
			if ((this.direction == -1 && this.picturePos <= 0) || (this.direction == 1 && this.picturePos >= 0))
			{
				this.picturePos = 0;
				this.tmpPicturePos = 0;
				this.movementState = 0;
				this.pictureStart = this.pictureNext;
				
				for(var i = 0; i < this.elementCount; i++)
				{
					this.elements[i].style.left = '0px';
				}
				
			}else{
				for(var i = 0; i < this.elementCount; i++)
				{
					this.elements[i].style.left = tmpPicturePos;
				}
			}
		}
	};
	
	/** Show next images */
	this.slideNext = function () {
		if (this.movementState != 0)
			return;
		 
		if (this.pictureNext + this.elementCount + 1 >= this.pictureCount){
		}else{
			
			this.pictureNext = this.pictureStart + this.elementCount;
			
			if (this.pictureNext + this.elementCount >= this.pictureCount)
			{
				this.pictureNext = this.pictureCount - this.elementCount;
			}
			
			this.direction = -1;
			this.sliderStart();
			
			document.getElementById('slider_arrow_prev').src = "/pic/arrow_prev.gif";
			document.getElementById('slider_arrow_prev').className="";
		}
		
		if (this.pictureNext == this.pictureCount - this.elementCount)
		{
			document.getElementById('slider_arrow_next').src = "/pic/arrow_next_no.gif";
			document.getElementById('slider_arrow_next').className="inactive";
		}
	};
	
	/** Show previous images */
	this.slidePrev = function () {
		if (this.movementState != 0)
			return;
		
		if (this.pictureStart <= 0) {
		}else{
			if (this.pictureStart + this.elementCount == this.pictureCount)
			{
				document.getElementById('slider_arrow_next').src = "/pic/arrow_next_no.gif";
				document.getElementById('slider_arrow_next').className = "inactive";
				document.getElementById('slider_arrow_prev').src = "/pic/arrow_prev.gif";
				document.getElementById('slider_arrow_prev').className = "";
			}
			
			this.pictureNext = this.pictureStart - this.elementCount;
			if (this.pictureNext < 0)
				this.pictureNext = 0;
				
			this.direction = 1;
			this.sliderStart();
			
			document.getElementById('slider_arrow_next').src = "/pic/arrow_next.gif";
			document.getElementById('slider_arrow_next').className = "";
		}
		
		if (this.pictureNext == 0)
		{
			document.getElementById('slider_arrow_prev').src = "/pic/arrow_prev_no.gif";
			document.getElementById('slider_arrow_prev').className = "inactive";
		}
	};
	
	/** Start image transition */
	this.sliderStart = function () {
		this.movementState = 1;

		for(var i=0; i < parseInt(this.movementTime / this.timeDelay) * 2 + 2; i++)
		{
			setTimeout('sliderHelper(' + this.selfIndex + ')', i * this.timeDelay); 
		}
	};
	
	/** When window is resized, checks for space for additional block and inserts it */
	this.resize = function() {
		
		if (this.allow_extra == false)
			return true;
		
		var wh = getWindowSize();
		
		/*
		 * 1050px is the width on which 4 blocks in a row looks good
		 * 20px is the scrollbar and border space
		 * 52.38% is the content width of the total window size
		 * each blocks horizontal space is 130px
		 */
		
		wh = wh[0] - 1050 - 20;
		wh = wh * 0.5238;
		wh = wh / 140;
		wh = parseInt(wh);
	
		if (wh < 0)
			wh = 0;
		
		if (this.extra_blocks == wh)
		{
			return true;
		}else if (this.extra_blocks < wh)
		{
			var row_1 = document.getElementById('gallery_row_1_last');
			var row_2 = document.getElementById('gallery_row_2_last');
			var row_3 = document.getElementById('gallery_row_3_last');
			
			var line_index = this.extra_blocks;
			
			var _html_1 = '';
			var _html_2 = '';
			var _html_3 = '';
			
			//var el_gallery = document.getElementById('gallery');
			//	el_gallery.style.width = parseInt(el_gallery.style.width) + (140 * wh - (this.extra_blocks)) + 'px';
			
			for(var i = this.extra_blocks; i < wh; i++)
			{
				if (i % 2 == 0)
				{
					var line_0_div = document.createElement('DIV');
						line_0_div.id = 'gallery_extra_' + line_index + '_1';
						line_0_div.className = 'block empty';
					
					var line_1_div = document.createElement('DIV');
						line_1_div.id = 'gallery_extra_' + line_index + '_1';
						line_1_div.className = 'block gray_img';
					
					var line_1_div_2 = document.createElement('DIV');
						line_1_div_2.className = 'image_wrapper';
						line_1_div.appendChild(line_1_div_2);
						
					var line_1_div_3 = document.createElement('DIV');
						line_1_div_3.className = 'popup_overlay';
						line_1_div_3.id = 'image_overlay_' + (i + 6);
						line_1_div_2.appendChild(line_1_div_3);
						
					var line_1_img = document.createElement('IMG');
						line_1_img.id = 'image_container_' + (i + 6);
						line_1_img.src = this.thumbnails[i + 6 + this.pictureStart];
						line_1_div_2.appendChild(line_1_img);
					
					var line_2_div = document.createElement('DIV');
						line_2_div.id = 'gallery_extra_' + line_index + '_3';
						line_2_div.className = 'block empty';
						
					row_1.appendChild(line_0_div);
					row_2.appendChild(line_1_div);
					row_3.appendChild(line_2_div);
					
					this.extra_elements[line_index] = new Array();
					this.extra_elements[line_index][0] = line_0_div;
					this.extra_elements[line_index][1] = line_1_div;
					this.extra_elements[line_index][2] = line_2_div;
					
					this.elements[this.elementCount] = line_1_img;
					this.attachEvents2(line_1_img, line_1_div_3, i + 6);
					this.elementCount++;
					
					if (this.pictureStart + this.elementCount >= this.pictureCount)
					{
						document.getElementById('slider_arrow_next').src = "/pic/arrow_next_no.gif";
						document.getElementById('slider_arrow_next').className = "inactive";
					}
					if (this.pictureStart + this.elementCount > this.pictureCount)
					{
						this.slidePrev();
						document.getElementById('slider_arrow_next').src = "/pic/arrow_next_no.gif";
						document.getElementById('slider_arrow_next').className = "inactive";
					}
				} else {

					
					var line_0_div = document.createElement('DIV');
						line_0_div.id = 'gallery_extra_' + line_index + '_1';
						line_0_div.className = 'block gray_img';
						
					var line_0_div_2 = document.createElement('DIV');
						line_0_div_2.className = 'image_wrapper';
						line_0_div.appendChild(line_0_div_2);
						
					var line_0_div_3 = document.createElement('DIV');
						line_0_div_3.className = 'popup_overlay';
						line_0_div_3.id = 'image_overlay_' + (i + 6);
						line_0_div_2.appendChild(line_0_div_3);
						
					var line_0_img = document.createElement('IMG');
						line_0_img.id = 'image_container_' + (i + 6);
						line_0_img.src = this.thumbnails[i + 6 + this.pictureStart];
						line_0_div_2.appendChild(line_0_img);
					
					this.elements[this.elementCount] = line_0_img;
					this.attachEvents2(line_0_img, line_0_div_3, i + 6);
					this.elementCount++;
					
					i = i + 1;
					
					
					var line_1_div = document.createElement('DIV');
						line_1_div.id = 'gallery_extra_' + line_index + '_1';
						line_1_div.className = 'block border';


					var line_2_div = document.createElement('DIV');
						line_2_div.id = 'gallery_extra_' + line_index + '_1';
						line_2_div.className = 'block gray_img';
					
					var line_2_div_2 = document.createElement('DIV');
						line_2_div_2.className = 'image_wrapper';
						line_2_div.appendChild(line_2_div_2);
						
					var line_2_div_3 = document.createElement('DIV');
						line_2_div_3.className = 'popup_overlay';
						line_2_div_3.id = 'image_overlay_' + (i + 6);
						line_2_div_2.appendChild(line_2_div_3);
						
					var line_2_img = document.createElement('IMG');
						line_2_img.id = 'image_container_' + (i + 6);
						line_2_img.src = this.thumbnails[i + 6 + this.pictureStart];
						line_2_div_2.appendChild(line_2_img);
						
					this.elements[this.elementCount] = line_2_img;
					this.attachEvents2(line_2_img, line_2_div_3, i + 6);
					this.elementCount++;
					
					row_1.appendChild(line_0_div);
					row_2.appendChild(line_1_div);
					row_3.appendChild(line_2_div);
					
					this.extra_elements[line_index] = new Array();
					this.extra_elements[line_index][0] = line_0_div;
					this.extra_elements[line_index][1] = line_1_div;
					this.extra_elements[line_index][2] = line_2_div;
					
					if (this.pictureStart + this.elementCount >= this.pictureCount - 1)
					{
						this.pictureStart--;
						if (this.pictureStart < 0)
							this.pictureStart = 0;
							
						this.slidePrev();
					}
				}

				line_index++;
			}
			
			this.extra_blocks = wh;
		}
		else if (this.extra_blocks > wh)
		{
			//var el_gallery = document.getElementById('gallery');
			//	el_gallery.style.width = parseInt(el_gallery.style.width) - (140 * (this.extra_blocks - wh)) + 'px';
			
			for (var i = this.extra_blocks - 1; i >= wh; i--)
			{
				if (this.extra_elements[i])
				{
					if (this.extra_elements[i][0])
						this.extra_elements[i][0].parentNode.removeChild(this.extra_elements[i][0]);
						
					if (this.extra_elements[i][1])
						this.extra_elements[i][1].parentNode.removeChild(this.extra_elements[i][1]);
						
					if (this.extra_elements[i][2])
						this.extra_elements[i][2].parentNode.removeChild(this.extra_elements[i][2]);
						
					this.extra_elements[i] = new Array();
				}

				if (i % 2)
				{
					this.elementCount = this.elementCount - 2;
				}else{
					this.elementCount--;
				}
			}
			
			if (this.pictureStart + this.elementCount < this.pictureCount)
			{
				document.getElementById('slider_arrow_next').src = "/pic/arrow_next.gif";
			}
		}
		
		this.extra_blocks = wh;
		
	}

	this.attachEvents2 = function( el, el_over, i_index )
	{
		/* Attaching events & properties to the image */
		el.slider		= this;
		el.onclick		= function() { this.slider.lightbox.show(i_index); };
		el.onmouseover	= function() {this.parentNode.className="image_wrapper hovered"; };
		el.onmouseout	= function() {this.parentNode.className="image_wrapper"; };
		
		/* Attaching events & properties to the image overlay block */
		
		el_over.slider		= this;
		el_over.image_index = i_index;
		el_over.onclick 	= function() {this.slider.lightbox.show(this.image_index + this.slider.pictureStart);};
		el_over.onmouseover	= function() {this.parentNode.className="image_wrapper hovered";};
		el_over.onmouseout	= function() {this.parentNode.className="image_wrapper";};
		el_over.style.display = 'block';
	}
	
	this.attachEvents = function( el, i_index )
	{
		/* Attaching events & properties to the image */
		el.slider		= this;
		el.onclick		= function() { this.slider.lightbox.show(i_index); };
		el.onmouseover	= function() {this.parentNode.className="image_wrapper hovered"; };
		el.onmouseout	= function() {this.parentNode.className="image_wrapper"; };
		
		/* Attaching events & properties to the image overlay block */
		el_over = document.getElementById('image_overlay_' + (i_index + 1));
		
		if (el_over)
		{
			el_over.slider		= this;
			el_over.image_index = i_index;
			el_over.onclick 	= function() {this.slider.lightbox.show(this.image_index + this.slider.pictureStart);};
			el_over.onmouseover	= function() {this.parentNode.className="image_wrapper hovered";};
			el_over.onmouseout	= function() {this.parentNode.className="image_wrapper";};
			el_over.style.display = 'block';
		}
	}
}

//Helper function for Slider, needed for timeout events
function sliderHelper(sliderIndex)
{
	var obj = sliderList[sliderIndex];
	
	if (obj)
	{
		obj.sliderDo();
	}
}

//Resize event helper function
function sliderResize()
{
	for(var i=0; i < sliderList.length; i++)
	{
		sliderList[i].resize();
	}
}