/*
 * prdImgSelClass
 *
 * javascript object to handle multiple images to replace
 * big product image
 *
 * @version	0.1
 * @author	Tom Klingenberg <tklingenberg@lastflood.net>
 * @uses	jQuery
 * @uses	ImageLoader based on the one by Alexander Petri 
 *
 * DOM:
 *	<div .prdImgSelC>
 *		<a>
 *			<img>/<img .sel> // selected or not
 *		</a> (x 0-n)
 *	</div> (x 1)
 *	<div .prdImgC>
 *		/<a> // ZoomImage or not
 *			<img #prdImgPic>
			/<img #prdImgCnavZoom> // ZoomImage or not)
 *		/</a> // ZoomImage or not
 *
 *  // dynamically is added:
 *
 *		<img #prdImgCnavLeft .prdImgCnav>
 *		<img #prdImgCnavLeft .prdImgCnav>
 *		<img #prdImgCload>
 *		
 *	</div>
 */

function prdImgSelClass() {
	this.selLastObj = null;
	this.selLastIndex = -1;
	this._prdImgSel = 'div.prdImgSelC > a';

	/*
	 * selIndex
	 *
	 * returns index  of an object in the small image list
	 *
	 * @param  object obj object to return the index of
	 *
	 * @return int		 index of the element (0-based)
	 * @return undefined if not found
	 */
	this.selIndex = function(obj) {
		var all = $(this._prdImgSel);
		var m = all.size();
		for (var i = 0; i<m; i++) {
			if (obj == all[i]) {
				return i;
			}
		}
		return undefined;
	}

	/*
	 * selClick
	 *
	 * performs the click-action on a small image
	 *
	 * @param object obj
	 */
	this.selClick = function(obj) {
		// check wether obj is a valid object or not (via index)			
		var i = this.selIndex(obj);
		if (typeof i == 'undefined')	{
			throw "selObject has no index!";
		}
		var t = obj.title || obj.name || null;

		//edit+ img and .sel are hardencoded here
		var classSel	 = 'sel';
		var childElement = 'img';

		if (this.selLastObj) {
			$(this.selLastObj).children(childElement).toggleClass(classSel);
		}

		$(obj).children(childElement).toggleClass(classSel);

		this.selLastObj   = obj;
		this.selLastIndex = i;

		// incarnate modified imageloader
		var url = obj.href;
		var id  = 'prdImgPic';
		var loa = new ImageLoader(id, url); 

		loa.loadImage();

		obj.blur();
		return false;
	}

	/*
	 * init
	 *
	 * put prdImgSel functionality into the DOM
	 *
	 * @return bool false just false
	 *
	 */
	this.init = function() {
		// decide wether to init or not
		if ($(prdImgSel._prdImgSel).size() == 0) {
			return false;
		}

		// insert controls
		//edit+ hardencoded container value and image names
		var containerElement = 'div.prdImgC';
		$(containerElement).append('<img src="img/nav1_le.gif" width="20" height="20" alt="&lt;" id="prdImgCnavLeft"  class="prdImgCnav" />');
		$(containerElement).append('<img src="img/nav1_ri.gif" width="20" height="20" alt="&gt;"  id="prdImgCnavRight" class="prdImgCnav" />');
		// $(containerElement).append('<img src="img/loading.gif" width="128" height="118" alt="lade..." id="prdImgCload" />');
		$(containerElement).append('<img src="img/loading.gif" width="66" height="61" alt="lade..." id="prdImgCload" />');
								
		// css manipulate navControls
		// $('#prdImgCnavRight').css("left", Number( $('#prdImgPic').width() - 40 ).toFixed(0) + 'px');
		$('#prdImgCnavRight').css("left", Number( 2 ).toFixed(0) + 'px');

		var sl = Number( ($('#prdImgPic').width() - $('#prdImgCload').width()) / 2).toFixed(0) + 'px';
		var st = '-' + Number( ($('#prdImgPic').height() + $('#prdImgCload').height()) / 2).toFixed(0) + 'px';
		$('#prdImgCload').css({left: sl, top: st});
		// $('#prdImgCload').css('left', sl);
		// $('#prdImgCload').css('top', st);


		// add click handler to small images
		// edit+ reference to global variable
		$(prdImgSel._prdImgSel).click(function(){
			prdImgSel.selClick(this);
			return false;
		});

		// add click handler to left/right buttons
		// edit+ reference to global variable
		$('img.prdImgCnav').click(function(){
			var d = 0;
			switch(this.id) {
				case 'prdImgCnavLeft':
					d = -1;
					break;
				case 'prdImgCnavRight':
					d = 1;
					break;
			}
			var m = $(prdImgSel._prdImgSel).size();
			var i = prdImgSel.selLastIndex + d;
			if (i != prdImgSel.selLastIndex) {
				if (i < 0) {
					i = m - 1;
				}
				if (i > m - 1) {
					i = 0;
				}
				var obj = $(prdImgSel._prdImgSel).get(i);
				prdImgSel.selClick(obj);
			}
			this.blur();
			return false;
		});

		var obj = $(prdImgSel._prdImgSel).get(0);			
		prdImgSel.selClick(obj);
	}
}

/*
 * ImageLoader
 *
 * @author:  Alexander Petri, Tom Klingenberg
 * @see:	 http://phpugffm.de/index.php/archives/139
 * @changes: * Prüfung ob load notwendig ist
 *			 * Random entfernt
 *			 * jQuery Animationen
 */
function ImageLoader(id,url) { 
	this.i = new Image();
	this.indicator = new Image();
	// this.indicator.src = 'ajax-loader.gif';
	this.indicator.src = 'img/loading.gif';	
	this.id = id;
	this.url = url;
	this.imEl = document.getElementById(id); 
	this.loadImage = function() {			
		// prüfen ob load notwendig ist
		if (this.imEl.src == this.url){
			return false;
		}
		objRef = this;			
		this.i.src = this.url
		if(!this.i.complete) {
			$('#prdImgCload').fadeIn(1);
			objRef.waitForImage();
		} else {
			this.imEl.src = this.i.src;
		}
	};
	this.waitForImage = function(){ 
		if(objRef.i.complete){ 
			objRef.imEl.src = objRef.i.src;
			$('#prdImgCload').fadeOut("slow");
		}else{ 
			setTimeout('objRef.waitForImage()', 100); 
		} 
	};
}

var prdImgSel = new prdImgSelClass();
$(document).ready(prdImgSel.init);