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',
				'position': 'absolute',
				'top': top + 'px',
				'left':'0',
				'margin':'0',
				'padding':'0px',
				'width': '100%',
				'height': space,
				'background':'#000',
				'border': '1px solid #AAA',
				'border-left':'none',
				'border-right':'none'
			}
		})

		container.setAttribute('id','container');

		image = new Element('img', { 'styles': {


				'float':'left',
				'visibility':'hidden',
				'display':'block',
				'margin-top':'20px',
				'margin-left':'20px',
				'width': imgWidth,
				'height':imgHeight,
				'background': '#000 url("_images/loading.gif") center center no-repeat',
				'border': '3px solid #FFF',
				'src': hrefSrc,
				'z-index':'1000'
			}
		})

		div = new Element('div', { 'styles': {
				'float':'left',
				'width':'800px',
				'height':'auto',
				'display':'block',
				'margin-top':'20px',
				'margin-left':'20px'
			}
		})

		off = new Element('img', { 'styles': {
				'float':'left',
				'width':'225px',
				'height':'46px',
				'cursor':'pointer'
			}
		})
		off.src="_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(titleContent != "" && $(addContent) != false) {
			div.innerHTML = "<h1>" + titleHead + "</h1><p>" + titleContent + "</p>" + "<p>" + addContentCont + "</p>";
		}else if($(addContent) != false) {
			div.innerHTML = "<h1>" + titleHead + "</h1><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: 200, transition: Fx.Transitions.linear, wait:false}).start(top,top-space);
		div.injectAfter(image);
		off.injectInside(div);
	//	container.makeDraggable();
		return false;
	}
})
})