window.addEvent('domready',function(){

	$$('a').each(function(x){
		y = x.getAttribute('rev');
	
		if(navigator.appVersion.indexOf('MSIE') != -1){
			if(y != ""){
				$(y).setStyle('visibility','hidden');
			}
		}else{
			if(y != null){
				$(y).setStyle('visibility','hidden');
			}
		}
	})
})

var xxx = new Array();

$$('a').each(function(el){
	if(el.getAttribute('rel') == "designSlide"){
		
		// preload images
		a = new Image();
		lnk = el.getAttribute('href');
		a.src = lnk;
		xxx.push(a);
	
		el.addEvent('click',function(x){		
		// old container still existing? remove it
		if($('container') != false){
			$('container').remove();
		}
		
		//go
		bd = document.body;
		windowHeight = 0;
		windowWidth = 0;
		title = el.getAttribute('title');
		titleSplitPos = title.indexOf("::");
		titleHead = title.substring(0,titleSplitPos);
		lengthContent = title.length + titleSplitPos
		titleContent = title.substring(titleSplitPos+2,lengthContent);
		addContent = el.getAttribute('rev');
	
		if($(addContent) != false){
			addContentCont = $(addContent).innerHTML;
			$(addContent).setStyle('visibility','hidden');	
		}
	
		nav = navigator.appName;
		windowHeight = window.getScrollTop() ;
		var x = new Event(x).stop();
		var hrefSrc = el.getAttribute('href');
		var preloadPrev = new Image();
		preloadPrev.src = hrefSrc;
		var imgWidth = preloadPrev.width;
		var imgHeight = preloadPrev.height;	
		var space = imgHeight + 40;
		var top = windowHeight;
		
		// create a new div with the width of the screen
		container = new Element('div', {
					'styles': 
					{
						'display': 'block',
						'visibility':'hidden',
						'width': '99%',
						'height': space,
						'background':'#000',
						'border': '1px solid #AAA',
						'padding':'0px',
						'left':'3px',
						'margin':'0px',
						'position': 'absolute',
						'top': top
					}
			  })
			  
		container.setAttribute('id','container');
			  
			  image = new Element('img', {
			  	'styles':
				{
					'border': '3px solid #FFF',
					'display':'block',
					'visibility': 'hidden',
					'float':'left',
					'background': '#000 url(http://www.skaure.net/test/img/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://www.skuare.net/test/img/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: 700, transition: Fx.Transitions.linear, wait:false}).start(windowHeight-40,top);
			  div.injectAfter(image);
			  off.injectInside(div);
			  container.makeDraggable();
			 return false;
		})
	}
})