/** COPYRIGHT 2011 ADMX V.O.F., BAARLE-NASSAU, SCHIJF, THE NETHERLANDS  */

var WizImageZoom = new CLASS({zoomImagesArray: [],loadedImagesArray: [],zoomLayer : null,zoomImage: null,preCssClass : '',cssImageTitle : "img_title",cssImageDescription :  "img_desc",activeImageId: 0,initZoom : true,viewerOpen : false,backgroundOpacity: 80,disableBackgroundTween : false,initialize: function (){this.zoomImagesArray = [];this.loadedImagesArray = [];this.zoomImage = null;this.init();},init : function (){i = 0;var arr = $$('.xm_zoom_overlay');while (arr.length > 0){var item = arr.shift();var obj = {};obj.id = i;item.id = i;obj.zoomPath = item.href;obj.item = item;if (item.removeAttribute){item.removeAttribute('href');item.removeAttribute('target');}obj.title = '';obj.sub = '';var child = item.parentNode;for(var z = 0; z < child.childNodes.length; z++){var elem = child.childNodes[z];if (elem && elem.className){switch(elem.className){case (this.preCssClass + this.cssImageTitle):obj.title = elem.innerHTML;break;case (this.preCssClass + this.cssImageDescription):obj.sub = elem.innerHTML;break;}}}this.zoomImagesArray.push(obj);Event.observe(item, 'click', this.eZoom.bind(this, obj));i++;};},eZoom : function (item, e){if (this.viewerOpen == true){return;}else{this.viewerOpen = true;}if (item == undefined){return;}this.activeImageId = item.id;this.background = Dom.div(document.body, {'class':'zoomImageBackground', 'style':'position: fixed; top: 50%; right: 50%; bottom: 50%; left: 50%;  z-index: 1000; '});Event.observe(this.background, 'click', this.eClose.bind(this));var viewport = document.viewport.getDimensions();var v1 = (viewport.height/2);var v2 = v1;var h1 = (viewport.width/2);var h2 = h1;this.centerPoint = Dom.div(document.body, {'style':'position: fixed; top: 50%; right: 50%; bottom: 50%; left: 50%;  z-index: 1001; '});if (this.disableBackgroundTween == true){with(this.centerPoint.style){}}else{this.tweenCenterTop = new TWEEN(this.centerPoint.style,'top',Tween.regularEaseOut,v2, (viewport.height/2), 0.8,'px').start();this.tweenCenterLeft = new TWEEN(this.centerPoint.style,'left',Tween.regularEaseOut,h2, (viewport.width/2), 0.8,'px').start();}this.contentBox = Dom.div(this.centerPoint, {'class':'zoomImageContainer', 'style':' width: 200px; height: 200px; position: absolute; top: -100px; left: -100px;'});this.imageBox = Dom.div(this.contentBox, {'style':' background: white; overflow: hidden; clear: both; width: 180px; height: 120px; margin: 10px; position: relative; '});this.imageBox.tw = new TWEEN(this.imageBox.style,'width',Tween.regularEaseOut, 0, 120, 1,'px');var self = this;var marPadArr = ['paddingRight','paddingLeft','marginRight', 'marginLeft'];var spaceA = this.getProps(this.contentBox.style, marPadArr) + this.getProps(this.imageBox.style, marPadArr);this.imageBox.tw.onMotionChanged = function (){self.contentBox.style.width = (this._pos + spaceA) + 'px';self.contentBox.style.left = -(this._pos + spaceA)/2 + 'px';for(var i = 0; i < self.loadedImagesArray.length; i++){var imageItem = self.loadedImagesArray[i];imageItem.width = this._pos;}};this.imageBox.tw.start();var o = self.contentBox.style;var pad = ((o.paddingTop)?parseFloat(o.paddingTop):0) + ((o.paddingBottom)?parseFloat(o.paddingBottom):0);var a = self.imageBox.style;var mar = ((a.marginTop)?parseFloat(a.marginTop):0) + ((a.marginBottom)?parseFloat(a.marginBottom):0);var marPadArr = ['paddingTop','paddingBottom','marginTop', 'marginBottom'];var spaceB = this.getProps(this.contentBox.style, marPadArr) + this.getProps(this.imageBox.style, marPadArr);this.alphaLeft = Dom.div(this.contentBox, {'style':'position: absolute; top: 0px;  right: 0px; bottom: 0px; left: 50%; background: white; cursor: pointer;'});Element.setOpacity(this.alphaLeft, 0);Event.observe(this.alphaLeft, 'click', this.ePrev.bind(this));this.buttonPrev = Dom.div(this.contentBox, {'class':'zoomImagePrevious', 'style':'cursor: pointer;'});Event.observe(this.buttonPrev, 'click', this.ePrev.bind(this));this.alphaRight = Dom.div(this.contentBox, {'style':'position: absolute; top: 0px; right: 50%; bottom: 0px; left: 0px; background: white; cursor: pointer; '});Element.setOpacity(this.alphaRight, 0);Event.observe(this.alphaRight, 'click', this.eNext.bind(this));this.buttonNext = Dom.div(this.contentBox, {'class':'zoomImageNext', 'style':'cursor: pointer;'});Event.observe(this.buttonNext, 'click', this.eNext.bind(this));this.buttonClose = Dom.div(this.contentBox, {'class':'zoomImageClose', 'style':'cursor: pointer;'});Event.observe(this.buttonClose, 'click', this.eClose.bind(this));Element.setOpacity(self.buttonNext,0);Element.setOpacity(self.buttonPrev,0);Element.setOpacity(self.buttonClose,0);this.buttonAlphaTween = new OPACITYTWEEN(this.buttonClose, Tween.regularEaseOut,0, 0, 0.8);this.buttonAlphaTween.onMotionChanged = function (){Element.setOpacity(self.buttonNext,this._pos);Element.setOpacity(self.buttonPrev,this._pos);Element.setOpacity(self.buttonClose,this._pos);};this.buttonAlphaTween.start();this.textBox = Dom.div(this.contentBox, {'style':' clear: both; background: white;'});this.textBox.alphaTween = new OPACITYTWEEN(this.textBox, Tween.regularEaseOut,0, 0, 0.8);this.textBox.alphaTween.start();this.imageTitle = Dom.div(this.textBox, {'style':' clear: both; padding: 10px; font-size: 18px; background: white;','class':'imgZoomTitle'});this.imageDescription = Dom.div(this.textBox, {'style':' clear: both; padding: 10px; font-size: 12px; background: white;','class':'imgZoomDesc'});this.imageBox.th = new TWEEN(this.imageBox.style,'height',Tween.regularEaseOut, 0, 120, 1,'px');this.imageBox.th.onMotionChanged = function (){self.contentBox.style.height = (this._pos + spaceB ) + 'px';self.contentBox.style.top = -(this._pos + spaceB)/2 + 'px';for(var i = 0; i < self.loadedImagesArray.length; i++){var imageItem = self.loadedImagesArray[i];imageItem.height = this._pos;}};this.imageBox.th.onMotionStarted = function (){self.textBox.alphaTween.continueTo(0, 0.1);};this.imageBox.th.onMotionFinished = function (){if (self.imageTitle.innerHTML || self.imageDescription.innerHTML){self.textBox.alphaTween.continueTo(100, 0.8);}if (self.buttonAlphaTween){self.buttonAlphaTween.continueTo(100, 1);}};this.imageBox.th.start();if (this.disableBackgroundTween == true){with(this.background.style){top = 0+px;right = 0+px;bottom = 0+px;left = 0+px;}Dom.setOpacity(this.background, this.backgroundOpacity/100);this.tbAlpha = new OPACITYTWEEN(this.background, Tween.regularEaseOut,0.1, this.backgroundOpacity, 0.8).start();}else{this.tbTop = new TWEEN(this.background.style,'top',Tween.regularEaseOut,v1, 0, 0.8,'px').start();this.tbRight = new TWEEN(this.background.style,'right',Tween.regularEaseOut,h2, 0, 0.8,'px').start();this.tbBottom = new TWEEN(this.background.style,'bottom',Tween.regularEaseOut,v2, 0, 0.8,'px').start();this.tbLeft = new TWEEN(this.background.style,'left',Tween.regularEaseOut, h1, 0, 0.8,'px').start();this.tbAlpha = new OPACITYTWEEN(this.background, Tween.regularEaseOut,0, this.backgroundOpacity, 0.8).start();}this.eLoadImage();},ePrev : function (e){this.activeImageId += 1;if (this.activeImageId >= this.zoomImagesArray.length){this.activeImageId = 0;}this.eLoadImage();},eNext : function (e){this.activeImageId -= 1;if (this.activeImageId < 0){this.activeImageId = this.zoomImagesArray.length - 1;}this.eLoadImage();},eLoadImage : function (){var item = this.zoomImagesArray[this.activeImageId];if (item){var image = new Image();Event.observe(image, 'error', this.eImageLoadError.bind(this, image));image.src = item.zoomPath;if (image.complete){this.eImageLoaded(image);}else{Event.observe(image, 'load', this.eImageLoaded.bind(this, image));}}this.imageTitle.innerHTML = item.title;this.imageDescription.innerHTML = item.sub;var marPadArr = ['paddingTop','paddingBottom','marginTop', 'marginBottom'];this.textHeight = 0;if (item.title){this.textHeight += Element.getHeight(this.imageTitle);this.textHeight += this.getProps(this.imageTitle.style, marPadArr);}if (item.sub){this.textHeight += Element.getHeight(this.imageDescription);this.textHeight += this.getProps(this.imageDescription.style, marPadArr);}},eImageLoadError : function (image){Dom.un(image);},eImageLoaded : function (image){var self = this;for(var i = 0;  i < this.loadedImagesArray.length; i++){var item = this.loadedImagesArray[i];if (item && item.alpaTween){item.alpaTween.continueTo(0, 0.8);item.alpaTween.onMotionFinished = function (){this.stop();var item = self.loadedImagesArray.shift();if (item.alpaTween){item.alpaTween = null;}Dom.un(item);};}}image.style.position = 'absolute';this.imageBox.appendChild(image);image.alpaTween = new OPACITYTWEEN(image, Tween.regularEaseOut, 0, 100, 1);image.alpaTween.start();image.align = 'center';var viewport = document.viewport.getDimensions();var viewport = Dom.windowSize();var dim = this.crossCalculate(image.width, image.height, viewport.width - 80, viewport.height - 80 - this.textHeight);this.imageBox.tw.continueTo(dim.width, 1);this.imageBox.th.continueTo(dim.height, 1);this.loadedImagesArray.push(image);},crossCalculate : function (width,height, maxWidth, maxHeight){var f1 = maxWidth * 1 / width ;var f2 = maxHeight * 1 / height;if ((f1 < 1)||(f2 < 1)){if(f1 < f2){width = width * f1;height = height * f1;}else{width = width * f2;height = height * f2;}}return {width:width,height:height};},eClose : function (e){var viewport = document.viewport.getDimensions();if (this.buttonAlphaTween){this.buttonAlphaTween.continueTo(0, 0.2);}var self = this;this.imageBox.tw.continueTo(0, 1);this.imageBox.th.continueTo(0, 1);var item = null;while(item = this.loadedImagesArray.shift()){item.alpaTween.continueTo(0, 0.8);item.alpaTween.onMotionFinished = function (){this.stop();self.eUnload();Dom.un(item);};}if (this.disableBackgroundTween == true){}else{this.tbTop.continueTo((viewport.height/2), 0.8);this.tbRight.continueTo((viewport.width/2), 0.8);this.tbBottom.continueTo((viewport.height/2), 0.8);this.tbLeft.continueTo((viewport.width/2), 0.8);this.tbAlpha.continueTo(0, 1);this.tbAlpha.onMotionFinished = this.eUnload.bind(this);}},eUnload : function (){if (this.disableBackgroundTween == true){}else{this.tbAlpha.stop();this.tbAlpha = null;this.tbTop.stop();this.tbTop = null;this.tbRight.stop();this.tbRight = null;this.tbBottom.stop();this.tbBottom = null;this.tbLeft.stop();this.tbLeft = null;this.buttonAlphaTween.stop();this.buttonAlphaTween = null;}Dom.un(this.background);Dom.un(this.centerPoint);this.viewerOpen = false;},getProps: function (item, arr){var x = 0;for(var i =0; i < arr.length; i++){var key = arr[i];x += (item[key])?parseFloat(item[key]):0;}return x;}});var wizZoomImage;Event.observe(window, 'load', function (){ wizZoomImage = new WizImageZoom(); });