// easy2shop - easytools_zoombox.js - version 1.01 - 29.12.2008
//
// Copyright (c) 2008 by easy graphics AG, Wetzikon
// All rights reserved.
// Functions for Image Zoom in Typo3 Frontend

var easytools;
if(!easytools) easytools = {};

easytools.Notifier = function() {
	this.observers = [];
	this.suppressNotifications = 0;
};

easytools.zoomBox = function(options) {
	this.name = 'zoomBox';
	this.fadeEffects = new Array();
	this.activeImage = -1;
	this.imageNum = 0;
	this.visible = false;
	this.border = (typeof border == "undefined")?10:border;
	this.loadScripts();
}

easytools.zoomBox.prototype = new easytools.Notifier();
easytools.zoomBox.prototype.init = function() {
	var objBody = document.getElementsByTagName("body").item(0);
	
	var objOverlay = document.createElement("div");
	objOverlay.setAttribute('id','overlay');
	objOverlay.style.display = 'none';
	objOverlay.onclick = function() { if(!zoomBox.fadeEffects[0].isRunning) zoomBox.close(); }
	objBody.appendChild(objOverlay);

	var objZoombox = document.createElement("div");
	objZoombox.setAttribute('id','zoomBox');
	objZoombox.style.display = 'none';
	objZoombox.onclick = function(e) {
		if (!e) var e = window.event;
		var clickObj = e.target?e.target:e.srcElement;
		if (clickObj.id == 'zoomBox') {
			if(!zoomBox.fadeEffects[0].isRunning) zoomBox.close();
		}
	};
	objBody.appendChild(objZoombox);
	
	var objContainer = document.createElement("div");
	objContainer.setAttribute('id','zoomBoxContainer');
	objContainer.setAttribute('spry:region','images');
	objContainer.style.width = '10px';
	objContainer.style.height = '10px';
	objZoombox.appendChild(objContainer);
	
	var objImages = document.createElement("div");
	objImages.setAttribute('id','zoomBoxImages');
	objContainer.appendChild(objImages);
	
	var objImg = document.createElement("img");
	objImg.setAttribute('id','zoomBoxImage');
	objImg.style.display = 'none';
	objImg.style.margin = this.border + 'px';
	objImages.appendChild(objImg);
	
	var objLoader = document.createElement("div");
	objLoader.setAttribute('id','zoomBoxLoader');
	objContainer.appendChild(objLoader);
	
	var objNavigation = document.createElement("div");
	objNavigation.setAttribute('id','zoomBoxNavigation');
	objNavigation.style.visibility = 'hidden';
	objContainer.appendChild(objNavigation);
	
	var objNaviBox = document.createElement("div");
	objNaviBox.setAttribute('id','zoomBoxNavi');
	objNavigation.appendChild(objNaviBox);
	
	var objNaviImg = document.createElement("div");
	objNaviImg.setAttribute('class','navi');
	objNaviImg.setAttribute('spry:repeatchildren','images');
	objNaviBox.appendChild(objNaviImg);

	var objNaviPos = document.createElement("div");
	objNaviPos.innerHTML = '{ds_RowNumberPlus1}';
	objNaviPos.setAttribute('onclick',"zoomBox.changeImage('{ds_RowNumber}')");
	objNaviPos.setAttribute('id','zoomBoxImg_{ds_RowNumber}');
	objNaviImg.appendChild(objNaviPos);
	
	var objDesc = document.createElement("div");
	objDesc.setAttribute('id','zoomBoxDesc');
	objNavigation.appendChild(objDesc);
	
	var objClose = document.createElement("div");
	objClose.innerHTML = 'x';
	objClose.setAttribute('onclick',"zoomBox.close()");
	objClose.setAttribute('class','close');
	objDesc.appendChild(objClose);
	
	var objTitle = document.createElement("div");
	objTitle.setAttribute('id','zoomBoxTitle');
	objTitle.innerHTML = ' ';
	objTitle.style.display = 'none';
	objDesc.appendChild(objTitle);
	
	Spry.Data.initRegions('zoomBox');
	
	var fadeCluster = new Spry.Effect.Cluster();
	fadeCluster.addParallelEffect(new Spry.Effect.Fade('overlay',{duration:100,from:0,to:50,toggle:true,setup:this.start,finish:this.end}));
	fadeCluster.addParallelEffect(new Spry.Effect.Fade('zoomBox',{duration:200,from:0,to:100,toggle:true,setup:this.start,
													   finish:function(obj,fadeObj){
														   zoomBox.end(obj,fadeObj);
														   if(zoomBox.visible){
															   zoomBox.changeImage();
														   }else{
															   Spry.Utils.removeClassName('zoomBoxImg_' + zoomBox.activeImage,'sel');
															   zoomBox.activeImage = -1;
														   }
														}}));
	this.fadeEffects[0] = fadeCluster;

}

