/**
 * @project: MOSAIC
 * @location: Wax Interactive - www.wax.be
 * @date: 07.06.2010
 * @author: Jan De Wilde
 * @description: Core logic
 */

if(typeof $.MOSAIC == "undefined") {
	$.MOSAIC = Object;
}

$.MOSAIC.init = {
	construct		:		function(){
		$.MOSAIC.searchFor.construct();
		$.MOSAIC.map.construct();
		
		var origVal = $('#image').val();
		$('#image').bind({
			focus	:	function(){
				if($(this).val() == origVal) {
					$(this).val('');
				}
			},
			blur	:	function(){
				if($(this).val() == '') {
					$(this).val(origVal);
				}
			}
		});
		
		/* Name */
		var origName = $('#name').val();
		$('#name').bind({
			focus	:	function(){
				if($(this).val() == origName) {
					$(this).val('');
				}
			},
			blur	:	function(){
				if($(this).val() == '') {
					$(this).val(origName);
				}
			}
		});
		
		/* E-mail addresses */
		var origFriend1 = $('#friend1').val();
		$('#friend1').bind({
			focus	:	function(){
				if($(this).val() == origFriend1) {
					$(this).val('');
				}
			},
			blur	:	function(){
				if($(this).val() == '') {
					$(this).val(origFriend1);
				}
			}
		});
		
		var origFriend2 = $('#friend2').val();
		$('#friend2').bind({
			focus	:	function(){
				if($(this).val() == origFriend2) {
					$(this).val('');
				}
			},
			blur	:	function(){
				if($(this).val() == '') {
					$(this).val(origFriend2);
				}
			}
		});
		
		var origFriend3 = $('#friend3').val();
		$('#friend3').bind({
			focus	:	function(){
				if($(this).val() == origFriend3) {
					$(this).val('');
				}
			},
			blur	:	function(){
				if($(this).val() == '') {
					$(this).val(origFriend3);
				}
			}
		});
		
		$('#btnSendSubmit').bind('click',function(){
			$(this).attr('disabled','disabled');
			$('form input').removeClass('error');
												  
			var allOK = true;

			var name = $('#name').val();
	
			if(name != '' && name != origName) {
				allOK = true;
			} else {
				allOK = false;
				$('#name').addClass('error');
			}

			var friend1 = $('#friend1').val();
			var friend2 = $('#friend2').val();
			var friend3 = $('#friend3').val();

			var objRE = /^[\w-\.\']{1,}\@([\da-zA-Z-]{1,}\.){1,}[\da-zA-Z-]{2,}$/;

			if(friend1 != '' && friend1 != origFriend1) {
				if(objRE.test(friend1)) {
					allOK = true;
				} else {
					allOK = false;
					$('#friend1').addClass('error');
				}
			} else {
				allOK = false;
				$('#friend1').addClass('error');
			}
			
			if(friend2 != '' && friend2 != origFriend2) {
				if(objRE.test(friend2)) {
					allOK = true;
				} else {
					friend2 = '';
					allOK = false;
					$('#friend2').addClass('error');
				}
			} else {
				friend2 = '';
			}
			
			if(friend3 != '' && friend3 != origFriend3) {
				if(objRE.test(friend3)) {
					allOK = true;
				} else {
					friend3 = '';
					allOK = false;
					$('#friend3').addClass('error');
				}
			} else {
				friend3 = '';
			}

			if(allOK) {
				var ajaxUrl = 'mail.php';
				if($('#pagesHolder').hasClass('DE')) {
					ajaxUrl = 'mail_de.php';
				}
				
				$.ajax({
					url: ajaxUrl,
					type: 'POST',
					data: 'name='+name+'&friend1='+friend1+'&friend2='+friend2+'&friend3='+friend3+'&id='+$('#uniqueid').val()+'&day='+$('#mosaicWrapper').attr('class')+'&image='+$('#winnerImage').val(),
					success: function(msg) {
						$('#name').val(origName);
						$('#friend1').val(origFriend1);
						$('#friend2').val(origFriend2);
						$('#friend3').val(origFriend3);
						$('#sendToFriend form').fadeOut("fast");
						if($('#pagesHolder').hasClass('EN')) {
							$('#sendToFriend .Padding').append('<p>Thank you for doing this!</p>');
						} else {
							$('#sendToFriend .Padding').append('<p>Danke f&uuml;r Ihre Teilnahme!</p>');
						}
					},
					error: function(msg) {
					}
				});
				$(this).attr('disabled','');
			} else {
				$(this).attr('disabled','');
			}
			return false;
		});
	}
}

$.MOSAIC.searchFor = {
	construct		:		function() {
		$('#btnSearchSubmit').bind('click',function(event){
			$.MOSAIC.searchFor.thisName();
			event.preventDefault();
		});
	},

	thisName		:		function(){
		var noMatch = true;
		var searchForThis = $('#image').val();
		$('#overlay, .overlay').remove();
		$('#mozError').remove();
		if($('#image').val()) {
			var counter = 0;
			var hasClicked = false;
			var weHaveAWinner = false;
			var winnerImage = '';
			var image = '';
			$('map area').each(function(index){
				var hrefParts = $(this).attr('href').split("/");
				var number = hrefParts[hrefParts.length-1].replace(".jpg","").replace(".JPG","");
				number = number.substr(number.length-searchForThis.length);
				if(number == searchForThis && !weHaveAWinner) {
					winnerImage = hrefParts[hrefParts.length-1];
					var location = window.location+'';
					var locationParts = location.split("#");
					location = locationParts[0].replace("index.html","").replace("index_de.html","");
					image = location+'public/moz/'+$('#mosaicWrapper').attr('class')+'/tiles/'+winnerImage;
					$('#winnerImage').val(image);
					
					var coordsArr = $(this).attr('coords').split(',');
					var width = coordsArr[2] - coordsArr[0];
					var height = coordsArr[3] - coordsArr[1];
					var overlayName = 'overlay'+index;
					$('#mosaicWrapper').append('<div id="'+overlayName+'" class="overlay hint"></div>');
					$('#'+overlayName).css({
						position: 'absolute',
						left: coordsArr[0]+'px',
						top: coordsArr[1]+'px',
						width: width-6+'px',
						height: height-5+'px'
					}).bind('click',function(){
						if($('#'+overlayName+' #imgHolder').length == 0) {
							//$(this).removeClass('hint');
							//hasClicked = true;
							$('#overlay').remove();
							var newImg = new Image();
							$(newImg)
							.load(function() {
								var appendE = '<div id="imgHolder"></div>';
								$('#'+overlayName).append(appendE);
								$('#'+overlayName+' #imgHolder').css({
									position:'absolute'
								});

								$(this).hide();
								$('#imgHolder')
								.append(this);
								
								var imgW = $(this).width();
								var imgH = $(this).height();

								var overlayX = parseInt($('#'+overlayName).css('left').replace("px",""));
								var toTheLeft = $('#mosaicWrapper').width() - (overlayX + imgW);
								
								var overlayY = parseInt($('#'+overlayName).css('top').replace("px",""));
								var toTheTop = $('#mosaicWrapper').height() - (overlayY + imgH);

								if(toTheLeft < 0 && toTheTop < 0) {
									$('#'+overlayName+' #imgHolder')
									.animate({
										left: toTheLeft-3,
										top: toTheTop-3,
										width:imgW,
										height:imgH
									},'slow');
								} else if(toTheLeft < 0) {
									$('#'+overlayName+' #imgHolder')
									.animate({
										left: toTheLeft-3,
										width:imgW,
										height:imgH
									},'slow');
								} else if(toTheTop < 0) {
									$('#'+overlayName+' #imgHolder')
									.animate({
										top: toTheTop-3,
										width:imgW,
										height:imgH
									},'slow');
								} else {
									$('#'+overlayName+' #imgHolder')
									.animate({
										width:imgW,
										height:imgH
									},'slow');
								}
								
								$(this)
								.fadeIn()
								.css('display','inline');

							})
							.error(function(){})
							.attr('src',image);
						}
					});
					weHaveAWinner = true;
					noMatch = false;
				}
			});
		}
		if(noMatch){
			$('#mozError').remove();
			if($('#pagesHolder').hasClass('EN')) {
				$('#moz').append('<div id="mozError"><h4 class="Red ParasinePlus BoldItalic">Whoops, Not Found</h4><p>Are you sure this is the correct number?</p></div>');
			} else {
				$('#moz').append('<div id="mozError"><h4 class="Red ParasinePlus BoldItalic">Ups, nicht gefunden</h4><p>sind Sie sicher, dass Sie die richtige Nummer eingegeben haben?</p></div>');
			}
			Cufon.refresh('h4');
			$('#sendToFriend').fadeOut();
		} else {
			$('#uniqueid').val($('#image').val());
			$('#sendToFriend').fadeIn();
		}
	}
}

$.MOSAIC.map = {
	construct		:		function(){
		$.MOSAIC.map.area();
	},

	area			:		function(){
		$('map area').bind('click',function(event){
			var href = $(this).attr('href');
			var coords = $(this).attr('coords');
			$.MOSAIC.map.openMap(this);
			event.preventDefault();
		});
	},
	
	openMap			:		function(area){
		$('#overlay, #imgHolder').remove();
		var hrefParts = $(area).attr('href').split("/");
		var winnerImage = hrefParts[hrefParts.length-1];
		var coordsArr = $(area).attr('coords').split(',');
		var width = coordsArr[2] - coordsArr[0];
		var height = coordsArr[3] - coordsArr[1];
		var overlayName = 'overlay';
		var hasClicked = false;
		$('#mosaicWrapper').append('<div id="'+overlayName+'" class="overlay"></div>');
		$('#'+overlayName).css({
			position: 'absolute',
			left: coordsArr[0]+'px',
			top: coordsArr[1]+'px',
			width: width+'px',
			height: height+'px'
		}).bind('click',function(){
			if(!hasClicked) {
				hasClicked = true;
				var location = window.location+'';
				var locationParts = location.split("#");
				location = locationParts[0].replace("index.html","").replace("index_de.html","");
				var image = location+'public/moz/'+$('#mosaicWrapper').attr('class')+'/tiles/'+winnerImage;
				var newImg = new Image();
				$(newImg)
				.load(function() {
					var appendE = '<div id="imgHolder"></div>';
					$('#'+overlayName).append(appendE);
					$('#'+overlayName+' #imgHolder').css({
						position:'absolute'
					});
	
					$(this).hide();
					$('#imgHolder')
					.append(this);
					
					var imgW = $(this).width();
					var imgH = $(this).height();
	
					var overlayX = parseInt($('#'+overlayName).css('left').replace("px",""));
					var toTheLeft = $('#mosaicWrapper').width() - (overlayX + imgW);
					
					var overlayY = parseInt($('#'+overlayName).css('top').replace("px",""));
					var toTheTop = $('#mosaicWrapper').height() - (overlayY + imgH);
					
					if(toTheLeft < 0 && toTheTop < 0) {
						$('#'+overlayName+' #imgHolder')
						.animate({
							left: toTheLeft-3,
							top: toTheTop-3,
							width:imgW,
							height:imgH
						},'slow');
					} else if(toTheLeft < 0) {
						$('#'+overlayName+' #imgHolder')
						.animate({
							left: toTheLeft-3,
							width:imgW,
							height:imgH
						},'slow');
					} else if(toTheTop < 0) {
						$('#'+overlayName+' #imgHolder')
						.animate({
							top: toTheTop-3,
							width:imgW,
							height:imgH
						},'slow');
					} else {
						$('#'+overlayName+' #imgHolder')
						.animate({
							width:imgW,
							height:imgH
						},'slow');
					}
					
					$(this)
					.fadeIn()
					.css('display','inline');

				})
				.error(function(){})
				.attr('src',image);
			}
		}).click();
	}
}

$(document).ready(function(){
	//$.MOSAIC.init.construct();
});