// JavaScript Document

var Scroller = new Class({
	currentTween: null,
	initialize: function() {
	},
	startTween: function(fxTarget, fxTargetContainer, movingUp) {
		if(movingUp) {
			var targetSizes = $(fxTarget).getSize();
			var containerSizes = $(fxTargetContainer).getSize();
			var targetValue = 0 - targetSizes.y + containerSizes.y;
		} else {
			var targetValue = 0;
		}
		this.currentTween = new Fx.Tween(fxTarget, {
			property: "marginTop",
			duration: 3000,
			transition: Fx.Transitions.Linear
		});
		this.currentTween.start(targetValue);
	},
	stopTween: function() {
		if(this.currentTween) {
			this.currentTween.cancel();
		}
	}
});

var Lightbox = new Class({
	overlay: null,
	popup: null,
	initialize: function(overlay) {
		this.overlay = overlay;
	},
	openPopup: function(popup) {
		if(this.popup != null) {
			this.closePopup();
		}
		this.popup = popup;
		this.overlay.setStyle('display', 'block');
		this.popup.setStyle('display', 'block');
	},
	closePopup: function() {
		this.overlay.setStyle('display', 'none');
		this.popup.setStyle('display', 'none');
		this.popup = null;
	}
});

var DoorColour = new Class({
	colour: 'roma',
	door: 'white_plain',
	container: null,
	chain: null,
	images: null,
	dsContainer: null,
	dcContainer: null,
	loadedImages: new Array(new Array()),
	initialize: function(container, dsContainer, dcContainer) {
		this.container = container;
		this.dsContainer = dsContainer;
		this.dcContainer = dcContainer;
	},
	setColour: function(colour) {
		this.colour = colour;
		this.dcContainer.innerHTML = colour.replace(/_/g," ");
	},
	setDoor: function(door) {
		this.door = door;
		this.dsContainer.innerHTML = door.replace(/_/g," ");
	},
	showImage: function(imgSrc, container) {
		container.innerHTML = '';
		new Element('img', {
			src : imgSrc,
			id : 'mainImage'
		}).inject(container);
	},
	showImageDelay: function(imgSrc, container) {
		this.showImage.delay(500, null, [imgSrc, container]);
	},
	updateImage: function() {
		/*alert($defined(this.door));
		alert($defined(this.colour));
		if($defined(this.door) && $defined(this.colour) && $defined(this.loadedImages[this.door])) {
			alert($defined(this.loadedImages[this.door]));
			if($defined(this.loadedImages[this.door][this.colour])) {
		 		alert($defined(this.loadedImages[this.door][this.colour]));
			}
		}*/
		if($defined(this.door) && $defined(this.colour) && $defined(this.loadedImages[this.door]) && $defined(this.loadedImages[this.door][this.colour])) {
			$('mainImage').src = 'getDoor.php?door='+this.door+'&colour='+this.colour;
		} else {
			this.container.innerHTML = '';
			new Element('img', {
				src: 'images/ajaxLoader.gif',
				styles: {
					'marginTop' : '150px'
				}
			}).inject(this.container);
			var newImage = new Image();
			newImage.src = 'getDoor.php?door='+this.door+'&colour='+this.colour;
			newImage.addEvent('load', this.showImageDelay('getDoor.php?door='+this.door+'&colour='+this.colour, this.container));
			if(!$defined(this.loadedImages[this.door])) {
				this.loadedImages[this.door] = new Array();
			}
			this.loadedImages[this.door][this.colour] = true;
		}
	}
});

window.addEvent('domready', function() {
	var overlay = new Element('div', {
		styles: {
			'display':'none',
			'position':'fixed',
			'top':'0px',
			'left':'0px',
			'width':'100%',
			'height':'100%',
			'backgroundColor':'#000',
			'opacity': '0.7',
			'filter':'alpha(opacity=70)'
		}
	});
	overlay.inject(document.body);
	var mainScroller = new Scroller();
	var mainLB = new Lightbox(overlay);
	overlay.addEvent('click', function(evt) {
		mainLB.closePopup();
	});
	
	var sendFriendRequest;
	var bookDesignerRequest;
	var doorColour = new DoorColour($('preview'), $('designStyle'), $('designColour'));
	
	$('doorsUp').addEvent('mousedown', function() {
		mainScroller.startTween('doorList', 'doorsContainer', false);
	});
	$('doorsUp').addEvent('mouseup', function() {
		mainScroller.stopTween();								   
	});
	$('doorsUp').addEvent('mouseout', function() {
		mainScroller.stopTween();								   
	});
	$('doorsDown').addEvent('mousedown', function() {
		mainScroller.startTween('doorList', 'doorsContainer', true);
	});
	$('doorsDown').addEvent('mouseup', function() {
		mainScroller.stopTween();								   
	});
	$('doorsDown').addEvent('mouseout', function() {
		mainScroller.stopTween();								   
	});
	$('coloursUp').addEvent('mousedown', function() {
		mainScroller.startTween('colourList', 'coloursContainer', false);
	});
	$('coloursUp').addEvent('mouseup', function() {
		mainScroller.stopTween();								   
	});
	$('coloursUp').addEvent('mouseout', function() {
		mainScroller.stopTween();								   
	});
	$('coloursDown').addEvent('mousedown', function() {
		mainScroller.startTween('colourList', 'coloursContainer', true);
	});
	$('coloursDown').addEvent('mouseup', function() {
		mainScroller.stopTween();
	});
	$('coloursDown').addEvent('mouseout', function() {
		mainScroller.stopTween();								   
	});
	
	$('bookDesigner').addEvent('click', function() {
		mainLB.openPopup($('bookDesignerPopup'));
	});
	$('emailFriend').addEvent('click', function() {
		mainLB.openPopup($('emailFriendPopup'));
	});
	$$('.closePopup').addEvent('click',function() {
		mainLB.closePopup();
	});
	
	$('bookDesignerBtn').addEvent('click', function() {
		bookDesignerRequest = new Request({
			method:'post',
			url:'bookDesigner.php',
			data: {
				'title':$('bdTitle').value,
				'name':$('bdName').value,
				'phone':$('bdPhone').value,
				'email':$('bdEmail').value,
				'add1':$('bdAdd1').value,
				'add2':$('bdAdd2').value,
				'town':$('bdTown').value,
				'county':$('bdCounty').value,
				'door':doorColour.door,
				'colour':doorColour.colour
			},
			onRequest: function() {
			},
			onComplete: function(response) {
				//mainLB.closePopup();
				alert(response);
			}
		}).send();
	});

	$('emailFriendBtn').addEvent('click', function() {
		bookDesignerRequest = new Request({
			method:'post',
			url:'emailFriend.php',
			data: {
				'name':$('efName').value,
				'friendName':$('efFriendName').value,
				'friendEmail':$('efFriendEmail').value,
				'message':$('efMessage').value,
				'door':doorColour.door,
				'colour':doorColour.colour
			},
			onComplete: function(response) {
				//mainLB.closePopup();
				alert(response);
			}
		}).send();
	});
	
	$('doorList').getElements('li').addEvent('click', function(evt){
		doorColour.setDoor($(evt.target).getParent().getAttribute('value'));
		doorColour.updateImage();
	});
	
	$('colourList').getElements('li').addEvent('click', function(evt){
		doorColour.setColour($(evt.target).getParent().getAttribute('value'));
		doorColour.updateImage();
	});
	
	$('saveToDisk').addEvent('click', function() {
		window.location.href = 'getDoor.php?door='+doorColour.door+'&colour='+doorColour.colour+'&download=1';
	});
	
	doorColour.updateImage();
});