easytools.zoomBox.prototype.end = function(obj,fadeObj) {
	var opacity = 0;
	if(obj.style.opacity){
		opacity = parseFloat(obj.style.opacity);
	}else{
		var s = /\d+/;
		opacity = parseInt(s.exec(obj.style.filter));
	}
	if(opacity==0) obj.style.display = 'none';
}

easytools.zoomBox.prototype.start = function(obj,fadeObj) {
	var opacity = 0;
	if(obj.style.opacity){
		opacity = parseFloat(obj.style.opacity);
	}else{
		var s = /\d+/;
		opacity = s.exec(obj.style.filter);
	}
	if(opacity==0) obj.style.display = 'block';
}

easytools.zoomBox.prototype.open = function(imageLink,imageNum) {
	if(typeof imageNum == "undefined"){
		this.imageNum = 0;
	}else{
		this.imageNum = imageNum;
	}
	if(typeof images == "undefined" && typeof images != "object") images = new Spry.Data.DataSet();

	if(imageLink.getAttribute('rel') != null && imageLink.getAttribute('rel') != ''){
		var imageArray = new Array;
		if(imageLink.getAttribute('rel') == 'zoomBox'){
			if(imageLink.getAttribute('href')) {
				var img = new Array;
				var href = imageLink.getAttribute('href');
				var path = href.slice(0,href.lastIndexOf("/")+1);
				var file = href.slice(href.lastIndexOf("/")+1);
				img['web'] = file;
				img['@path'] = path;
				img['@title'] = imageLink.getAttribute('title');
				imageArray.push(img);
			}
		}else{
			if (!document.getElementsByTagName) return;
			var anchors = document.getElementsByTagName(imageLink.tagName);
			for (var i=0; i<anchors.length; i++){
				var anchor = anchors[i];
				if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){
					var img = new Array;
					var href = anchor.getAttribute('href');
					var path = href.slice(0,href.lastIndexOf("/")+1);
					var file = href.slice(href.lastIndexOf("/")+1);
					img['web'] = file;
					img['@path'] = path;
					img['@title'] = anchor.getAttribute('title');
					imageArray.push(img);
				}
			}
		}
		//alert(imageArray.length);
		if(imageArray.length) images.setDataFromArray(imageArray);
	}
	if(!images.getRowCount()) return;
	if(!document.getElementById('overlay')) this.init();
	Spry.Data.updateRegion('zoomBox');
	this.visible = true;
	this.onResize();
	window.onresize = this.onResize;
	this.fadeEffects[0].start();
}

easytools.zoomBox.prototype.changeImage = function(imageNum) {
	if(typeof imageNum == "undefined")	imageNum = this.imageNum;
	if(this.activeImage==imageNum) return;
	Spry.Utils.removeClassName('zoomBoxImg_' + this.activeImage,'sel');
	Spry.Utils.addClassName('zoomBoxImg_' + imageNum,'sel');
	this.activeImage = this.imageNum = imageNum;

	var img = Spry.Effect.getElement('zoomBoxImage');

	if(img.style.display!= 'none'){
		var imgFade = new Spry.Effect.Fade('zoomBoxImage',{duration:400,from:100,to:0,toggle:false,
											   finish:function(obj,fadeObj){
												   obj.style.display = 'none';
												   zoomBox.loadImage();
												   document.getElementById('zoomBoxLoader').style.display = 'block';
												   document.getElementById('zoomBoxTitle').style.display = 'none';
											   }});
		imgFade.start();
		return;
	}
	this.loadImage();
}

