var alertBox = new Class({
		Implements: [Options, Events],
		options: {
			width:72,
			height:72,
			title:'',
			classbind: 'simpleModal',
			uid:'',
			currentItem:0,
			project:0,
			disabled:false,
			fxs: []
			},
		initialize: function (options){

			this.uid = Math.random();
			this.setOptions(options);
			this.setupGui();
			this.setProject(this.options.project);
		
			if(this.items.length)
			{
				this.options.width = this.items[0].width + 'px';
				this.options.width = this.items[0].height + 'px';
			}


			$$('.'+ this.options.classbind).each( function (o) { var e = o.getElements('a').each(function(b){ 
																										  if(b.get('target')!='_blank')
																										  this.setupTrigger(b);}.bind(this)); }.bind(this));
		},
		setupGui: function (){
			var me = this;
			var sizes = window.getCoordinates();
			var thescroll = Window.getScrollSize();
			var ov_id = 'Ovl_' + this.uid;
			var ct_id = 'ct_' + this.uid;
			var btn_id = 'btncl_' + this.uid;
			var inCt_id = 'inCtnt_' + this.uid;
			var nxt_id = 'nxt_'+ this.uid;
			var prv_id = 'prv_'+ this.uid;
			var nav_id = 'nav_'+ this.uid;
			var page_dim = this.getPageSize();
			
			//sets up the overlay div
			this.divOverlayBack = new Element('div', { 'id': ov_id , 'class':'allOverlay'});
		//	this.divOverlayBack.setStyles({'width': page_dim[0] + 'px','height':page_dim[1] + 'px'});
			this.divOverlayBack.setStyle('display','none');
			this.divOverlayBack.inject(document.body);

			
			//sets up the wrapper container that holds buttons, navigation and the content per se
			this.divMsg = new Element('div',{ 'id': ct_id ,'class' : 'alertMsgBoxContent'});
			var top = parseInt(sizes.height)/2 - parseInt(this.options.height)/2 + 'px';
			var left = parseInt(sizes.width)/2 - parseInt(this.options.width)/2 + 'px';
			this.divMsg.setStyles({'top': top,'left': left, 'width':parseInt(this.options.width) + 32 +'px', 'height':parseInt(this.options.height) +25 + 'px' });
			this.divMsg.inject(document.body);
			this.divMsg.fade('hide');
			
	
			//sets up the button to close the window
			this.closeBtn = new Element('a', {'html':'','id': btn_id, 'class':'closeButn', 'href':'javascript:'});
			this.closeBtn.inject(this.divMsg);
			this.closeBtn.addEvent('click',function() { this.closeWindow()}.bind(this));
			
			//sets up the content div
			this.divContent = new Element('div',{ 'id': inCt_id , 'class' :'alertContent'});
			this.divContent.setStyles({'width':parseInt(this.options.width) + 'px','height':parseInt(this.options.height) + 'px'});
			this.divContent.inject(this.divMsg);
			
			//sets up the buttons for next, previous and the nav bar
			this.navDiv = new Element('div',{'id': nav_id, 'class': 'navLinks'}).inject(this.divMsg);
			this.navDiv.setStyles({ 'width':parseInt(this.options.width) +'px'});

			this.nextBtn = new Element('a',{'id': nxt_id, 'href':'javascript:', 'html':'', 'class': 'nextLink'}).inject(this.divMsg);
			this.prevBtn = new Element('a',{'id': prv_id, 'href':'javascript:', 'html':'', 'class': 'prevLink'}).inject(this.divMsg);
			this.nextBtn.addEvent('click',function (){this.nextItem()}.bind(this));
			this.prevBtn.addEvent('click',function (){this.prevItem()}.bind(this));
			
			//errormsg div
			this.errorDiv = new Element('div',{'id': 'err_' + this.uid ,'class':'errorMsg', 'html':'Error: Unable to load the item.'});
			this.errorDiv.setStyle('display','none').inject(document.body);
			this.errorDiv.fade('hide');
			var c = window.getCoordinates();
			var s = window.getScroll();
			this.errorDiv.setStyles({'top': s.y + ( c.height/2 - parseInt(this.errorDiv.getStyle('height').replace('px',''))/2)+'px','left':( c.width/2 - parseInt(this.errorDiv.getStyle('width').replace('px',''))/2)+'px'});

			
			// create the tweens to resize the window when needed
			this.tween_wrap = new Fx.Morph(this.divMsg, {'link':'chain'});
			this.tween_msg = new Fx.Morph(this.divContent, {'link':'chain'});
			this.tween_nav = new Fx.Morph(this.navDiv,{'link':'chain'});
		},
		
		//function that brings up the window 
		display: function (){

			if(this.items.length == 1){
				this.navDiv.setStyle('display','none');
				this.nextBtn.setStyle('display','none');
				this.prevBtn.setStyle('display','none');		
				this.divContent.setStyle('border-bottom','10px solid white');
			}
			else
			{
				this.divContent.setStyle('border-bottom','none');
				this.navDiv.setStyle('display','');
				this.nextBtn.setStyle('display','');
				this.prevBtn.setStyle('display','');
			}
			
			this.divContent.addClass('loading');
			this.divContent.set('html','');
			this.resizeToItem();
			setTimeout((function(){ this.setContent(this.options.currentItem)}.bind(this)) ,500);
			this.divOverlayBack.setStyle('display','block');
			this.divMsg.fade('in');
			window.addEvents({'keyup':function (event){ 
													var k = event.key; 
													if(k=='esc')
													{
														event.stop();
														this.closeWindow();
													}
												}.bind(this)
								});
		},
		
		//function to close the modal box
		closeWindow: function (){
			this.divContent.set('html','');
			this.divMsg.fade('hide');
			window.removeEvents('keydown');
			window.removeEvents('mousemove');
			window.removeEvents('resize');
			this.divOverlayBack.setStyle('display','none');
			this.divOverlayBack.removeEvents('click');
		},
		
		//function that fetch the items from the JSON file generator, based on the project id
		getItems: function (id){
			var jsr = new Request.JSON({'data':{'proj':id},'url':'getItems.php', async: false, onComplete: function (rj,rt){ 
																													 	this.items = rj.items;
																													 	this.navDiv.getChildren('a').each(function (o){o.dispose();});
																														for(var i = 0 ; i < this.items.length ; i++)
																														{	
																															var x = new Element('a',{'href':'javascript:','id':'lnkTo_'+this.uid+'_'+ i}).inject(this.navDiv);
																															this.setupLink(x);
																														}
																														}.bind(this)}).send();
		},
		
		//this function resizes the function to the currentItem of the object
		resizeToItem: function (){
			clearTimeout(this.timerErrorHide);
			var c = window.getCoordinates();
			var s = Window.getScroll();
			var i = this.options.currentItem;
			if(this.items[i]){
				 	this.tween_wrap.start({
										 'width':parseInt(this.items[i].width)+ 32+'px',
										  'top':[this.divMsg.getStyle('top').replace('px',''),parseInt(c.height)/2 - this.items[i].height/2 + s.y + 'px'], 
										  'left':parseInt(c.width)/2 -this.items[i].width/2 + 'px' ,
										  'height':parseInt(this.items[i].height)+ 12+'px'
										  });
					this.tween_msg.start({
										 'width':parseInt(this.items[i].width) + 'px',
										 'height':parseInt(this.items[i].height) + 'px'
										 });
					this.tween_nav.start({'width':parseInt(this.items[i].width)+ 'px'});
					//this calculation is not confirmed yet. just a quick and dirty hack
					this.nextBtn.tween('top',(((parseInt(this.items[i].height))/2)+112)*(-1) + 'px');
					this.prevBtn.tween('top',(((parseInt(this.items[i].height))/2)+112)*(-1) + 'px'); 
				this.options.width = this.items[i].width;
				this.options.height = this.items[i].height;				
			}
		},
		setupLink : function (lnk){
											lnk.set('morph',{link:'chain'});
											lnk.addEvent('click', function (){
											if(!this.options.disabled)
											{
											  this.disable();
											  this.goToItem(lnk.get('id').replace('lnkTo_'+this.uid+'_',''));
											}
										}.bind(this));

		},
		setContent: function (i){
			switch(this.items[i].type){
				case 'flash':
					if(!this.contPh)
						this.contPh = new Element('div',{'id':'cph'+this.uid,'html':'&nbsp'}).inject(this.divContent);
					else
						this.contPh.inject(this.divContent);
					this.createFlash(this.items[i].content,this.items[i].width,this.items[i].height);
				break;
				case 'img':
					var newImg = new Element('img',{'src':this.items[i].content});
					newImg.inject(this.divContent);
				break;
				case 'html':
					this.divContent.set('html',this.items[i].content);
				break;
			}
			//this.divContent.removeClass('loading');
			this.divOverlayBack.addEvent('click', function (){ this.closeWindow(); this.hideError(); }.bind(this));
		},
		setProject: function (proj) {
			if(proj != this.options.proj)
			{
				this.options.project = proj;
				this.getItems(proj);
			}
		},
		
		setupTrigger : function (lnk){
			lnk.addEvent('click',function() { if(!this.options.disabled) { 
												 this.disable(); 
												 this.setProject(lnk.get('rel'));  
												 this.goToItem(0); 
												}	}.bind(this));
		},
		goToItem: function (i){
				this.errorDiv.fade('hide');
				if(!this.items[i]) 
						this.displayError("Error: Unable to load the item.");
				else
				{
					this.navDiv.getElements('a').each(function(o) { 
															o.removeClass('current');
															//o.morph({'background-color':'#E5E5E5','border':'3px solid #fff'});
													 }.bind(this));
					this.options.currentItem = i;
					this.display();
					$('lnkTo_'+this.uid+'_'+i).addClass('current');
//			   		$('lnkTo_'+this.uid+'_'+i).morph({'background-color':'#48abe2', 'border':'3px solid #48abe2'});
				}
		},
		displayError: function (err){
			this.divOverlayBack.setStyle('display','block');
			var c = window.getCoordinates();
			var s = window.getScroll();
			var top = s.y + ( c.height/2 - parseInt(this.errorDiv.getStyle('height').replace('px',''))/2)+'px';
			var left = ( c.width/2 - parseInt(this.errorDiv.getStyle('width').replace('px',''))/2)+'px';
			this.errorDiv.set('html',err);
			this.errorDiv.setStyles({'left':left,'top':top,'display':'block','width':'auto','height':'auto'});
			this.errorDiv.fade('in');
			this.timerErrorHide = setTimeout((function (){ this.hideError(); }.bind(this)),3000);
		},
		hideError: function (){
			this.divOverlayBack.setStyle('display','none');
			this.errorDiv.fade('out').addEvent('onComplete',function(){this.errorDiv.setStyle('display','none');}.bind(this));
		},
		nextItem: function (){
			if(!this.options.disabled){
				this.disable();
				var next = (this.items.length - 1 > this.options.currentItem) ? this.options.currentItem + 1:0;
				this.goToItem(next);
			}
		},
		prevItem: function (){
			if(!this.options.disabled){
				this.disable();
				var prev = (this.options.currentItem > 0) ? this.options.currentItem - 1:this.items.length -1;
				this.goToItem(prev);
			}
		},
		getPageSize: function() {
	        	 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 = '100%';
					windowHeight = '100%';
				}	
				
				// for small pages with total height less then height of the viewport
				if(yScroll < windowHeight){
					pageHeight = windowHeight;
				} else { 
					pageHeight = yScroll;
				}
			
				// for small pages with total width less then width of the viewport
				if(xScroll < windowWidth){	
					pageWidth = xScroll;		
				} else {
					pageWidth = windowWidth;
				}
				return [pageWidth,pageHeight];
	},
	createFlash: function (movie,width,height){
			var flashvars = {};
			var params = {};
			params.play = "1";
			params.autoplay = "1";
			params.quality = "autohigh";
			params.allowfullscreen = "true";
			var attributes = {};
			attributes.id = "cont_id"+this.uid;
			swfobject.embedSWF(movie, this.contPh.get('id') , width, height, "9.0.0", false, flashvars, params, attributes);
	},
	disable: function () {
				this.options.disabled=true;
				setTimeout( (function (){ this.options.disabled = false; }.bind(this)),1000);
	}
});