window.addEvent('domready', function() {
	
	if($('jump').get('value') == "404") $('jump').set('value', '');

	var myScroller = new Scroller('thumbs', {area: 15, velocity: 0.05});
	myScroller.start();
	
	
	
	
	////////////////////////////////////
	//
	// Contact form
	//
	////////////////////////////////////
 	
 	$('contactHit').addEvent('click', function() {
		
		$('header').setStyle('height', '36px');
		$('contactFormBox').tween('height', '550px');
		$('contactFormBox').setStyles({'border-top': '5px solid #000', 'border-bottom': '5px solid #000'});
	 	

 	});
 	
 	if($('contactClose')) {
	 	$('contactClose').addEvent('click', function() {
				
				$('contactFormBox').tween('height', '0px');
				$('contactFormBox').setStyles({'border-top': '0', 'border-bottom': '0'});
		 	
		 	});
 	}
	
	$('shareLinkBox').addEvent('click', function() {
		
		this.selectRange(0,50);
	
	});
	




	////////////////////////////////////
	//
	// Horizontal Panels
	//
	////////////////////////////////////
	function thumb_borders() {
		$$('.photoThumb').each(function(element) {
					element.setStyles({'border-width': '1px', 'border-color': '#171b1d', 'height': '48px', 'width': '48px'});
		});	
	};

	// Trigger corresponding photo set load based off new window size
	window.addEvent('resize', function() {
		
	
		var size = window.getSize();
		//if(size.y < 300) window.setStyle('height', '300');
		
		var key = $('currentPhoto').get('html');
		var thisPage = $('page').get('html');
		var thisStart = $('start').get('html');
		
		$('wrap').setStyle('width', size.x);
		
		new Request.JSON({
			url: '/loadData.php',
			method: 'get',
			onComplete: function(data){
				
				data.each(function(item) {
					
					$('shareLinkBox').set('value', 'http://heymatei.com/'+item.feature+'/'+item.photo_id);
					$('infoTitle').set('html', item.title);
					$('infoDesc').set('html', item.description);
					thumb_borders();
					$("th"+item.photo_id).setStyles({'border-width': '3px', 'border-color': '#b8cad1', 'height': '44px', 'width': '44px'});
					
							new Request.JSON({
							url: '/loadData.php',
							method: 'get',
							onComplete: function(data){
								if(data) {
									$('comments').setStyle('display', 'none');
									data.each(function(item) {
									
									});
								} else {
									$('comments').setStyles({'display': 'none', 'width': '100px', 'height': '50px'});
								}
												
							}
						}).get({'page': thisPage, 'show': 'comments', 'key': key});

					
					$('wrap').setStyle('opacity', 1);
					$('wrap').setStyle('background-image', 'url(\'/img/spinner.gif\')');
					
						var thisImg = Asset.image(item.path, {
							onLoad: function() {
								$('wrap').setStyle('opacity', 0);
								$('wrap').setStyle('background-image', 'url(\''+item.path+'\')');
								$('wrap').tween('opacity', 1);
							
							}
						});

						
				});
								
			}
		}).get({'page': thisPage, 'size': size.y, 'width': size.x, 'key': key});

	});

	window.fireEvent('resize');

	$$('.photoThumb').each(function(element) {
		element.addEvent('mouseover', function() {
			
			var cur = $('currentPhoto').get('html');
			
			if(this.get('id') != cur) {
				thumb_borders();
				
				var curID = this.get('id');
				curID = curID.replace("th", "");
				$('currentPhoto').set('html', curID);
				$('wrap').tween('opacity', 0);
				window.fireEvent('resize');
			}
		});
	
	});

	$('info').addEvents({'mouseover': function() {
	
								var infoH = $('infoShow').getSize();
							
								$('info').setStyles({'width': '510px', 'height': infoH.y});
							
							}, 'mouseout': function() {
								
								$('info').setStyles({'width': '100px', 'height': '50px'});
	
						}});

	$('comments').addEvents({'mouseover': function() {
	
							
								if($('commentShow').get('html').length > 10) $('comments').setStyles({'width': '710px', 'height': '500px'});
							
							}, 'mouseout': function() {
								
								$('comments').setStyles({'width': '100px', 'height': '50px'});
	
						}});
	
	
	
	
	$('controls').addEvents({'click': function() {
								var slideState = $('slide').get('html');
								
								if(slideState == "stop") {
									$('controls').setStyle('background-image', "url('/img/control_pause.png')");
									$('slide').set('html', 'play');
									player = play.periodical(5000);
								} else {
									$('controls').setStyle('background-image', "url('/img/control_play.png')");
									$('slide').set('html', 'stop');
									player = $clear(player);
								}
							
							},
							'mouseover': function() {
								$('controls').setStyles({'background-color': '#ffffff', 'background-color': 'rgba(184,202,209,0.1)'});
							},
							'mouseout': function() {
								$('controls').setStyles({'background-color': '#000000', 'background-color': 'rgba(0,0,0,0.1)'});
							}
	
	
				});
	
	$('wrap').addEvent('click', function() {
		$('controls').setStyle('background-image', "url('/img/control_play.png')");
		$('slide').set('html', 'stop');
		player = $clear(player);
	});
	
	function moveSlide(direction) {
	
		var key = $('currentPhoto').get('html');
		var thisPage = $('page').get('html');
		var category = $('category').get('html');
		new Request.JSON({
		url: '/loadData.php',
		method: 'get',
		onComplete: function(data){
			thumb_borders();
			$('currentPhoto').set('html', data);
			window.fireEvent('resize');
		}
		}).get({'page': thisPage, 'category': category, 'show': direction, 'key': key});

	
	};
	
		var play = function slideshow() {
				moveSlide("next");
		};


	$('controlLeft').addEvents({'mouseover': function() {
									$('controlLeft').setStyle('background-image', "url('/img/control_left.png')");
								},
								'mouseout': function() {
									$('controlLeft').setStyle('background-image', "none");
								},
								'click': function() {
									//$('wrap').setStyle('background-image', 'url(\'/img/spinner.gif\')');
									moveSlide("prev");
								}
								});

	$('controlRight').addEvents({'mouseover': function() {
									$('controlRight').setStyle('background-image', "url('/img/control_right.png')");
								},
								'mouseout': function() {
									$('controlRight').setStyle('background-image', "none");
								},
								'click': function() {
									//$('wrap').setStyle('background-image', 'url(\'/img/spinner.gif\')');
									moveSlide("next");
								}
								});








	////////////////////////////////////
	//
	// Header Menu & Icons
	//
	////////////////////////////////////
 
	// Expand header content on mouseOver
	$('header').addEvents({
				'mouseover': function() {
				
					$('header').tween('height', '180px');
				},
				'mouseout': function() {
				
					$('header').tween('height', '36px');
				}
	
	
			});


	// Facebook
	$('ifb').addEvents({
				'mouseover': function() {
					this.set('src', '/img/facebookOn.png');
				},
				'mouseout': function() {
					this.set('src', '/img/facebook.png');
				}
			});

	// Twitter
	$('itw').addEvents({
				'mouseover': function() {
					this.set('src', '/img/twitterOn.png');
				},
				'mouseout': function() {
					this.set('src', '/img/twitter.png');
				}
			});

	////////////////////////////////////
	//
	// Form validation
	//
	////////////////////////////////////

	$('submitbutton').set('disabled', 'disabled');
	
	$('contactForm').fireEvent('keyup');
	
	$('contactForm').addEvents({"keyup": function() {
		
		var name = getValue("name");
		var email = getValue("email");
		var body = getValue("body");

		var errors = true;
		if(validate("text", "name", name, false)) errors = false;
		if(validate("text", "body", body, false)) errors = false;
		
		if(validate("email", "email", email, false)){
			errors = false;
		} 				

				
		if(errors) {
				
				$('submitbutton').set('disabled', '');
				$('submitTxt').set("html", "").setStyle("border", "0");
							
				
			} else {
				$('submitbutton').set('disabled', 'disabled');
				$('submitTxt').set("html", "Your form is incomplete! Fields are empty, invalid, or too short. Make sure you fill in all the fields.");
			}
		
	}, "submit": function(event) {
		event.preventDefault();
		
		var fName = getValue("name");
		var fEmail = getValue("email");
		var fBody = getValue("body");
	
				new Request.JSON({
					url: '/submitData.php',
					method: 'get',
					onComplete: function(data) {
					
							$('contactFormBox').set('html', '<h2>Success</h2><p>Your message has been sent!</p>');
							new Element('p').set({'html': '( Close Panel )', 'id': 'contactClose'})
								.addEvent('click', function() {
									
									$('contactFormBox').tween('height', '0px');
									$('contactFormBox').setStyles({'border-top': '0', 'border-bottom': '0'});

								})
								.inject($('contactFormBox', 'bottom'));
						
						}
					}).get({'page': 'contact', 'name': fName, 'email': fEmail, 'body': fBody});	
	
		}
	});
	
	
	function getValue(item) {
		return $(item).get('value');
	};
	
	function setValue(item, color) {
		return $(item).setStyle('border-left', "6px solid "+color);
	};
	
	function validate(type, item, value, value2) {
		
		var pass = false;
		if(type == "text") {
			if(value.length > 1) {
				setValue(item, "#01cf14");
				pass = true;
			} else { setValue(item, "#FF0000"); }
		}
		else if(type == "email") {
			
			if(value.length > 7 && value.contains('@') && value.contains('.') && value != "" && value != " ") {
						setValue("email", "#01cf14");
						pass = true;
					} else { 
						setValue("email", "#FF0000");
					}	
				
			
		}
		else if(type == "email2") {
			
			if(value == value2 && value2 != "") {
				setValue("email2", "#01cf14");
				pass = true;
			} else { 
				setValue("email2", "#FF0000");
				}
			
		}
		else if(type == "email3") {
			
			if(value.length > 7 && value.contains('@') && value.contains('.') && value != "" && value != " ") {
					var joinData = new Request.JSON({
					url: '/joinData.php',
					method: 'get',
					onComplete: function(data){
						if(data != 0) {
							$('invalidEmail').set("html", "E-mail already registered.");
							setValue("email", "#FF0000");
						}
					}
				}).get({'key': value, 'item': 'all'});
			}
			
			

			
			
			
		}
		else if(type == "password") {
			
			if(value.length > 5 && value != "" && value != " ") {
				setValue("pass", "#01cf14");
				pass = true;
			} else { 
				setValue("pass", "#FF0000");
				}
			
		}
		else if(type == "password2") {
			
			if(value == value2 && value2 != "") {
				setValue("pass2", "#01cf14");
				pass = true;
			} else { 
				setValue("pass2", "#FF0000");
				}
			
		}
		if(pass) return false;
		else return true;
	}







});