easytools.zoomBox.prototype.loadImage = function() {
	var row = images.getRowByRowNumber(this.activeImage,true);
	var img = Spry.Effect.getElement('zoomBoxImage');
	var border = this.border;
	
	imgPreloader = new Image();
		
	imgPreloader.onload = function(){
		var yMove = 0;
		var height = imgPreloader.height + 2*(border);
		var width = imgPreloader.width + 2*(border); 
		var navBox = Spry.Effect.getElement('zoomBoxNavigation');
		var zBox = Spry.Effect.getElement('zoomBox');
		var zBoxC = Spry.Effect.getElement('zoomBoxContainer');
		var imgBox = Spry.Effect.getElement('zoomBoxImages');
		var pageSize = getPageSize();
		var pageScroll = getPageScroll();
		var navBoxHeight = navBox.offsetHeight;
		if(zBoxC.offsetHeight < 11) navBoxHeight = 0;
		if(pageSize[3] > (height + navBoxHeight)) yMove = yMove + pageScroll[1] + (pageSize[3] - height - navBoxHeight)/2;

		var cluster = new Spry.Effect.Cluster({finish:function(){
													document.getElementById('zoomBoxLoader').style.display = 'none';
													document.getElementById('zoomBoxNavigation').style.visibility = 'visible';
													zoomBox.setTitle();
													zoomBox.onScaleEnd();
													var imgFade = new Spry.Effect.Fade('zoomBoxImage',{duration:400,from:0,to:100,toggle:false});
													imgFade.start();
												}});
		cluster.addParallelEffect(new Spry.Effect.Move(zBox,Spry.Effect.getPosition(zBox),{x:0,y:yMove,units:"px"},{duration:400}));
		cluster.addParallelEffect(new Spry.Effect.Size(zBoxC,Spry.Effect.getDimensions(zBoxC),{width:width,height:height+navBoxHeight,units:"px"},{duration:400}));
		cluster.addParallelEffect(new Spry.Effect.Size(imgBox,Spry.Effect.getDimensions(imgBox),{width:width,height:height,units:"px"},{duration:400}));
		
		img.src = row['@path'] + row['web'];
		cluster.start();
		//Element.setSrc('lightboxImage', imageArray[activeImage][0]);
		//myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
		imgPreloader.onload=function(){};
	}
	//alert(row['@path'] + row['web']);
	imgPreloader.src = row['@path'] + row['web'];
	
}

easytools.zoomBox.prototype.setTitle = function() {
	var row = images.getRowByRowNumber(this.activeImage,true);
	var titleBox = Spry.Effect.getElement('zoomBoxTitle');
	if(typeof row['@title'] != "undefined"){
		titleBox.innerHTML = row['@title'];
	}else{
		titleBox.innerHTML = '';
	}
	titleBox.style.display = '';
}

easytools.zoomBox.prototype.close = function() {
	this.visible = false;
	var imgFade = new Spry.Effect.Fade('zoomBoxImage',{duration:400,from:100,to:0,toggle:false,finish:function(obj,fadeObj){obj.style.display = 'none';}});
	imgFade.start();
	this.fadeEffects[0].start();
	window.onresize = '';
}

