/**
 * simpleviewer.js v1.0 - Gallery Viewer based on Webstores javascript library
 * 
 * @author  Webstores <info at webstores dot nl>
 *          Copyright (c) Webstores internet totaalbureau <http://www.webstores.nl/>
 */

/*
Basic HTML output should be something like this:

<div id="reference">
	<h2 class='title'>Schildersbedrijf Frijling</h2>
	<a href="">
		<img id="mainImg" alt="213927.jpg" src="resources/ref/detail/213927.jpg">
	</a>
	<div id="reference_controls">
		<a class="prev" id="reference_prev"></a>
		<div id="reference_container">
			<div id="reference_content">
				<div class="ref_item"><img src="resources/ref/thumb/213927.jpg" alt="213927.jpg" /></div>
				<div class="ref_item"><img src="resources/ref/thumb/blauwe_heuvels.jpg" alt="blauwe_heuvels.jpg" /></div>
			</div>
		<a class="next" id="reference_next"></a>
	</div>
</div>
*/

/**
 * @constructor
 * @return Simpleviewer Object
 */
function Simpleviewer() {

	//Set variabeles here 	
	this.UseLightbox	 = 	"true";  /* use lightbox when detail is clicked? <A> tag must be in html */
	this.Selectable		 = 	"true"; /* use class to give thumb a selected state? */
	this.Selectedclass	 = 	"selected"; /* if this.Selectable is true, use what classname? */
	this.Direction		 =  "vertical"; /* Is the content horizontal or vertical? */
	this.thumbprefix	 = 	"/thumb";  /* filepath prefix thumbs */
	this.detailprefix	 = 	"/middel"; /* filepath prefix for main image */
	
	this.ImgsContainer =	$('thumb-wrap'); /* Container div which contains the restricting layout */
	this.ImgsContent 	 =	$('thumb-content'); /* element containing Imgs */
	this.Next		 	 =	$('next'); /* Handler for scrolling forward / down */
	this.Prev		 	 =	$('prev'); /* Handler for scrolling back / up */
	this.MainImg		 =	$('theimage') /* element reference to main image */

	/* Dont Edit below this point! */

	/**
	 * Initialize Simpleviewer, get Data 	
 	*/
	this.initialize = function() {
		var self 			= this;
		this.Imgs			= this.ImgsContent.getElementsByTagName("A");
		this.Count 			= this.Imgs.length;
		this.ItemWidth 		= this.Imgs[0].offsetWidth;
		this.ItemHeight		= this.Imgs[0].offsetHeight;
		this.Next.onclick 	= function() {self.nextImg()}; 
		this.Prev.onclick 	= function() {self.prevImg()}; 
		this.Addthumbevent();
		if(this.Selectable) {
			this.Imgs[0].childNodes[0].className += " "+ this.Selectedclass;			
		}
	}

	/**
	 * Initialize Simpleviewer, get Data 
	 * @param (Mixed) item The reference to the current image object 	
 	*/
	this.Adddetailevent = function(item) {
		if(this.MainImg.parentNode.tagName == "A")
		{
			lightboxLink = this.MainImg.parentNode;
			lightboxLink.href = item.src.replace("/thumb","/orig");
			lightboxLink.href = lightboxLink.href.toLowerCase();
		//	lightboxLink.title = item.alt;
		}
	}

	/**
	* Addthumbevent - Give every thumb a pointer and give them the replaceImg function onclick
	*/
	this.Addthumbevent = function() {
		var self = this;
		for(i=0; i < this.Imgs.length;i++)
		{
			var item 			= this.Imgs[i].childNodes[0];
			item.style.cursor 	= "pointer";
			item.onclick 		= function(){ self.replaceImg(this)} ;
		}
	}
	
	/**
	* PrevImg - Scroll to previous Image depending on Vertical or horizontal modes, by changing margins
	*/
	this.prevImg = function() {
		if(this.Direction == "horizontal")
		{
			if(this.ImgsContent.style.marginLeft != '') {
				current = this.ImgsContent.style.marginLeft.replace("px","");
				current = parseInt(this.ImgsContent.style.marginLeft);
			} else {
				current = 0;
			}
	
			if(this.ImgsContent.style.marginLeft != '' && this.ImgsContent.style.marginLeft != "0px") {
				this.ImgsContent.style.marginLeft = (current + this.ItemWidth) + 'px';
			}
		}
		else if(this.Direction == "vertical")
		{
			if(this.ImgsContent.style.marginTop != '') {
				current = this.ImgsContent.style.marginTop.replace("px","");
				current = parseInt(this.ImgsContent.style.marginTop);
			} else {
				current = 0;
			}
	
			if(this.ImgsContent.style.marginTop != '' && this.ImgsContent.style.marginTop != "0px") {
				this.ImgsContent.style.marginTop = (current + this.ItemHeight) + 'px';
			}
			
		}
		return false;
	}

	/**
	* NextImg - Scroll to next Image depending on Vertical or horizontal modes, by changing margins
	*/
	this.nextImg = function() {
		if(this.Direction == "horizontal")
		{
			if(this.ImgsContent.style.marginLeft != '') {
				current = this.ImgsContent.style.marginLeft.replace("px","");
				current = parseInt(this.ImgsContent.style.marginLeft);
			} else {
				current = 0;
			}
			limit = 1 + Math.floor(this.ImgsContainer.offsetWidth / this.ItemWidth);
			if( (this.ItemWidth * this.Count) >= ((this.ItemWidth * limit) - current) )
			this.ImgsContent.style.marginLeft = (current - this.ItemWidth) + 'px';
		}
		else if(this.Direction == "vertical")
		{
			if(this.ImgsContent.style.marginTop != '') {
				current = this.ImgsContent.style.marginTop.replace("px","");
				current = parseInt(this.ImgsContent.style.marginTop);
			} else {
				current = 0;
			}
			limit = 1 + Math.floor(this.ImgsContainer.offsetHeight / this.ItemHeight);
			if( (this.ItemHeight * this.Count) >= ((this.ItemHeight * limit) - current) )
			this.ImgsContent.style.marginTop = (current - this.ItemHeight) + 'px';
		}
		return false;
	}
	/**
	* replaceImg - Replace mainImg SRC and ALT with the Selected item SRC and ALT
	* If selectable is true, make current thumb selected
	* @param (Mixed) item The reference to the current image object
	*/
	this.replaceImg = function(item) {
		this.MainImg.src = item.src.replace(this.thumbprefix,this.detailprefix);
		this.MainImg.src = this.MainImg.src.toLowerCase();
		this.MainImg.alt = item.alt;

		if(this.Selectable == "true") {
			this.SelectImg(item);
		}
		if(this.UseLightbox == "true") {
			this.Adddetailevent(item);
		}
	}

	/**
	* SelectImg - remove the selected class, and give it to the current appointed thumb
	* @param (Mixed) item The reference to the current image object
	*/
	this.SelectImg = function(item) {
		for(j=0;j < this.Imgs.length;j++)
		{
			var img 			= this.Imgs[j].childNodes[0];
			img.className 		= img.className.replace(new RegExp(" "+this.Selectedclass+"\\b"), "")
			img.className 		= img.className.replace(new RegExp(this.Selectedclass+"\\b"), "")
		}
		item.className += " "+this.Selectedclass; 
	}
}