// JavaScript Document
window.addEvent('domready',function(){
var xxx = new Array();

$$('a').each(function(el){
	if(el.getAttribute('rel') == 'designSlide'){
			a = new Image();
			lnk = el.getAttribute('href');
			a.src = lnk;
			xxx.push(a);
			addContent = el.getAttribute('rev');
			
			if($(addContent) != null){
			$(addContent).setStyle('visibility','hidden');
			}
			
	}
})
					  
									
									


$$('a').addEvent('click',function(el){
						  		

	if(this.getAttribute('rel') == "designSlide"){
	el = new Event(el).stop();	
		// preload images
		a = new Image();
		lnk = this.href;
		alert(this.toString());
		a.src = lnk;
		xxx.push(a);
	
		
		// old container still existing? remove it
		if($('container') != null){
			$('container').remove();
		}
		
		//go
		bd = document.body;
		windowHeight = 0;
		windowWidth = 0;
		title = this.getAttribute('title');
		titleSplitPos = title.indexOf("::");
		titleHead = title.substring(0,titleSplitPos);
		lengthContent = title.length + titleSplitPos
		titleContent = title.substring(titleSplitPos+2,lengthContent);
		addContent = this.getAttribute('rev');
		var addContentCont = "";
		
		
		

		if($(addContent) != null){
			addContentCont = $(addContent).innerHTML;
			$(addContent).setStyle('visibility','hidden');	
		}
	
	
		windowHeight = window.getHeight();
		var hrefSrc = this.getAttribute('href');
		var preloadPrev = new Image();
		preloadPrev.src = hrefSrc;
		var imgWidth = preloadPrev.width.toInt();
		var imgHeight = preloadPrev.height.toInt();	
		
		
		var space = imgHeight + 40;
		
		var top =  window.getHeight().toInt() + window.getScrollTop().toInt();
		
		// create a new div with the width of the screen
		container = new Element('div', {
					'styles': 
					{
						'display': 'block',
						'width': 'auto',
						'height': 'auto',
						'background':'#666666',
						'border': 'none',
						'padding':'0px',
						'left':'10px',
						'margin':'0px',
						'position': 'center',
						'top': top + 'px'
					}
			  })
			  
		container.setAttribute('id','container');
			  
			  image = new Element('img', {
			  	'styles':
				{
					'border': 'none',
					'display':'hidden',
					'visibility': 'hidden',
					'float':'left',
					'background': 'none',
					'margin-top':'20px',
					'margin-left':'15px',
					'height':imgHeight,
					'width': imgWidth,
					'src': hrefSrc,
					'z-index':'1000'
				}			
			})
			
			  div = new Element('div', {
			    'styles':
				{
						'float':'center',
						'width':'400px',
						'height':'300px',
						'display':'block',
						'margin-top':'20px',
						'margin-left':'20px'
						
						
				}
			})
	
			
			off = new Element('img', {
			  'styles':
			  	{
			  			'float':'left',
						'width':'120px',
						'height':'30px'
						
				}
			
			})		
			  off.src="images/close.png";
			 off.addEvent('click',function(){
			 	  	  container.effect('opacity',{duration: 400, transition: Fx.Transitions.linear, wait:true}).start(0.9,0).chain(function(){
					  container.remove();
					 })
			 })
			  
			 div.setAttribute('id','info');			
			
			 if($(addContent) != false){
			 div.innerHTML = "<h1>" + titleHead + "</h1><p>" + titleContent + "</p>" + "<p>" + addContentCont + "</p>";
			 }else{
			 div.innerHTML = "<h1>" + titleHead + "</h1><p>" + titleContent + "</p>";
			 }
			
			  image.src = preloadPrev.src;
			  container.injectInside(bd);
			  image.injectInside(container);
			  image.effect('opacity',{duration: 500, transition: Fx.Transitions.linear, wait:false}).start(0,1);
		  	  container.effect('opacity',{duration: 400, transition: Fx.Transitions.linear, wait:false}).start(0,0.9);
			  container.effect('top',{duration: 400, transition: Fx.Transitions.linear, wait:false}).start(0,0.9);
			  div.injectAfter(image);
			  off.injectInside(div);
			  container.makeDraggable();
			 return false;
		
	}

	})
									})