easytools.zoomBox.prototype.onScaleEnd = function() {
	var navBox = Spry.Effect.getElement('zoomBoxNavigation');
	var zBox = Spry.Effect.getElement('zoomBox');
	var zBoxC = Spry.Effect.getElement('zoomBoxContainer');
	var imgBox = Spry.Effect.getElement('zoomBoxImages');
	var height = imgBox.offsetHeight;
	var width = zBoxC.offsetWidth; 

	if(navBox.offsetHeight != (zBoxC.offsetHeight - imgBox.offsetHeight)){
		var yMove = 0;
		var pageScroll = getPageScroll();
		var pageSize = getPageSize();
		if(pageSize[3] > (height + navBox.offsetHeight)) yMove = yMove + pageScroll[1] + (pageSize[3] - height - navBox.offsetHeight)/2;
		
		var move = new Spry.Effect.Move(zBox,Spry.Effect.getPosition(zBox),{x:0,y:yMove,units:"px"},{duration:10});
		var scale = new Spry.Effect.Size(zBoxC,Spry.Effect.getDimensions(zBoxC),{width:width,height:height+navBox.offsetHeight,units:"px"},{duration:20,finish:function(){zoomBox.onResize();}});
		move.start();
		scale.start();
		return;
	}
	this.onResize();
}

easytools.zoomBox.prototype.onResize = function() {
	var arrayPageSize = getPageSize();
	var overlay = Spry.Effect.getElement('overlay');
	var zBox = Spry.Effect.getElement('zoomBox');

	if((zBox.offsetHeight + parseInt(zBox.style.top)) > arrayPageSize[1]){
		overlay.style.height = (zBox.offsetHeight + parseInt(zBox.style.top) + 20) + 'px';
	}else{
		overlay.style.height = arrayPageSize[1] + 'px';
	}
}

easytools.zoomBox.prototype.loadScripts = function() {
	var scripts	= new Object();
	scripts['xpath.js']					= '<script src="typo3conf/ext/easytools/js/spry/xpath.js" type="text/javascript"></script>';
	scripts['SpryData.js']				= '<script src="typo3conf/ext/easytools/js/spry/SpryData.js" type="text/javascript"></script>';
	scripts['SpryEffects.js']			= '<script src="typo3conf/ext/easytools/js/spry/SpryEffects.js" type="text/javascript"></script>';
	
	var script = document.getElementsByTagName("script");
	for(key in scripts){
		var s = 0;
		for(i=0;i<script.length;i++){
			if(script[i].src.indexOf(key)!=-1) s = 1; 
		}
		if(!s) document.write(scripts[key]);
	}
}

function getPageScroll(){
	var xScroll, yScroll;

	if (self.pageYOffset) {
		yScroll = self.pageYOffset;
		xScroll = self.pageXOffset;
	} else if (document.documentElement && document.documentElement.scrollTop){	 // Explorer 6 Strict
		yScroll = document.documentElement.scrollTop;
		xScroll = document.documentElement.scrollLeft;
	} else if (document.body) {// all other Explorers
		yScroll = document.body.scrollTop;
		xScroll = document.body.scrollLeft;	
	}

	arrayPageScroll = new Array(xScroll,yScroll) 
	return arrayPageScroll;
}

function getPageSize(){
	var xScroll, yScroll;
	
	if (window.innerHeight && window.scrollMaxY) {	
		xScroll = window.innerWidth + window.scrollMaxX;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
	
	var windowWidth, windowHeight;
	
	if (self.innerHeight) {	// all except Explorer
		if(document.documentElement.clientWidth){
			windowWidth = document.documentElement.clientWidth; 
		} else {
			windowWidth = self.innerWidth;
		}
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) { // other Explorers
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}	
	
	// for small pages with total height less then height of the viewport
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else { 
		pageHeight = yScroll;
	}

	//alert(document.body.scrollHeight + ' : ' + document.body.offsetHeight + ' : ' + pageHeight + ' : ' + windowHeight + ' : '  + yScroll);
	// for small pages with total width less then width of the viewport
	if(xScroll < windowWidth){	
		pageWidth = xScroll;		
	} else {
		pageWidth = windowWidth;
	}

	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
	return arrayPageSize;
}

zoomBox = new easytools.zoomBox();