PopupGallery = Class.create();
PopupGallery.prototype = {
	controller: null,

 	initialize: function(items,linkurl) {
		this.items = items;
		this.linkurl = linkurl;
		if (this.items.length>0) {
			this.createPopup();
			this.setDefaults();
			//setTimeout("this.setItemAttributes()",5000);
			// workaround for settimeout with object
			setTimeout(this.delegate(this, this.setItemAttributes), 1000); 
		}
	},
	
	// workaround for settimeout with object
	delegate: function(obj, func){
  	 	return function(){ func.call(obj);}
    },

 	createPopup: function() {
		this.closeBtn = Builder.node('a', {href:'#close', 'class':'close'}, 'Close');
		Event.observe(this.closeBtn, 'click', this.close.bindAsEventListener(this), false);
	
		this.popupimg = Builder.node('div', {'class':'popupimg', border:0});
		//Event.observe(this.popupimg, 'click', this.link.bindAsEventListener(this), false);

		this.popup = Builder.node('div', {'id':'popup', 'class':'popup'}, [
			this.closeBtn,
			this.popupimg,
		]);
		if (window.XMLHttpRequest) {
			this.popupshadow = Builder.node('div', {id:'popupshadow', 'class':'popupshadow'}, [
					Builder.node('img', {src:'http://test.browsbox.be/templates/velda/images/bg_popup_shadow.png', alt:'', border:0})
			]);
		} else { //IE6 only
			this.popupshadow = Builder.node('div', {id:'popupshadow', 'class':'popupshadow'}, [
					Builder.node('img', {src:'http://test.browsbox.be/templates/velda/images/bg_popup_shadow.gif', alt:'', border:0})
			]);
		}
 		document.body.appendChild(this.popupshadow);
 		document.body.appendChild(this.popup);
 	},

 	setDefaults: function() {
		this.defaultWidth = this.popup.offsetWidth;
		this.padleft = parseInt(Element.getStyle(this.popup, 'marginLeft').replace(/px/i,''));
		this.padright = parseInt(Element.getStyle(this.popup, 'marginRight').replace(/px/i,''));

		this.defaultHeight = this.popup.offsetHeight;
		this.padtop = parseInt(Element.getStyle(this.popup, 'marginTop').replace(/px/,''));
		this.padbottom = parseInt(Element.getStyle(this.popup, 'marginBottom').replace(/px/,''));
 	},

 	setItemAttributes: function() {
 		for (var i=0; i<this.items.length; i++) {
 			var item = this.items[i]; 
			item.img = new Image();
			item.img.src = item.href;
			item.img.alt = item.down().alt;
			this.loadit(this, item, i);
 		}
		
	},
	
	loadit: function(evt, item, i) {
 		// store the small size and position for later
//alert('loading');
		var curleft = 0;
		var obj = document.getElementById("logo");
		//alert(obj);
		if(obj.offsetParent) {
			while(1) {
			  curleft += obj.offsetLeft;
			  if(!obj.offsetParent)
				break;
			  obj = obj.offsetParent;
			}
		} else if(obj.x) {
			curleft += obj.x;
		}
		//alert('left = '+curleft);
		//alert(this.width.' - '.this.height.' - '.this.top.' - '.this.left);
		//alert(curleft);
		//this.left = evt.pageX || evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
		//this.left -= this.width/2;
		//this.left = this.left || document.body.getDimensions().width / 2;
		//alert('offsetwidth = '+this.offsetWidth);
		this.width = (item.offsetWidth>80) ? 80 : item.offsetWidth;
		this.height = item.offsetHeight;
		//alert('height='.this.height);
		this.top = evt.pageY || evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
		this.top -= this.height/2;
		
		//alert(this.width.' - '.this.height.' - '.this.top.' - '.this.left);
		
		// stop the default event
 		//Event.stop(evt);
		var toppos = (this.windowSize().height - 323) / 2;
		this.top = toppos;
		//alert(this.left);
		this.left = curleft - 100;
		//alert(this.width+' - '+this.height+' - '+this.top+' - '+this.left);
		this.prepPop(evt, item, i);
 	},

	windowSize: function() {
		var width = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
		var height = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);
		var x = window.pageXOffset || (window.document.documentElement.scrollLeft || window.document.body.scrollLeft);
		var y = window.pageYOffset || (window.document.documentElement.scrollTop || window.document.body.scrollTop);
		

		return {'width':width, 'height':height, 'x':x, 'y':y}
	},

 	setPopPosition: function() {
		// set the position/offset of the image
		var left, top = null;

		left = this.windowSize().x+(this.windowSize().width-this.defaultWidth-this.padleft-this.padright)/2;
		if (this.windowSize().width<this.defaultWidth+this.padleft+this.padright) left = this.windowSize().x-(this.padtop-this.closeBtn.offsetWidth);

		top = this.windowSize().y+(this.windowSize().height-this.defaultHeight-this.padtop-this.padbottom)/2;
		if (this.windowSize().height<this.defaultHeight+this.padtop+this.padbottom) top = this.windowSize().y-(this.padtop-this.closeBtn.offsetHeight);
		
		return { left:left, top:top };
 	},

 	prepPop: function(evt, item, i) {
		// set the source for image in the popup
 		//this.popupimg.src = item.img.src;
		//alert(item.innerHTML);
 		this.popupimg.innerHTML = item.innerHTML;
		this.pop(this.defaultWidth, this.setPopPosition().top, this.defaultHeight, this.setPopPosition().left, item, i);
		
	},

 	beforePop: function() {
		Element.addClassName(this.popup, 'isanim');
		Element.addClassName(this.popupshadow, 'isanim');
 	},

 	pop: function(width, top, height, left, item, i) {
		// prep the popup/shadow for the effect
		this.popup.style.width = this.width+'px';
		this.popupshadow.style.width = this.width+'px';

		this.popup.style.height = this.height+'px';
		this.popupshadow.style.height = this.height+'px';

		this.popup.style.left = this.left+'px';
		this.popupshadow.style.left = this.left+'px';

		this.popup.style.top = this.top+'px';
		this.popupshadow.style.top = this.top+'px';

		Element.setOpacity(this.popup, 0);
		Element.setOpacity(this.popupshadow, 0);

		
		// do the craziness			
		new Effect.Parallel([
				new Effect.MoveBy(this.popup, top-this.top, left-this.left, { sync:true }), 
				new Effect.MoveBy(this.popupshadow, top-this.top, left-this.left, { sync:true }), 
				new Effect.Scale(this.popup, (width/this.width)*100, { sync:true, scaleY:false, scaleContent:false }),
				new Effect.Scale(this.popupshadow, ((width+this.padleft+this.padleft)/this.width)*100, { sync:true, scaleY:false, scaleContent:false }),
				new Effect.Scale(this.popup, (height/this.height)*100, { sync:true, scaleX:false, scaleContent:false }),
				new Effect.Scale(this.popupshadow, ((height+this.padtop+this.padbottom)/this.height)*100, { sync:true, scaleX:false, scaleContent:false }),
				//new Effect.Scale(this.popup, 100, {scaleFromCenter:true, scaleFrom:0 }),
				new Effect.Appear(this.popup, { sync:true }),
				new Effect.Appear(this.popupshadow, { sync:true })
			],
			{ duration:.3, beforeStart:this.beforePop.bind(this), afterFinish:this.afterPop.bind(this, item, i) }
		);
		
	},





 	afterPop: function(item, i) {
		Element.removeClassName(this.popup, 'isanim');
		Element.removeClassName(this.popupshadow, 'isanim');
		Element.addClassName(this.popup, 'popped');
		Element.addClassName(this.popupshadow, 'popped');

		this.popup.style.width = '';
		this.popupshadow.style.width = '';

		this.popup.style.height = '';
		this.popupshadow.style.height = '';

		Element.setOpacity(this.popup, '');
		Element.setOpacity(this.popupshadow, '');
 	},

 	beforeClose: function() {
		Element.addClassName(this.popup, 'isanim');
		Element.addClassName(this.popupshadow, 'isanim');
 		Element.removeClassName(this.popup, 'popped');
 		Element.removeClassName(this.popupshadow, 'popped');
 	},

 	close: function(evt) {
 		if (evt) Event.stop(evt);

		var width = this.defaultWidth;
		var left = this.popup.offsetLeft;
		var height = this.defaultHeight;
		var top = this.popup.offsetTop;
	
		this.beforeClose();
		this.afterClose();
	},
	
	link: function(evt) {	
		window.location=this.linkurl;
	},

 	afterClose: function() {
		Element.removeClassName(this.popup, 'isanim');
		Element.removeClassName(this.popupshadow, 'isanim');

		// reset everything
		this.popup.style.width = '';
		this.popupshadow.style.width = '';

		this.popup.style.height = '';
		this.popupshadow.style.height = '';

		this.popup.style.left = '';
		this.popupshadow.style.left = '';

		this.popup.style.top = '';
		this.popupshadow.style.top = '';

		this.popup.style.display = '';
		this.popupshadow.style.display = '';

		if (AC.Detector.isWebKit()) this.fixSafarisScrollBars();
 	},

 	fixSafarisScrollBars: function() {
		scrollTo = 1;
		window.scroll(this.windowSize().x+scrollTo, this.windowSize().y+scrollTo);
		scrollTo = -scrollTo;
		window.scroll(this.windowSize().x+scrollTo, this.windowSize().y+scrollTo);
 	}

}