/* *******************************************************
J  a  v  a  c  a  t  z
Filename:   makeyourdesign.js
Purpose:    This file is created to hold js functions for
            Promoclip's Make Your Own Design page
            Please do not put other codes in this file.
Created by: KY 2009.12.08
******************************************************* */

var designAjaxArea_interval;
var topleft_move;
var topright_move;
var bottomleft_move;
var bottomright_move;
var image_move_body;

var makeyourdesign = {
	opacity: 0.7,
	targetImageDimension: [0,0],
	height: 0,
	undo: new Array(),
	imageIndex: 0,
	images: new Array(),
	clipcodes: ['pr','ml','xl'],
	clips: {
		'pr': {
			'code':'pr',
			'name':'PromoClip',
			'minRequired':1000,
			'printOptions':['pp','le','3d'],
			'packageOptions':['db','gp'],
			'bigDimensions': [184,393],
			'actualDimensions': [31,67]
		},
		'ml': {
			'code':'ml',
			'name':'ML Collect Clip',
			'minRequired':500,
			'printOptions':['gs','le','3d'],
			'packageOptions':['db','gp'],
			'bigDimensions': [184,384],
			'actualDimensions': [40,84]
		},
		'xl': {
			'code':'xl',
			'name':'XL Money Clip',
			'minRequired':100,
			'printOptions':['le','3d'],
			'packageOptions':['tgb'],
			'bigDimensions': [183,435],
			'actualDimensions': [46,109]
		}
	},
	printcodes: ['pp','le','gs','3d'],
	prints: {
		'pp': {
			'code':'pp',
			'name':'Pad printing',
			'info':'A razor-sharp image in any colours on our in-house, eco-friendly machine.',
			'imageRequirement':'JPEG, GIF and PNG images.'
		},
		'le': {
			'code':'le',
			'name':'Laser engraving',
			'info':'The stainless steel surface for an elegant effect.',
			'imageRequirement':'Single-color, transparent GIF or PNG images.'
		},
		'gs': {
			'code':'gs',
			'name':'Glossy sticker',
			'info':'Sticker printing uses durable, top-quality labels, digitally printed in full colour and mechanically placed onto the clip. Full colour at no extra charge.',
			'imageRequirement':'JPEG, GIF and PNG images.'
		},
		'3d': {
			'code':'3d',
			'name':'3D acrylic doming',
			'info':'Gives a 3-D effect by applying a durable, domed acrylic coating to your full-colour, digitally printed image.',
			'imageRequirement':'JPEG, GIF and PNG images.'
		}
	},
	packagecodes: ['db','gp','tgb'],
	packages: {
		'db': {
			'code':'db',
			'name':'Desktop box',
			'info':'Contemporary, transparent acrylic boxes keep clips neatly at hand and your logo in sight. In three sizes, to hold 50, 100 or 250 clips.'
		},
		'gp': {
			'code':'gp',
			'name':'Giveaway pouch',
			'info':'Perfect for mailing promotions and shaped like a PromoClip, each transparent plastic pouch can hold 25 clips.'
		},
		'tgb': {
			'code':'tgb',
			'name':'Transparent giveaway box',
			'info':'Each clip comes in an enveloped-shaped giveaway box in contemporary semi-transparent plastic. Option to personalise the presentation card. Space for your business card.'
		}
	},
	onResize: function() {
		if(!$('designAjaxArea')) return;
		try {
			if($('resizeImage') && $('targetImage')) $('resizeImage').setStyle({'left':$('targetImage').cumulativeOffset()[0]+'px', 'top':$('targetImage').cumulativeOffset()[1]+'px'});
		} catch(error) {
		}
		try {
			$('makeyourdesignOverlay').setStyle({'width':$$('body')[0].getWidth()+'px','height':$$('body')[0].getHeight()+'px'})
		} catch(error) {
		}
		makeyourdesign.onResize2();
	},
	onResize2: function() {
		try {
			$$('.previewbutton-dup').each(function(node) {
				var id = $(node).identify();
				$(node).clonePosition($(id+'-base'));
			});
		} catch(error) {
		}
	},
	designAjaxArea_resize: function() {
		try {
			var height = $('designAjaxArea').getHeight();
			if(height != makeyourdesign.height) {
				makeyourdesign.height = height;
				$$('#designAjaxArea .design_2').concat($$('#designAjaxArea .design_3')).each( function(node) {
					$(node).setStyle({'height':height - 42 + 'px'});
				});
			}
		} catch(error) {
		}
	},
	ghostImageMove: function(e) {
		if($('ghostImage').visible()) {
			var element = $('ghostImage');
			var left;
			var top;
			var width = $(element).getWidth();
			var height = $(element).getHeight();
			left = e.pointerX() - width/2;
			top = e.pointerY() - height/2;
			if(e || (left && top)) $(element).setStyle( { left: left + 'px', top: top + 'px' } );
		}
	},
	init: function() {
		if(!$('designAjaxArea')) return;
		if((BrowserDetect.browser == 'Explorer' && BrowserDetect.version < 7) ||
			(BrowserDetect.browser == 'Firefox' && BrowserDetect.version < 2)
		) {
			var alertText = 'Sorry that your browser is outdated and not supported. Please use a more recent browser to-date. (Example: Microsoft Internet Explorer 7 or above, or Mozilla Firefox 2 or above, or the equivalent.)';
			if($('makeyourdesignArea')) $('makeyourdesignArea').replace(new Element('div').addClassName('pageError').update(alertText));
			return;
		}
		
		var clipcode = $F('clipcode');
		var printcode = $F('printcode');
		var packagecode = $F('packagecode');
		
		// Init
		designAjaxArea_interval = setInterval(makeyourdesign.designAjaxArea_resize, 1000);
		$$('.previewbutton').each( function(previewbutton) {
			$(previewbutton).setOpacity(0.4);
			$(previewbutton).observe('mouseenter', previewbutton_hover = function(e) { $(previewbutton).setOpacity(1); });
			$(previewbutton).observe('mouseleave', previewbutton_out = function(e) { if(!$(previewbutton).hasClassName('active')) $(previewbutton).setOpacity(0.4); else $(previewbutton).setOpacity(0.8) });
		});
		var makeyourdesignOverlay = new Element('div', { 'id':'makeyourdesignOverlay' }).addClassName('makeyourdesignOverlay').setStyle({'position':'absolute','top':0,'left':0,'background':'url(js/makeyourdesign/img/pixel.gif) repeat','width':$$('body')[0].getWidth()+'px','height':$$('body')[0].getHeight()+'px'}).hide();
		if($('makeyourdesignOverlay')) $(makeyourdesignOverlay).remove();
		$('formpage').insert(makeyourdesignOverlay);
		
		var ghostImage = new Element('div', { 'id':'ghostImage' }).addClassName('ghostImage').setStyle({'zIndex':999}).hide();
		if($('ghostImage')) $(ghostImage).remove();
		$('formpage').insert(ghostImage);
		$('formpage').observe('mouseup', image_up_body = function(e) {
			if(!$('resizeImage').hasClassName('resize')) {
				if($('ghostImage').visible() && $('ghostImage').down('img')) {
					if(!$('innerImageArea') || e.clientX + document.viewport.getScrollOffsets()[0] < $('design_3').cumulativeOffset()[0]) {
						new Effect.Fade($('ghostImage'), { duration: 0.2, afterFinish: function() { $('ghostImage').update(''); } });
					} else {
						var ghostOffset = $('ghostImage').positionedOffset();
						var clipOffset = $('innerImageArea').cumulativeOffset();
						var actualOffset = $('actualImageArea').cumulativeOffset();
						$('resizeImageInner').setStyle({'width':$('ghostImage').getWidth()-2+'px','height':$('ghostImage').getHeight()-2+'px'});
						$('resizeImage').setStyle({'left':ghostOffset[0]+1+'px','top':ghostOffset[1]+1+'px'}).show();
						if($('ghostImage').down('img')) {
							var targetImage = new Element('img', { 'src':$('ghostImage').down('img').src, 'alt':'', 'id':'targetImage' }).addClassName('targetImage').setStyle({'left':ghostOffset[0]-clipOffset[0]+1+'px','top':ghostOffset[1]-clipOffset[1]+1+'px','width':$('ghostImage').down('img').getWidth()+'px','height':$('ghostImage').down('img').getHeight()+'px'});
							$('innerImageArea').update(targetImage);
							var widthRatio = $('actualImageArea').getWidth()/$('innerImageArea').getWidth();
							var heightRatio = $('actualImageArea').getHeight()/$('innerImageArea').getHeight();
							var targetImagePreview = new Element('img', { 'src':$('ghostImage').down('img').src, 'alt':'', 'id':'targetImagePreview' }).addClassName('targetImagePreview').setStyle({'left':parseInt($('targetImage').getStyle('left'))*widthRatio+'px','top':parseInt($('targetImage').getStyle('top'))*heightRatio+'px','width':$('ghostImage').down('img').getWidth()*widthRatio+'px','height':$('ghostImage').down('img').getHeight()*heightRatio+'px'});
							$('actualImageArea').update(targetImagePreview);
						}
						$('imagefile').setValue($('targetImage').src);
						new Effect.Fade($('ghostImage'), { duration: 0.2, afterFinish: function() { $('ghostImage').update(''); } });
						$('quantity').focus();
					}
				}
			} else {
				if($('ghostImage').visible() && $('ghostImage').down('img')) {
					var ghostOffset = $('ghostImage').positionedOffset();
					var clipOffset = $('innerImageArea').cumulativeOffset();
					var actualOffset = $('actualImageArea').cumulativeOffset();
					$('targetImage').setStyle({'left':ghostOffset[0]-clipOffset[0]+1+'px','top':ghostOffset[1]-clipOffset[1]+1+'px','width':$('ghostImage').down('img').getWidth()+'px','height':$('ghostImage').down('img').getHeight()+'px'});
					var widthRatio = $('actualImageArea').getWidth()/$('innerImageArea').getWidth();
					var heightRatio = $('actualImageArea').getHeight()/$('innerImageArea').getHeight();
					$('targetImagePreview').setStyle({'left':parseInt($('targetImage').getStyle('left'))*widthRatio+'px','top':parseInt($('targetImage').getStyle('top'))*heightRatio+'px','width':$('ghostImage').down('img').getWidth()*widthRatio+'px','height':$('ghostImage').down('img').getHeight()*heightRatio+'px'});
					new Effect.Fade($('ghostImage'), { duration: 0.2, afterFinish: function() { $('ghostImage').update(''); } });
				}
			}
			$('ghostImage').setStyle({'zIndex':999});
			$('resizeImage').setStyle({'zIndex':998});
			$('makeyourdesignOverlay').hide();
			if(topleft_move!=null) {
				$$('body')[0].stopObserving('mousemove', topleft_move);
				topleft_move = null;
			}
			if(topright_move!=null) {
				$$('body')[0].stopObserving('mousemove', topright_move);
				topright_move = null;
			}
			if(bottomleft_move!=null) {
				$$('body')[0].stopObserving('mousemove', bottomleft_move);
				bottomleft_move = null;
			}
			if(bottomright_move!=null) {
				$$('body')[0].stopObserving('mousemove', bottomright_move);
				bottomright_move = null;
			}
			return false;
		});
		$$('body')[0].observe('mousemove', image_move_body = function(e) {
			if(!$('resizeImage').hasClassName('resize')) {
				makeyourdesign.ghostImageMove(e);
			}
		});
		
		var resizeImage = new Element('div', { 'id':'resizeImage' }).addClassName('resizeImage').setStyle({'zIndex':998}).hide();
		if($('resizeImage')) $(resizeImage).remove();
		$('formpage').insert(resizeImage);
		var resizeImageInner = new Element('div', { 'id':'resizeImageInner' }).addClassName('resizeImageInner');
		$(resizeImage).insert(resizeImageInner);
		
		var topleft = new Element('div', {'id':'corner_topleft'}).addClassName('corner topleft');
		var topright = new Element('div', {'id':'corner_topright'}).addClassName('corner topright');
		var bottomleft = new Element('div', {'id':'corner_bottomleft'}).addClassName('corner bottomleft');
		var bottomright = new Element('div', {'id':'corner_bottomright'}).addClassName('corner bottomright');
		$(resizeImageInner).insert(topleft);
		$(resizeImageInner).insert(topright);
		$(resizeImageInner).insert(bottomleft);
		$(resizeImageInner).insert(bottomright);
		
		$(topleft).observe('mousedown', topleft_down = function(e) {
			if(topleft_move!=null) {
				$$('body')[0].stopObserving('mousemove', topleft_move);
				topleft_move = null;
			}
			if(topright_move!=null) {
				$$('body')[0].stopObserving('mousemove', topright_move);
				topright_move = null;
			}
			if(bottomleft_move!=null) {
				$$('body')[0].stopObserving('mousemove', bottomleft_move);
				bottomleft_move = null;
			}
			if(bottomright_move!=null) {
				$$('body')[0].stopObserving('mousemove', bottomright_move);
				bottomright_move = null;
			}
			makeyourdesign.targetImageDimension = [$('targetImage').getWidth(), $('targetImage').getHeight()];
			$('makeyourdesignOverlay').show();
			$('ghostImage').setStyle({'left':$('resizeImage').cumulativeOffset()[0]+'px','top':$('resizeImage').cumulativeOffset()[1]+'px'});
			$('ghostImage').setStyle({'zIndex':998}).setOpacity(0.5).show();
			$('resizeImage').setStyle({'zIndex':999});
			$$('body')[0].observe('mousemove', topleft_move = function(e) {
				var x = e.clientX;
				var y = e.clientY;
				var originalOffset = $('targetImage').viewportOffset();
				var scrollOffset = document.viewport.getScrollOffsets();
				var dx = x - originalOffset[0];
				var dy = y - originalOffset[1];
				var imagewidth = makeyourdesign.targetImageDimension[0] - dx;
				var imageheight = makeyourdesign.targetImageDimension[1] - dy;
				if(imagewidth>0 && imageheight>0) {
					$('ghostImage').setStyle({'left':x+scrollOffset[0]+'px', 'top':y+scrollOffset[1]+'px'});
					$('resizeImage').setStyle({'left':x+scrollOffset[0]+1+'px', 'top':y+scrollOffset[1]+1+'px'});
					$('resizeImageInner').setStyle({'width':imagewidth+'px', 'height':imageheight+'px'});
					if($('resizeImageMask')) $('resizeImageMask').setStyle({ 'width':imagewidth+2+'px', 'height':imageheight+2+'px' });
					if($('ghostImage').down('img')) $('ghostImage').down('img').setStyle({ 'width':$('resizeImageInner').getWidth()+'px', 'height':$('resizeImageInner').getHeight()+'px' });
				}
			});
			return false;
		});
		$(topleft).observe('mouseup', topleft_up = function(e) {
			$('makeyourdesignOverlay').hide();
			$$('body')[0].stopObserving('mousemove', topleft_move);
			topleft_move = null;
			$('ghostImage').setStyle({'zIndex':999});
			$('resizeImage').setStyle({'zIndex':998});
			return false;
		});
		
		$(topright).observe('mousedown', topright_down = function(e) {
			if(topleft_move!=null) {
				$$('body')[0].stopObserving('mousemove', topleft_move);
				topleft_move = null;
			}
			if(topright_move!=null) {
				$$('body')[0].stopObserving('mousemove', topright_move);
				topright_move = null;
			}
			if(bottomleft_move!=null) {
				$$('body')[0].stopObserving('mousemove', bottomleft_move);
				bottomleft_move = null;
			}
			if(bottomright_move!=null) {
				$$('body')[0].stopObserving('mousemove', bottomright_move);
				bottomright_move = null;
			}
			makeyourdesign.targetImageDimension = [$('targetImage').getWidth(), $('targetImage').getHeight()];
			$('makeyourdesignOverlay').show();
			$('ghostImage').setStyle({'left':$('resizeImage').cumulativeOffset()[0]+'px','top':$('resizeImage').cumulativeOffset()[1]+'px'});
			$('ghostImage').setStyle({'zIndex':998}).setOpacity(0.5).show();
			$('resizeImage').setStyle({'zIndex':999});
			$$('body')[0].observe('mousemove', topright_move = function(e) {
				var x = e.clientX;
				var y = e.clientY;
				var originalOffset = $('targetImage').viewportOffset();
				originalOffset = [originalOffset[0]+$('targetImage').getWidth(), originalOffset[1]];
				var scrollOffset = document.viewport.getScrollOffsets();
				var dx = x - originalOffset[0];
				var dy = y - originalOffset[1];
				var imagewidth = makeyourdesign.targetImageDimension[0] + dx;
				var imageheight = makeyourdesign.targetImageDimension[1] - dy;
				if(imagewidth>0 && imageheight>0) {
					$('ghostImage').setStyle({'left':$('targetImage').cumulativeOffset()[0]+'px', 'top':y+scrollOffset[1]+'px'});
					$('resizeImage').setStyle({'left':$('targetImage').cumulativeOffset()[0]+1+'px', 'top':y+scrollOffset[1]+1+'px'});
					$('resizeImageInner').setStyle({'width':imagewidth+'px', 'height':imageheight+'px'});
					if($('resizeImageMask')) $('resizeImageMask').setStyle({ 'width':imagewidth+2+'px', 'height':imageheight+2+'px' });
					if($('ghostImage').down('img')) $('ghostImage').down('img').setStyle({ 'width':$('resizeImageInner').getWidth()+'px', 'height':$('resizeImageInner').getHeight()+'px' });
				}
			});
			return false;
		});
		$(topright).observe('mouseup', topright_up = function(e) {
			$('makeyourdesignOverlay').hide();
			$$('body')[0].stopObserving('mousemove', topright_move);
			topright_move = null;
			$('ghostImage').setStyle({'zIndex':999});
			$('resizeImage').setStyle({'zIndex':998});
			return false;
		});
		
		$(bottomleft).observe('mousedown', bottomleft_down = function(e) {
			if(topleft_move!=null) {
				$$('body')[0].stopObserving('mousemove', topleft_move);
				topleft_move = null;
			}
			if(topright_move!=null) {
				$$('body')[0].stopObserving('mousemove', topright_move);
				topright_move = null;
			}
			if(bottomleft_move!=null) {
				$$('body')[0].stopObserving('mousemove', bottomleft_move);
				bottomleft_move = null;
			}
			if(bottomright_move!=null) {
				$$('body')[0].stopObserving('mousemove', bottomright_move);
				bottomright_move = null;
			}
			makeyourdesign.targetImageDimension = [$('targetImage').getWidth(), $('targetImage').getHeight()];
			$('makeyourdesignOverlay').show();
			$('ghostImage').setStyle({'left':$('resizeImage').cumulativeOffset()[0]+'px','top':$('resizeImage').cumulativeOffset()[1]+'px'});
			$('ghostImage').setStyle({'zIndex':998}).setOpacity(0.5).show();
			$('resizeImage').setStyle({'zIndex':999});
			$$('body')[0].observe('mousemove', bottomleft_move = function(e) {
				var x = e.clientX;
				var y = e.clientY;
				var originalOffset = $('targetImage').viewportOffset();
				originalOffset = [originalOffset[0], originalOffset[1]+$('targetImage').getHeight()];
				var scrollOffset = document.viewport.getScrollOffsets();
				var dx = x - originalOffset[0];
				var dy = y - originalOffset[1];
				var imagewidth = makeyourdesign.targetImageDimension[0] - dx;
				var imageheight = makeyourdesign.targetImageDimension[1] + dy;
				if(imagewidth>0 && imageheight>0) {
					$('ghostImage').setStyle({'left':x+scrollOffset[0]+'px', 'top':$('targetImage').cumulativeOffset()[1]+'px'});
					$('resizeImage').setStyle({'left':x+scrollOffset[0]+1+'px', 'top':$('targetImage').cumulativeOffset()[1]+1+'px'});
					$('resizeImageInner').setStyle({'width':imagewidth+'px', 'height':imageheight+'px'});
					if($('resizeImageMask')) $('resizeImageMask').setStyle({ 'width':imagewidth+2+'px', 'height':imageheight+2+'px' });
					if($('ghostImage').down('img')) $('ghostImage').down('img').setStyle({ 'width':$('resizeImageInner').getWidth()+'px', 'height':$('resizeImageInner').getHeight()+'px' });
				}
			});
			return false;
		});
		$(bottomleft).observe('mouseup', bottomleft_up = function(e) {
			$('makeyourdesignOverlay').hide();
			$$('body')[0].stopObserving('mousemove', bottomleft_move);
			bottomleft_move = null;
			$('ghostImage').setStyle({'zIndex':999});
			$('resizeImage').setStyle({'zIndex':998});
			return false;
		});
		
		$(bottomright).observe('mousedown', bottomright_down = function(e) {
			if(topleft_move!=null) {
				$$('body')[0].stopObserving('mousemove', topleft_move);
				topleft_move = null;
			}
			if(topright_move!=null) {
				$$('body')[0].stopObserving('mousemove', topright_move);
				topright_move = null;
			}
			if(bottomleft_move!=null) {
				$$('body')[0].stopObserving('mousemove', bottomleft_move);
				bottomleft_move = null;
			}
			if(bottomright_move!=null) {
				$$('body')[0].stopObserving('mousemove', bottomright_move);
				bottomright_move = null;
			}
			makeyourdesign.targetImageDimension = [$('targetImage').getWidth(), $('targetImage').getHeight()];
			$('makeyourdesignOverlay').show();
			$('ghostImage').setStyle({'left':$('resizeImage').cumulativeOffset()[0]+'px','top':$('resizeImage').cumulativeOffset()[1]+'px'});
			$('ghostImage').setStyle({'zIndex':998}).setOpacity(0.5).show();
			$('resizeImage').setStyle({'zIndex':999});
			$$('body')[0].observe('mousemove', bottomright_move = function(e) {
				var x = e.clientX;
				var y = e.clientY;
				var originalOffset = $('targetImage').viewportOffset();
				originalOffset = [originalOffset[0]+$('targetImage').getWidth(), originalOffset[1]+$('targetImage').getHeight()];
				var dx = x - originalOffset[0];
				var dy = y - originalOffset[1];
				var imagewidth = makeyourdesign.targetImageDimension[0]+dx;
				var imageheight = makeyourdesign.targetImageDimension[1]+dy;
				if(imagewidth>0 && imageheight>0) {
					$('ghostImage').setStyle({'left':$('targetImage').cumulativeOffset()[0]+'px', 'top':$('targetImage').cumulativeOffset()[1]+'px'});
					$('resizeImage').setStyle({'left':$('targetImage').cumulativeOffset()[0]+1+'px', 'top':$('targetImage').cumulativeOffset()[1]+1+'px'});
					$('resizeImageInner').setStyle({'width':imagewidth+'px', 'height':imageheight+'px'});
					if($('resizeImageMask')) $('resizeImageMask').setStyle({ 'width':imagewidth+2+'px', 'height':imageheight+2+'px' });
					if($('ghostImage').down('img')) $('ghostImage').down('img').setStyle({ 'width':$('resizeImageInner').getWidth()+'px', 'height':$('resizeImageInner').getHeight()+'px' });
				}
			});
			return false;
		});
		$(bottomright).observe('mouseup', bottomright_up = function(e) {
			$('makeyourdesignOverlay').hide();
			$$('body')[0].stopObserving('mousemove', bottomright_move);
			bottomright_move = null;
			$('ghostImage').setStyle({'zIndex':999});
			$('resizeImage').setStyle({'zIndex':998});
			return false;
		});
		
		$(resizeImage).observe('mouseenter', resizeImage_hover = function(e) {
			if($('ghostImage').visible()) return;
			$('resizeImage').addClassName('active');
			$('ghostImage').update(new Element('img', { 'src':$('targetImage').src, 'alt':'' }));
			if(!$('targetImage').width || !$('targetImage').height || $('targetImage').width == 0 || $('targetImage').height == 0) {
				$('targetImage').onload = function() { $('resizeImageMask').setStyle({'width':parseInt($('targetImage').getWidth())+'px','height':parseInt($('targetImage').getHeight())+'px'}); };
			} else {
				$('ghostImage').insert(new Element('div', { 'id':'resizeImageMask' }).addClassName('mask').setStyle({'width':parseInt($('targetImage').width)+2+'px','height':parseInt($('targetImage').height)+2+'px'}));
				$('ghostImage').down('img').setStyle({'width':$('targetImage').getWidth()+'px','height':$('targetImage').getHeight()+'px'});
			}
		});
		$(resizeImage).observe('mouseleave', resizeImage_out = function(e) {
			if(!$('resizeImage').hasClassName('resize')) {
				$('resizeImage').removeClassName('active');
			}
		});
		$(resizeImage).observe('mousedown', resizeImage_down = function(e) {
			if(!$('resizeImage').hasClassName('resize')) {
				$('ghostImage').setOpacity(0.5).show();
				makeyourdesign.ghostImageMove(e);
			}
			return false;
		});
		
		$$('.design_2').concat($$('.design_3')).concat($$('.makeyourdesignOverlay')).concat($$('.resizeImage')).concat($$('.ghostImage')).each( function(node) {
			if(typeof $(node).onselectstart != 'undefined') {
				$(node).onselectstart = function() { return false; }
			} else if(typeof $(node).style.MozUserSelect != 'undefined') {
				$(node).style.MozUserSelect = 'none';
			} else {
				$(node).onmousedown = function(e) { return false; };
				$(node).observe('mousedown', function(e) { return false; });
			}
			$(node).setStyle({'cursor':'default'});
		});
		
		// Step 1
		makeyourdesign.clipcodes.each( function(code, index) {
			var clip = new Element('a', { 'href':'javascript:void(0);', 'id':'clip_'+code, 'class':'clip' }).observe('click', clip_click = function(e) {
				var code = $(this).identify().substring(('clip_').length);
				makeyourdesign.selectClip(code);
			});
			$(clip).insert(new Element('span')).setOpacity(makeyourdesign.opacity).insert( new Element('img', { 'src':'js/makeyourdesign/img/promoclip/promoclip-overlay-'+makeyourdesign.clips[code].code+'.gif', 'alt':makeyourdesign.clips[code].name }));
			$('step_1_clips').insert(clip);
			// tooltip
			$(clip).observe('mouseenter', function(e) {
				$(clip).setOpacity(1);
				var tooltipText = makeyourdesign.clips[code].name + '<br />Minimum Quantity:<br />' + makeyourdesign.clips[code].minRequired + ' pcs';
				var tooltip = new Element('div', { 'id':'makeyourdesign_tooltip' }).addClassName('tooltip').hide().insert(tooltipText);
				if($('makeyourdesign_tooltip')) $('makeyourdesign_tooltip').replace(tooltip);
				else $('formpage').insert(tooltip);
				kyTooltip.show($(tooltip));
			});
			$(clip).observe('mouseleave', function(e) {
				if(!$(clip).hasClassName('select')) $(clip).setOpacity(makeyourdesign.opacity);
				kyTooltip.hide($('makeyourdesign_tooltip'));
			});
			$(clip).observe('mousemove', function(e) {
				kyTooltip.move(e, $('makeyourdesign_tooltip'));
			});
		} );
		// minRequired
		var minRequired = $('minRequired');
		$(minRequired).observe('mouseenter', function(e) {
			var code = $F('clipcode');
			var tooltipText;
			if(!code || code.length==0) tooltipText = 'Please select a clip first.';
			else tooltipText = 'Minimum required for <b>' + makeyourdesign.clips[code].name + '</b>: ' + makeyourdesign.clips[code].minRequired + ' pcs';
			var tooltip = new Element('div', { 'id':'makeyourdesign_tooltip' }).addClassName('tooltip').hide().insert(tooltipText);
			if($('makeyourdesign_tooltip')) $('makeyourdesign_tooltip').replace(tooltip);
			else $('formpage').insert(tooltip);
			kyTooltip.show($(tooltip));
		});
		$(minRequired).observe('mouseleave', function(e) {
			kyTooltip.hide($('makeyourdesign_tooltip'));
		});
		$(minRequired).observe('mousemove', function(e) {
			kyTooltip.move(e, $('makeyourdesign_tooltip'));
		});
		
		// Step 2
		makeyourdesign.printcodes.each( function(code, index) {
			var printOption = new Element('div').addClassName('option');
			$(printOption).insert(new Element('input', { 'type':'radio', 'id':'printOption_'+code, 'class':'printOption radio', 'name':'printOption', 'value':code }).disable().observe('click', printOption_select = function(e) {
				if(!$(this).disabled) makeyourdesign.selectPrintOption($F(this));
			}));
			var label = new Element('label', { 'for':'printOption_'+code }).addClassName('disable').update(makeyourdesign.prints[code].name);
			$(printOption).insert(label);
			$('step_2_prints').insert(printOption);
			// info
			var info = new Element('a', { 'href':'javascript:void(0);' }).addClassName('info').update('[info]');
			$(info).observe('mouseenter', printInfo_hover = function(e) {
				var printInfo = new Element('div', { 'id':'makeyourdesign_printInfo' }).addClassName('tooltip').hide().update(makeyourdesign.prints[code].info);
				if($('makeyourdesign_printInfo')) $('makeyourdesign_printInfo').repace(printInfo);
				else $('formpage').insert(printInfo);
				kyTooltip.show($('makeyourdesign_printInfo'));
			});
			$(info).observe('mouseleave', printInfo_out = function(e) {
				kyTooltip.hide($('makeyourdesign_printInfo'));
			});
			$(info).observe('mousemove', printInfo_move = function(e) {
				kyTooltip.move(e, $('makeyourdesign_printInfo'));
			});
			$(label).insert({ 'after':info });
		});
		
		// Step 3
		makeyourdesign.packagecodes.each( function(code, index) {
			var packageOption = new Element('div').addClassName('option');
			$(packageOption).insert(new Element('input', { 'type':'radio', 'id':'packageOption_'+code, 'class':'packageOption radio', 'name':'packageOption', 'value':code }).disable().observe('click', packageOption_select = function(e) {
				if(!$(this).disabled) makeyourdesign.selectPackageOption($F(this));
			}));
			var label = new Element('label', { 'for':'packageOption_'+code }).addClassName('disable').update(makeyourdesign.packages[code].name);
			$(packageOption).insert(label);
			$('step_3_packages').insert(packageOption);
			// info
			var info = new Element('a', { 'href':'javascript:void(0);' }).addClassName('info').update('[info]');
			$(info).observe('mouseenter', packageInfo_hover = function(e) {
				var packageInfo = new Element('div', { 'id':'makeyourdesign_packageInfo' }).addClassName('tooltip').hide().update(makeyourdesign.packages[code].info);
				if($('makeyourdesign_packageInfo')) $('makeyourdesign_packageInfo').repace(packageInfo);
				else $('formpage').insert(packageInfo);
				kyTooltip.show($('makeyourdesign_packageInfo'));
			});
			$(info).observe('mouseleave', packageInfo_out = function(e) {
				kyTooltip.hide($('makeyourdesign_packageInfo'));
			});
			$(info).observe('mousemove', packageInfo_move = function(e) {
				kyTooltip.move(e, $('makeyourdesign_packageInfo'));
			});
			$(label).insert({ 'after':info });
			// thumb
			var thumb = new Element('a', { 'href':'javascript:void(0);' }).addClassName('thumb').update(new Element('img', { 'src':'js/makeyourdesign/img/icon/thumb.gif' }));
			$(thumb).observe('mouseenter', packageThumb_hover = function(e) {
				var packageThumb = new Element('div', { 'id':'makeyourdesign_packageThumb' }).hide().update(new Element('img', { 'src':'js/makeyourdesign/img/package/'+code+'.jpg', 'alt':'' }));
				if($('makeyourdesign_packageThumb')) $('makeyourdesign_packageThumb').repace(packageThumb);
				else $('formpage').insert(packageThumb);
				kyTooltip.show($('makeyourdesign_packageThumb'));
			});
			$(thumb).observe('mouseleave', packageThumb_out = function(e) {
				kyTooltip.hide($('makeyourdesign_packageThumb'));
			});
			$(thumb).observe('mousemove', packageThumb_move = function(e) {
				kyTooltip.move(e, $('makeyourdesign_packageThumb'));
			});
			$(label).insert({ 'after':thumb });
		});
		// Step 4 - imageRequirement
		var imageRequirement = $('imageRequirement');
		$(imageRequirement).observe('mouseenter', function(e) {
			var code = $F('printcode');
			var tooltipText;
			if(!code || code.length==0) tooltipText = 'Please select a clip and then the printing technique.';
			else tooltipText = 'Image requirement for <b>' + makeyourdesign.prints[code].name + '</b>:<br />' + makeyourdesign.prints[code].imageRequirement;
			var tooltip = new Element('div', { 'id':'makeyourdesign_tooltip' }).addClassName('tooltip').hide().insert(tooltipText);
			if($('makeyourdesign_tooltip')) $('makeyourdesign_tooltip').replace(tooltip);
			else $('formpage').insert(tooltip);
			kyTooltip.show($(tooltip));
		});
		$(imageRequirement).observe('mouseleave', function(e) {
			kyTooltip.hide($('makeyourdesign_tooltip'));
		});
		$(imageRequirement).observe('mousemove', function(e) {
			kyTooltip.move(e, $('makeyourdesign_tooltip'));
		});
		
		// Pre-select from refreshed form
		makeyourdesign.selectClip(clipcode);
		if(printcode) {
			$('printOption_'+printcode).setValue(printcode);
			makeyourdesign.selectPrintOption(printcode);
		}
		if(packagecode) {
			$('packageOption_'+packagecode).setValue(packagecode);
			makeyourdesign.selectPackageOption(packagecode);
		}
		
		$$('.buttons').each(function(node) {$(node).show();});
		setInterval(makeyourdesign.onResize2, 1000);
	},
	selectClip: function(code) {
		var oldClipCode = $F('clipcode');
		$$('#step_1_clips .clip').each( function(node) { $(node).setOpacity(makeyourdesign.opacity).removeClassName('select'); } );
		$('clipcode').setValue(code);
		if(code) {
			$('clip_'+code).addClassName('select').setOpacity(1);
			if(oldClipCode != code) {
				if(!isInvalidQuantity(true)) {
					makeyourdesign.printOptionEnable(makeyourdesign.clips[code].printOptions);
					makeyourdesign.packageOptionEnable(makeyourdesign.clips[code].packageOptions);
				} else {
					makeyourdesign.printOptionEnable();
					makeyourdesign.packageOptionEnable();
				}
			}
		} else {
			makeyourdesign.printOptionEnable();
			makeyourdesign.packageOptionEnable();
		}
		if(oldClipCode != code) {
			$('editArea').update('');
			$('actualArea').update('');
			$('moreInfo').update('');
			$('resizeImage').hide();
		}
	},
	quantityInvalid: true,
	onValidateQuantity: function(code) {
		if(isInvalidQuantity(true)) {
			makeyourdesign.printOptionEnable();
			makeyourdesign.packageOptionEnable();
			$('editArea').update('');
			$('actualArea').update('');
			$('moreInfo').update('');
			$('resizeImage').hide();
			makeyourdesign.quantityInvalid = true;
			return;
		} else if(makeyourdesign.quantityInvalid) {
			makeyourdesign.printOptionEnable(makeyourdesign.clips[code].printOptions);
			makeyourdesign.packageOptionEnable(makeyourdesign.clips[code].packageOptions);
		}
		makeyourdesign.quantityInvalid = false;
	},
	selectPrintOption: function(code) {
		$('printcode').setValue(code);
		var clipcode = $F('clipcode');
		var printcode = code;
		var overlayImagePath = 'js/makeyourdesign/img/promoclip/promoclip-overlay-'+clipcode+'-big.gif';
		var bg_overlayImagePath = 'js/makeyourdesign/img/promoclip/promoclip-overlay-'+clipcode+'-'+printcode+'-big.gif';
		var image = new Element('img', { 'src':overlayImagePath, 'alt':'' }).setStyle({'width':makeyourdesign.clips[clipcode].bigDimensions[0]+'px','height':makeyourdesign.clips[clipcode].bigDimensions[1]+'px'});
		var editImage = new Element('div', {'id':'editImage'}).addClassName('editImage').setStyle({'backgroundImage':'url("'+bg_overlayImagePath+'")'}).update(new Element('div', {'id':'innerImageArea'}).addClassName('innerImageArea')).insert(image);
		$('editArea').update(editImage);
		/*
		var width = $(image).width;
		var height = $(image).height;
		if(!width || !height || width == 0 || height == 0) {
			$(image).onload = function() {
				width = $(this).width;
				height = $(this).height;
				$('editArea').setStyle({'width':width+'px', 'height':height+'px'});
				$('editImage').setStyle({'width':width+'px', 'height':height+'px'});
				$('innerImageArea').setStyle({'width':width+'px', 'height':height+'px'});
			};
		} else {
			$('editArea').setStyle({'width':width+'px', 'height':height+'px'});
			$('editImage').setStyle({'width':width+'px', 'height':height+'px'});
			$('innerImageArea').setStyle({'width':width+'px', 'height':height+'px'});
		}
		*/
		var width = $(image).getWidth();
		var height = $(image).getHeight();
		$('editArea').setStyle({'width':width+'px', 'height':height+'px'});
		$('editImage').setStyle({'width':width+'px', 'height':height+'px'});
		$('innerImageArea').setStyle({'width':width+'px', 'height':height+'px'});
		$('editImage').insert({'after':new Element('div').addClassName('title').update(makeyourdesign.clips[clipcode].name)});
		
		var overlayImagePathPreview = 'js/makeyourdesign/img/promoclip/promoclip-overlay-'+clipcode+'-actual.gif';
		var bg_overlayImagePathPreview = 'js/makeyourdesign/img/promoclip/promoclip-overlay-'+clipcode+'-'+printcode+'.gif';
		var imagePreview = new Element('img', { 'src':overlayImagePathPreview, 'alt':'' }).setStyle({'width':makeyourdesign.clips[clipcode].actualDimensions[0]+'px','height':makeyourdesign.clips[clipcode].actualDimensions[1]+'px'});
		var actualImage = new Element('div', {'id':'actualImage'}).addClassName('actualImage').setStyle({'backgroundImage':'url("'+bg_overlayImagePathPreview+'")'}).update(new Element('div', {'id':'actualImageArea'}).addClassName('actualImageArea')).insert(imagePreview);
		$('actualArea').update(actualImage);
		/*
		var widthPreview = $(imagePreview).width;
		var heightPreview = $(imagePreview).height;
		if(!widthPreview || !heightPreview || widthPreview == 0 || heightPreview == 0) {
			$(imagePreview).onload = function() {
				widthPreview = $(this).getWidth();
				heightPreview = $(this).getHeight();
				$('actualArea').setStyle({'width':widthPreview+'px', 'height':heightPreview+'px'});
				$('actualImage').setStyle({'width':widthPreview+'px', 'height':heightPreview+'px'});
				$('actualImageArea').setStyle({'width':widthPreview+'px', 'height':heightPreview+'px'});
			};
		} else {
			$('actualArea').setStyle({'width':widthPreview+'px', 'height':heightPreview+'px'});
			$('actualImage').setStyle({'width':widthPreview+'px', 'height':heightPreview+'px'});
			$('actualImageArea').setStyle({'width':widthPreview+'px', 'height':heightPreview+'px'});
		}
		*/
		var widthPreview = $(imagePreview).getWidth();
		var heightPreview = $(imagePreview).getHeight();
		$('actualArea').setStyle({'width':widthPreview+'px', 'height':heightPreview+'px'});
		$('actualImage').setStyle({'width':widthPreview+'px', 'height':heightPreview+'px'});
		$('actualImageArea').setStyle({'width':widthPreview+'px', 'height':heightPreview+'px'});
		$('actualImage').insert({'after':new Element('div').addClassName('title').update('Actual size')});
	},
	printOptionEnable: function(codes) {
		$('printcode').clear();
		$$('.printOption').each( function(input) {
			$(input).disable().setValue(null);
			$(input).up().down('label').addClassName('disable');
		} );
		if(!codes) return;
		codes.each( function(code) {
			$('printOption_'+code).enable();
			$('printOption_'+code).up().down('label').removeClassName('disable');
		} );
	},
	selectPackageOption: function(code) {
		$('packagecode').setValue(code);
		var moreInfoContent = new Element('p').update('Selected package type:');
		$('moreInfo').update(moreInfoContent);
		$('moreInfo').insert(new Element('div').addClassName('packageImage').insert(new Element('img', { 'src':'js/makeyourdesign/img/package/'+code+'.jpg', 'alt':'' })));
		$('moreInfo').insert(new Element('div').insert(new Element('b').insert(makeyourdesign.packages[code].name)));
	},
	packageOptionEnable: function(codes) {
		$('packagecode').clear();
		$$('.packageOption').each( function(input) {
			$(input).disable().setValue(null);
			$(input).up().down('label').addClassName('disable');
		} );
		if(!codes) return;
		codes.each( function(code) {
			$('packageOption_'+code).enable();
			$('packageOption_'+code).up().down('label').removeClassName('disable');
		} );
	},
	addImage: function(imagePath) {
		var image = new Element('img', { 'src':imagePath, 'alt':'' });
		$('thumbArea').insert(image);
		$(image).wrap('div', { 'id':'imageThumb-'+makeyourdesign.imageIndex }).addClassName('thumb');
		var mask = new Element('div').addClassName('mask');
		$(image).insert({'after':mask});
		$(mask).observe('mouseenter', mask_hover = function(e) { $(this).up('.thumb').addClassName('active'); });
		$(mask).observe('mouseleave', mask_out = function(e) { $(this).up('.thumb').removeClassName('active'); });
		var widthLimit = 130;
		var heightLimit = 130;
		// must be .onload here
		$(image).onload = function() {
			width = $(image).width;
			height = $(image).height;
			var newWidth = width;
			var newHeight = height;
			if(width > widthLimit) {
				newWidth = widthLimit;
				newHeight = height * widthLimit / width;
			}
			if(newHeight > heightLimit) {
				newHeight = heightLimit;
				newWidth = width * heightLimit / height;
			}
			var ratio = ((newWidth / width) + (newHeight / height)) / 2;
			var newDimensions = {'width':newWidth, 'height':newHeight, 'ratio':ratio};
			$(image).setStyle({'width':newDimensions.width+'px', 'height':newDimensions.height+'px'});
			$(mask).clonePosition($(image));
			makeyourdesign.imageIndex += 1;
			var imageItem = {
				'path':imagePath
			};
			makeyourdesign.images.push(imageItem);
			$(mask).observe('mouseenter', image_hover_mask = function(e) {
				$('ghostImage').update(new Element('img', { 'src':$(image).src, 'alt':'' }));
				$('ghostImage').insert(new Element('div').addClassName('mask').setStyle({'width':parseInt($(image).width)+'px','height':parseInt($(image).height)+'px'}));
			});
			$(mask).observe('mousedown', image_down_mask = function(e) {
				if($('resizeImage').hasClassName('resize')) {
					alert('Sorry, images cannot be moved with the Resize function turned on. Please turn Resize off with the Toggle Resize/Move button near top right corner of the canvas.')
				} else {
					$('ghostImage').setOpacity(0.5).show();
					var ghostImage = $('ghostImage').down('img');
					var width = $(ghostImage).width;
					var height = $(ghostImage).height;
					var widthLimit = 300;
					var heightLimit = 400;
					if(!width || !height || width == 0 || height == 0) {
						$(ghostImage).onload = function() {
							width = $(ghostImage).width;
							height = $(ghostImage).height;
							var newWidth = width;
							var newHeight = height;
							if(width > widthLimit) {
								newWidth = widthLimit;
								newHeight = height * widthLimit / width;
							}
							if(newHeight > heightLimit) {
								newHeight = heightLimit;
								newWidth = width * heightLimit / height;
							}
							$(ghostImage).setStyle({'width':newWidth+'px','height':newHeight+'px'});
						}
					} else {
						var newWidth = width;
						var newHeight = height;
						if(width > widthLimit) {
							newWidth = widthLimit;
							newHeight = height * widthLimit / width;
						}
						if(newHeight > heightLimit) {
							newHeight = heightLimit;
							newWidth = width * heightLimit / height;
						}
						$(ghostImage).setStyle({'width':newWidth+'px','height':newHeight+'px'});
					}
					makeyourdesign.ghostImageMove(e);
				}
				return false;
			});
		};
	},
	test: function() {
		var index = makeyourdesign.images.length + 1;
		if(index > 5) {
			alert('No more test images available.');
			return;
		}
		var imagePath = 'js/makeyourdesign/img/temp/img-'+index+'.gif';
		makeyourdesign.addImage(imagePath);
	},
	resizeTarget: function() {
		if($('resizeImage').hasClassName('active')) {
			$('buttonResizeTarget').removeClassName('active');
			$('resizeImage').removeClassName('active');
			$('resizeImage').removeClassName('resize');
		} else {
			$('buttonResizeTarget').addClassName('active');
			$('resizeImage').addClassName('active');
			$('resizeImage').addClassName('resize');
		}
	},
	resetTarget: function() {
		var answer = confirm('Are you sure you want to clear the clip design?');
		if(answer) {
			$('innerImageArea').update('');
			$('actualImageArea').update('');
			$('resizeImage').hide();
		}
	}
};

var kyTooltip = {
	show: function(tooltip) {
		try {
			$(tooltip).setStyle({'position':'absolute'});
			new Effect.Appear($(tooltip), { duration: 0.3, delay: 0.3 });
		} catch(error) {
		}
	},
	hide: function(tooltip) {
		try {
			$(tooltip).hide();
			$(tooltip).remove();
		} catch(error) {
		}
	},
	move: function(e, tooltip) {
		try {
			var element = $(tooltip);
			var left;
			var top;
			left = e.pointerX() + 20;
			top = e.pointerY() + 20;
			var width = $(element).getWidth();
			var height = $(element).getHeight();
			if(left + width + 10 > document.viewport.getWidth()) {
				left = e.pointerX() - width - 20;
				top = e.pointerY() + 20;
			}
			if(top + height + 10 > document.viewport.getHeight()) {
				top = e.pointerY() - height + 5;
			}
			if(e || (left && top)) $(element).setStyle( { left: left + 'px', top: top + 'px' } );
		} catch(error) {
		}
	}
};

window.onresize = makeyourdesign.onResize;