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.getAttribute('href');
		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',
						'visibility':'hidden',
						'width': '98%',
						'height': space,
						'background':'#000',
						'border': '1px solid #AAA',
						'padding':'0px',
						'left':'3px',
						'margin':'0px',
						'position': 'absolute',
						'top': top + 'px'
					}
			  })
			  
		container.setAttribute('id','container');
			  
			  image = new Element('img', {
			  	'styles':
				{
					'border': '3px solid #FFF',
					'display':'block',
					'visibility': 'hidden',
					'float':'left',
					'background': '#000 url(images/loading.gif) center center no-repeat',
					'margin-top':'20px',
					'margin-left':'20px',
					'height':imgHeight,
					'width': imgWidth,
					'src': hrefSrc,
					'z-index':'1000'
				}			
			})
			
			  div = new Element('div', {
			    'styles':
				{
						'float':'left',
						'width':'300px',
						'height':'auto',
						'display':'block',
						'margin-top':'20px',
						'margin-left':'20px'
						
						
				}
			})
			
			off = new Element('img', {
			  'styles':
			  	{
			  			'float':'left',
						'width':'64px',
						'height':'20px'
						
				}
			
			})		
			  off.src="http://devoox.com/images/close.jpg";
			 off.addEvent('click',function(){
			 	  	  container.effect('opacity',{duration: 700, 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: 200, transition: Fx.Transitions.linear, wait:false}).start(0,1);
		  	  container.effect('opacity',{duration: 700, transition: Fx.Transitions.linear, wait:false}).start(0,0.9);
			  container.effect('top',{duration: 1700, transition: Fx.Transitions.Bounce.easeOut, wait:false}).start(top,top-space);
			  div.injectAfter(image);
			  off.injectInside(div);
			  container.makeDraggable();
			 return false;
		
	}

	})
									})