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

//Set up zoom for non-portfolio thumbnails.  <img> needs class "classy"

classyimages = $$('.classy');
for(a=0;a<classyimages.length;a++) {
	classyid = 'classy'+a;
	classyimages[a].setProperty('id',classyid);
	classyimages[a].setStyle('cursor','pointer');
	
	classyimages[a].addEvent('click', function(e) {
		e = new Event(e).stop();
		src = this.getProperty('src');
		id = this.getProperty('id');
		classyZoom(src, id);
	});
}

if($('pages')) {
		var page = $$('#pages .page');
		var tab = $$('#tabnav .tab');
		
		//Initialize page margin
		var k = 0;
		
		//Adjust tabs to look like pages
		for(i=0;i<page.length;i++) {
			margin = -page.length+k;
			page[i].setStyles({
				'margin-left': margin,
				'margin-top': margin
			});
			
			//Offset next page
			k=k-2;
			
		}
		
		//Remove border from col2 if page has tabbed content
		if($$('.qgtabs')[0]) {
			$$('.col2')[0].setStyle('border','none');
		}
			
		//Add events to the tabs to pop up pages
		for(i=0;i<tab.length;i++) {
			if(i==0) {
				
				firstId = $$('.tab')[0].getProperty('id');
				pageId = firstId.replace(/_tab/, "");
				for(l=0;l<$$('#'+pageId+' img').length;l++) {
					var clone = $$('#'+pageId+' img')[l].clone().injectInside('projects');
					imageId = 'project'+l;
					$$('#projects img')[l].setProperty('id', imageId);
					src = $$('#projects img')[l].getProperty('src');
					src = src.substr(0, src.length-8) + ".jpg";

					$$('#projects img')[l].addEvent('click', function() {
						imageId = this.getProperty('id');
						src = this.getProperty('src');
						classyZoom(src, imageId);
					});
				}
			}
		
			$$('#tabnav .tab')[i].addEvent('click', function (e) {
				e = new Event(e).stop();
				myId = this.getProperty('id');
				pageId = myId.replace(/_tab/, "");
				for(j=0;j<page.length;j++) {
					$$('#pages .page')[j].setStyle('z-index', 999);
				}

				$(pageId).setStyle('z-index', 1001);

				if ($('projects')) {
					$('projects').empty();
					for(l=0;l<$$('#'+pageId+' img').length;l++) {
						var clone = $$('#'+pageId+' img')[l].clone().injectInside('projects');
						imageId = 'project'+l;
						$$('#projects img')[l].setProperty('id', imageId);
						src = $$('#projects img')[l].getProperty('src');
						src = src.substr(0, src.length-8) + ".jpg";

  						$$('#projects img')[l].addEvent('click', function() {
							imageId = this.getProperty('id');
							src = this.getProperty('src');
							classyZoom(src, imageId);
						});
					}
					//alert('Images Transferred');
				}	
			});
		}
	}
});

function classyZoom(src, id) {
	//If large preview in the page still exists remove it
	if($('largeProject')) {
		$('largeProject').remove();
	}
	
	//Initialize Positioning
	sw = window.getWidth();
	sh = window.getHeight();
	st = window.getScrollTop();
	//IE6 Quirks mode mootools window.size fix
	if(window.ie6 && sw==0 && sh==0) {
		sw = document.body.clientWidth;
		sh = document.body.clientHeight;
		st = document.body.scrollTop;
	}
	
	//alert(sw+" "+sh);
	$(id).clone().setProperties({
		'id': 'largeProject', 
		'style': {
			'display': 'none'
			}
	}).injectInside($$('body')[0]);
	
	//Add event to large preview to scale out the div
	$('largeProject').addEvent('click', function(e) {
		e = new Event(e).stop();
		var oi = $(id).getCoordinates();
		var scaleImage = new Fx.Styles(this, {duration: 300, transition: Fx.Transitions.Quad.easeInOut});
		scaleImage.start({
			'height': [oi.height-3],
			'width': [oi.width-3],
			'left': [oi.left-3],
			'top': [oi.top-3],
			'padding': [3]
		}).addEvent('onComplete', function() {
			//alert('element removed');
			$('largeProject').remove();
		});
	});
	
	$('largeProject').removeProperty('height');
	$('largeProject').removeProperty('width');
	
	//Find center
	centerX = ((sw/2)-325).round();
	centerY = ((sh/2)-250+st).round();
	if(centerY<0) {centerY=st;}
	
	//Get original element's position
	var op = $(id).getCoordinates();
	//alert("w: "+op.width+", h: "+op.height+", x: "+op.left+", y: "+op.top);
	$('largeProject').setStyles({
		'width': 120,
		'height': 120,
		'position': 'absolute',
		'top': op.top-3,
		'left': op.left-3,
		'z-index': 2000,
		'opacity': 1,
		'display': 'block',
		'padding': 3
	});
	
	var scaleImage = new Fx.Styles('largeProject', {duration: 500, transition: Fx.Transitions.Back.easeOut});
	scaleImage.start({
    	'height': [550],
    	'width': [650],
    	'left': [centerX],
    	'top': [centerY],
    	'padding': [10],
    	'opacity': [1]
	});
}