var exhibitionist_vi_inlineThumbnailWithInfo = function(){
	this.speedDivisor = 10;
	
	this.thumbnailClipper = document.createElement("div");
	this.thumbnailClipper.style.position = "relative";
	this.thumbnailClipper.style.overflow = "hidden";
	
	this.thumbnailContainer = document.createElement("div");
	this.thumbnailContainer.style.position = "relative";
	this.thumbnailContainer.currentWidth = 0;
	this.thumbnailContainer.currentHeight = 0;
	this.thumbnailClipper.appendChild(this.thumbnailContainer);
	
	this.containerArray = Array();
	this.lastImage = null;
	this.vertical = false;
	this.init = function(object,itemDiv,settingArray){
		this.object = object;
		this.itemDiv = itemDiv;
		this.itemDiv.appendChild(this.thumbnailClipper);
		this.thumbnailSlideSpeed = parseInt(settingArray['thumbnailSlideSpeed']);
		if (this.thumbnailSlideSpeed < 0){
			this.thumbnailSlideSpeed = 5;
			alert("Thumbnail Slide Speed set too low. Resetting to 5.");
		}
		this.thumbnailLength = parseInt(settingArray['thumbnailLength']);
		if (this.thumbnailLength < 5){
			this.thumbnailLength = 300;
			alert("Thumbnail List Length set too low. Resetting to 300px.");
		}
		this.speedDivisor = this.thumbnailSlideSpeed * this.thumbnailSlideSpeed;
		if (settingArray['thumbnailAxis'] == "v"){
			this.vertical = true;
		}
	}
	this.start = function(){
		for (thumbnailNumber in this.object.thumbnailItems){
			var thumbnail = this.object.thumbnailItems[thumbnailNumber].getImageCopy();
			var thumbnailImageContainer = document.createElement("a");
			thumbnailImageContainer.image = thumbnail.image;
			thumbnailImageContainer.style.position = "relative";
			thumbnailImageContainer.href = "#";
			thumbnailImageContainer.number = thumbnailNumber;
			thumbnailImageContainer.image.setAttribute("class","inlineThumbnailItem");
			thumbnailImageContainer.controller = this;
			thumbnailImageContainer.onclick = function(){
				this.controller.imageClicked(this.number);
				return false;
			}
			if (this.vertical){
				this.thumbnailClipper.style.height = this.thumbnailLength+"px";
				//this.thumbnailClipper.style.width = thumbnail.aligner.biggestDimention.width + "px";
				//this.thumbnailContainer.style.width = thumbnail.aligner.biggestDimention.width + "px";
				var thumbnailHeight = thumbnail.alignedHeight;
				this.thumbnailContainer.currentHeight = this.thumbnailContainer.currentHeight + thumbnailHeight;
				this.thumbnailContainer.style.height = this.thumbnailContainer.currentHeight + "px";
				thumbnailImageContainer.style.display="block";
			}else{
				//this.thumbnailClipper.style.width = this.thumbnailLength+"px";
				this.thumbnailClipper.style.height = thumbnail.aligner.biggestDimention.height + "px";
				this.thumbnailContainer.style.height = thumbnail.aligner.biggestDimention.height + "px";
				var thumbnailWidth = thumbnail.alignedWidth;
				this.thumbnailContainer.currentWidth = this.thumbnailContainer.currentWidth + thumbnailWidth;
				this.thumbnailContainer.style.width = this.thumbnailContainer.currentWidth + "px";
				thumbnailImageContainer.style.display = "inline";
			}
			thumbnailImageContainer.appendChild(thumbnail.image);
			var infoElement = document.createElement("div");
			infoElement.style.display = "inline-block";
				thumbnail.image.style.display = "inline-block";
			infoElement.style.height  = thumbnail.alignedHeight+"px";
			infoElement.style.paddingTop = thumbnail.image.style.paddingTop;
			//thumbnail.image.setAttribute("align","left");
			infoElement.id = "thumbnailInfo";
			
			//thumbnailImageContainer.style.display = "block";
			//thumbnailImageContainer.style.verticalAlign = "text-top";
			thumbnailImageContainer.appendChild(infoElement);
			if(true){
				var titleElement = document.createElement("div");
				titleElement.innerHTML = thumbnail.itemArray['title'];
				infoElement.appendChild(titleElement);
			}
			if(true){
				var captionElement = document.createElement("div");
				captionElement.innerHTML = thumbnail.itemArray['caption'];
				infoElement.appendChild(captionElement);
			}
			if(true){
				var descriptionElement = document.createElement("div");
				descriptionElement.innerHTML = thumbnail.itemArray['description'];
				infoElement.appendChild(descriptionElement);
			}
			this.thumbnailContainer.appendChild(thumbnailImageContainer);
			this.containerArray[thumbnailNumber] = thumbnailImageContainer;
		}
		
	}
	//functions that call global events
	this.imageClicked = function(item){
		//check if we are able to do something now
		if(this.object.threadsBusy == 0){
			this.object.changeToItem(item);
		}
	}
	//function that listen to global events
	this.changeToItem = function(item){
		this.object.threadsBusy++;
		var subjectContainer = this.containerArray[item];
		subjectContainer.image.setAttribute("class","inlineThumbnailItemSelected");
		if (this.lastImage !== null){
			this.containerArray[this.lastImage].image.setAttribute("class","inlineThumbnailItem");
		}
		this.lastImage = item;
		if (this.vertical){
			var newTop = (-subjectContainer.offsetTop) + (this.thumbnailClipper.offsetHeight / 2) - (subjectContainer.offsetHeight / 2);
			//parseInt(-(subjectContainer.offsetTop - ((this.thumbnailClipper.offsetHeight / 2) + (subjectContainer.offsetHeight / 2))));
			var oldTop = this.thumbnailContainer.offsetTop;
			this.slideTo(oldTop,newTop,this.thumbnailContainer,"top");
		}else{
			var newLeft = parseInt(-(subjectContainer.offsetLeft - ((this.thumbnailClipper.offsetWidth / 2) - (subjectContainer.offsetWidth / 2))));
			var oldLeft = this.thumbnailContainer.offsetLeft;
			this.slideTo(oldLeft,newLeft,this.thumbnailContainer,"left");
		}
	}
	this.slideTo = function(from,to,object,attribute){
		var newLeft = 0;
		var slideAmount = 0.3;
		if (from > to){
			//slide left
			var difference = (from - to);
			slideAmount+= difference / this.speedDivisor;
			newLeft = from - slideAmount;
		}else{
			//slide right
			var difference = (to - from);
			slideAmount+= difference / this.speedDivisor;
			newLeft = from + slideAmount;
		}
		if (difference > 1.1){
			if (attribute == "left"){
				object.style.left = newLeft + "px";
			}
			if (attribute == "top"){
				object.style.top = newLeft + "px";
			}
			setTimeout(function(newLeft,to,object,attribute,controller){
				return function(){
					controller.slideTo(newLeft,to,object,attribute);
				}
			}(newLeft,to,object,attribute,this),15);
		}else{
			if (attribute == "left"){
				object.style.left = to + "px";
			}
			if (attribute == "top"){
				object.style.top = to + "px";
			}
			this.object.threadsBusy--;
		}
		
	}
}