window.addEvent('domready', function() {
	new Asset.css('css/reset.css', {id: 'reset', title: 'reset'});
	var activated = false;
	var content = $('content');
	var contentdims = content.getSize();
	var fadingdiv = new Element('div', {
						'styles': {
							'position': 'absolute',
							'top': '3px',
							'left': '10px',
							'width': contentdims.size.x,
							'height': contentdims.size.y,
							'background-color': '#30353A',
							'z-index': '4'
						},
						'id': 'fadeingdiv'
					});
	fadingdiv.injectInside('maincontainer').setStyle('opacity', 0);
	var navlinks = $$('#nav a');
	navlinks.each(function(el){
		var styles = el.getStyles('width','height');
		var bg = el.getStyle('background-image');
		var newel = new Element('i', {
						'styles': {
							'position': 'absolute',
							'top': '0',
							'left': '0',
							'display': 'block',
							'width': styles.width,
							'height': styles.height,
							'background-image': bg,
							'background-position': '0 -11px'
						}
					});
		newel.injectInside(el).setStyle('opacity', 0);
		if (el.hasClass('active')) { } else { 
			el.addEvent('mouseenter', function(){ this.getFirst().effect('opacity', {duration: 300, wait:false}).start(1); });
			el.addEvent('mouseleave', function(){ this.getFirst().effect('opacity', {duration: 300, wait:false}).start(0); });
		}
	});
	var footerlinks = $$('#code a, #copy a');
	footerlinks.each(function(el){
		el.addEvent('mouseenter', function(){ 
			this.effect('color', {duration: 300, wait:false}).start('#ffffff'); 
		});
		el.addEvent('mouseleave', function(){ 
			this.effect('color', {duration: 300, wait:false}).start('#bbbdbe'); 
		});
	});
	var contentfadeout = function() {
		$('fadeingdiv').effect('opacity', {duration: 400, wait:false}).start(1);
	}
	var contentfadein = function() {
		$('fadeingdiv').effect('opacity', {duration: 500, wait:false}).start(0).chain(function(){ activated = false; });
	}
	var homefunctions = function() {
		var portopen = $$('#mostrecent a');
		var portopenb = $$('#mostrecent a b');
		portopenb.each(function(el){
			var styles = el.getStyles('width','height');
			var bg = el.getStyle('background-image');
			var newel = new Element('i', {
							'styles': {
								'position': 'absolute',
								'top': '0',
								'left': '0',
								'display': 'block',
								'width': styles.width,
								'height': styles.height,
								'background-image': bg,
								'background-position': '0 -12px'
							}
						});
			newel.injectInside(el).setStyle('opacity', 0);
			portopen.addEvent('mouseenter', function(){ 
				this.getFirst().getFirst().effect('opacity', {duration: 300, wait:false}).start(1);
			});
			portopen.addEvent('mouseleave', function(){ 
				this.getFirst().getFirst().effect('opacity', {duration: 300, wait:false}).start(0); 
			});
			portopen.addEvent('click', function(e){
				e = new Event(e).stop();
				pagenum = 1;
				navlinks.removeClass('active');
				$('portfolio').addClass('active');
				$('fadeingdiv').toggleClass('loading');
				if( activated == true ) { } else {
					activated = true;
					var fade = $('fadeingdiv').effects({duration: 500, wait:false});
					fade.start({
						'opacity': 1
					}).chain(function(){
						getportfolio(url);
					});
				}
			});
		});
		contentfadein();
	}
	var servicefunctions = function() {
		$('service').addEvent('submit', function(e) {
			e = new Event(e).stop();
			var log = $('log').empty().setStyle('opacity', 0);
			this.send({
				update: log,
				onComplete: function() {
					log.effect('opacity', {duration: 500, wait:false}).start(0,1);
				}
			});
		});
		var inputs = $$('input, textarea');
		inputs.each(function(el){
			var inputsfx = new Fx.Styles(el, {duration:200, wait:false});
			el.addEvent('focus', function(){
				inputsfx.start({'background-color': '#65a9f2', 'color': '#FFF', 'border-color': '#65a9f2'});									
			});
			el.addEvent('blur', function(){
				if (el.getProperty('type') == 'submit') {
					inputsfx.start({'background-color': '#232426', 'color': '#fff', 'border-color': '#232426'});
				} else {
					inputsfx.start({'background-color': '#232426', 'color': '#fff', 'border-color': '#5e656b'});
				}
			});
		});
		contentfadein();
	}
	var numpage = 1;
	var pagenum = 1;
	var url = 'php/getjson.php';
	var portfoliofunctions = function () {
		var origurl = 'php/getjson.php';
		url = origurl;
		var prev = new Element('a', { 'href': '#', 'id': 'previous', 'styles': {'opacity': 0},
							   'events': {
								   'click': function(e){
									    e = new Event(e).stop();
										if (activated == true){} else {
											activated = true;
											pagenum = --pagenum;
											url = origurl+'?pagenum='+pagenum;
											$('fadeingdiv').toggleClass('loading');
											var fade = $('fadeingdiv').effects({duration: 500, wait:false});
											fade.start({
												'opacity': 1
											}).chain(function(){
												getportfolio(url);
											});
										}
								   	},
									'mouseenter': function(){
										this.getFirst().effect('opacity', {duration: 200, wait:false}).start(1);
									},
									'mouseleave': function(){
										this.getFirst().effect('opacity', {duration: 200, wait:false}).start(0);
									}
								} 
							});
		var next = new Element('a', { 'href': '#', 'id': 'next', 'styles': {'opacity': 0},
							   'events': {
								   'click': function(e){
									    e = new Event(e).stop();
										if (activated == true){} else {
											activated = true;
											pagenum = ++pagenum;
											url = origurl+'?pagenum='+pagenum;
											$('fadeingdiv').toggleClass('loading');
											var fade = $('fadeingdiv').effects({duration: 500, wait:false});
											fade.start({
												'opacity': 1
											}).chain(function(){
												getportfolio(url);
											});
										}
								   	},
									'mouseenter': function(){
										this.getFirst().effect('opacity', {duration: 200, wait:false}).start(1);
									},
									'mouseleave': function(){
										this.getFirst().effect('opacity', {duration: 200, wait:false}).start(0);
									}
								} 
							});
		var prevbold = new Element('b', {'styles': {'opacity': 0}});
		var nextbold = new Element('b', {'styles': {'opacity': 0}});
		prevbold.injectInside(prev);
		nextbold.injectInside(next);
		if ( pagenum == 1 ){ 
			next.injectInside(content).effect('opacity', {duration: 500, wait:false}).start(1);
		} else if ( pagenum == numpage ) { 
			prev.injectInside(content).effect('opacity', {duration: 500, wait:false}).start(1);
		} else {
			prev.injectInside(content).effect('opacity', {duration: 500, wait:false}).start(1);
			next.injectInside(content).effect('opacity', {duration: 500, wait:false}).start(1);
		}
	}
	var addImage = function(image) {
		var tipid = 'tip' + image.id;
		var insides = '<a class="page" href="'+image.link+'" target="_blank">'+
					  '<img src="images/portfolio/tips/'+image.src+'" alt="'+image.alt+'" /></a>'+
					  '<h3>'+image.alt+'</h3><p>'+
					  '<i>Scope</i>: '+image.scope+'<br /><br />'+
 					  '<i>Details</i>: '+image.details+'<br /><br /><br /></p>'+
					  '<span class="portlink"><a class="back" href="#" id="'+tipid+'c">&lt;&lt; Go back</a> &middot; '+ 
					  '<a href="'+image.link+'" target="_blank">Launch Site</a></span>';
		var el = new Element('div', {'styles': {'opacity': 0}, 'class': 'pitem'});
		var indi = new Element('div', { 'styles': {'opacity': 0}, 'id': tipid, 'class': 'tip' });
		var name = new Element('a', {
							   'href': '#',
							   'events': {
								   		'click': function(e){
											e = new Event(e).stop();
											$(tipid).effect('opacity', {duration: 500, wait:false}).start(1);
										}
								   }
							   }).injectInside(el);
		var img = new Element('img', {'src': 'images/portfolio/' + image.src, 'alt': image.alt}).injectInside(name);
		indi.inject(content).setHTML(insides);
		el.inject(content).effect('opacity', {duration: 500, wait:false}).start(1);	
		$(tipid+'c').addEvent('click', function(e){
			e = new Event(e).stop();
			$(tipid).effect('opacity', {duration: 500, wait:false}).start(0);
		});
	}
	var getpages = function(pages) {
		pages.each(function(page) {
			numpage = page.numpages;
		});
	}
	var requestpages = new Json.Remote('php/getjson.php?pages=get', {
		onComplete: function(jsonObj) {
			getpages(jsonObj.pages);
		}
	}).send();
	var getportfolio = function(path){
		var request = new Json.Remote(path, {
			onComplete: function(jsonObj) {
				var jsonimgs = jsonObj.portfolio;
				var myChain = new Chain();
				content.empty();
				$('fadeingdiv').setStyle('opacity', 0);
				$('fadeingdiv').toggleClass('loading');
				jsonimgs.each(function(image) { myChain.chain( function(){ addImage(image); } ); });
				var runChain = function() { 
					myChain.callChain();
					if (myChain.chains.length == 0) { runChain = $clear(timer); } 
				}
				var timer = runChain.periodical(700);
				portfoliofunctions();
			}
		}).send();
		activated = false;
	}
	var dbsubmitfunctions = function() {
		$('formpop').effect('left', {duration: 500, wait:false, transition: Fx.Transitions.Quart.easeOut}).start(0);
		$('upload').addEvent('submit', function(e) {
			e = new Event(e).stop();
			var log = $('dblog').empty().setStyle('opacity', 0);
			this.send({
				update: log,
				onComplete: function() {
					log.effect('opacity', {duration: 500, wait:false}).start(0,1);
				}
			});
		});
	}
	var ajaxhome = new Ajax('xml/index.xml', {method: 'get', update:$('content'), onComplete:homefunctions});
	var ajaxservices = new Ajax('xml/services.xml', {method: 'get', update:$('content'), onComplete:servicefunctions});
	var ajaxdbsubmit = new Ajax('xml/dbsubmit.xml', {method: 'get', update:$('formpop'), onComplete:dbsubmitfunctions});
	var navlinks = $$('#home, #portfolio, #services');
	$$('#home, h1 a').addEvent('click', function(e){ 
		e = new Event(e).stop();
		navlinks.removeClass('active');
		$('home').addClass('active');
		if( activated == true ) { } else {
			activated = true;
			var fade = $('fadeingdiv').effects({duration: 500, wait:false});
			fade.start({
				'opacity': 1
			}).chain(function(){
				ajaxhome.request();
			});
		}
	});
	$('services').addEvent('click', function(e){ 
		e = new Event(e).stop();
		navlinks.removeClass('active');
		this.addClass('active');
		if( activated == true ) { } else {
			activated = true;
			var fade = $('fadeingdiv').effects({duration: 500, wait:false});
			fade.start({
				'opacity': 1
			}).chain(function(){
				ajaxservices.request();
			});
		}
	});
	$('portfolio').addEvent('click', function(e) {
		e = new Event(e).stop();
		pagenum = 1;
		navlinks.removeClass('active');
		this.addClass('active');
	
		$('fadeingdiv').toggleClass('loading');
		if( activated == true ) { } else {
			activated = true;
			var fade = $('fadeingdiv').effects({duration: 500, wait:false});
			fade.start({
				'opacity': 1
			}).chain(function(){
				getportfolio(url);
			});
		}
	});
	var imopen = false;
	document.onkeydown = function(event){
		var event = new Event(event);
		if (event.key == 'q' && event.control) {
			if (imopen == false){
				imopen = true;
				ajaxdbsubmit.request();
			} else {
				imopen = false;
				$('formpop').effect('left', {duration: 500, 
									wait:false, transition: Fx.Transitions.Quart.easeOut}).start(-400);
			}
		}
	}
	homefunctions();
});