$(function(){		
			var scale = 0.75;
			var currentStep = -1;
			function fScale(i){
				return (i*scale);
			}
			function createTimedStack(handler, params, interval){
				for(var i=0; i<params.length; i++){
					doOne(handler, params[i], interval*i);
				}
				function doOne(h, param, timeout){
					setTimeout(function(){
						h(param);
					}, timeout);
				}
			}
			var stepInstructions = {
				step1 : '<em>Step 1:</em> Right click on the dowce icon...',
				step2 : '<em>Step 2:</em> Make your selection...',
				step3 : '<em>Step 3:</em> Add any options and share!..'
			};

			var demo = $('#demo');
			demo.scale(scale);
			var cursor = $('<div id="demo_cursor" class="demo_cursor_pointer"><div></div></div>');
			cursor.clickFX = function(callback){
				cursor.clickMark.show();
				setTimeout(function(){
					cursor.clickMark.hide();
					if(callback){ callback(); }
				}, 250);
			}
			demo.append(cursor);
			cursor.clickMark = cursor.find('div');
			cursor.scale(scale);
			cursor.clickMark.hide();
			
			var menu = $('<div id="demo_menu"></div>');
			demo.append(menu);
			menu.scale(scale);
			
			var menu_highlight = $('<div id="demo_menu_highlight"></div>');
			menu.append(menu_highlight);
			menu_highlight.scale(scale);
			menu.hide();
			
			var overlay = $('<div id="demo_overlay"><div></div></div>');
			demo.append(overlay);
			overlay.scale(scale);
			overlay.hide();
			
			var overlay_highlight = $('<div id="demo_overlay_highlight"></div>');
			demo.append(overlay_highlight);
			overlay_highlight.scale(scale);
			overlay_highlight.hide();
			
			var saveOptions = $('<div id="demo_saveOptions"></div>');
			demo.append(saveOptions);
			saveOptions.scale(scale);
			
			var saveOptions_caption = $('<span id="demo_saveOptions_caption"></span>');
			saveOptions.append(saveOptions_caption);
			saveOptions_caption.scale(scale);
			saveOptions_caption.type = function(text){
				var parts = [];
				for(var i=1; i<text.length; i++){
					parts.push(text.substring(0,i));
				}
				createTimedStack(function(part){
						saveOptions_caption.html(part);
					},
					parts, 
					100
				);
			};
			saveOptions.hide();
			
			var upload = $('<div id="demo_upload"></div>');
			demo.append(upload);
			upload.scale(scale);
			upload.hide();
			
			var savedDialog = $('<div id="demo_savedDialog"></div>');
			demo.append(savedDialog);
			savedDialog.scale(scale);
			savedDialog.hide();
			
			var browser = $('<div id="demo_browser"></div>');
			demo.append(browser);
			browser.scale(scale);
			browser.hide();
			
			function hideControls(){
				$('#demoControls input').fadeOut('fast');
			}
			function showControls(){
				$('#button_replayStep, #button_playStep').fadeIn('fast');
				$('#demo').effect("transfer", { to: $('#button_playStep') }, 750);
			}
			
			function resetDemo(){
				$('#button_playStep').val('Play');
				menu.hide();
				menu_highlight.hide();
				overlay.hide();
				overlay_highlight.hide();
				saveOptions.hide();
				upload.hide();
				savedDialog.hide();
				browser.hide();
				$('#button_restart').hide();
				$('#button_replayStep').hide();
				$('#button_playStep').show();
				currentStep = -1;
				$('#instructions').html('Click on play to start &raquo;');
			}
			
			function playStep(step){
				switch(step){
					case 0:
						hideControls();
						overlay.hide();
						$('#instructions').html(stepInstructions.step1);
						$('#instructions').fadeIn(1500, function(){
							$('#button_playStep').val('Play');
							cursor.animate({top: fScale(580), left: fScale(745) }, 1000, function(){
								cursor.clickFX(function(){
									menu.show();
									cursor.animate({top: fScale(455)}, 1000, function(){
										cursor.clickFX(function(){
											menu_highlight.hide();
											menu.hide();
											overlay.show();
											showControls(); 
											$('#instructions').html(stepInstructions.step2);
											$('#button_playStep').val('Next >>');
											//cursor.addClass('demo_cursor_crosshair');
										});
									});
									$('#instructions').html('Click on <strong>Make new selection</strong>');
									menu_highlight.show();
									menu_highlight.css({ top: fScale(80) });
									setTimeout(function(){ menu_highlight.css({ top: fScale(78) }); }, 250);
									setTimeout(function(){ menu_highlight.css({ top: fScale(53) }); }, 350);
									setTimeout(function(){ menu_highlight.css({ top: fScale(23) }); }, 500);
									setTimeout(function(){ menu_highlight.css({ top: fScale(2) }); }, 750);
								});
							});
						});
						break;
					case 1:
						$('#instructions').html(stepInstructions.step2);
						hideControls();
						overlay.show();
						overlay_highlight.hide();
						saveOptions.hide();
						cursor.animate({left: fScale(50), top: fScale(82)}, 1000, function(){
							cursor.clickFX(function(){
								overlay_highlight.show();
								overlay_highlight.width(0).height(0).css({left: fScale(50), top: fScale(82)});
								overlay_highlight.animate({
										width:fScale(600),
										height:fScale(300)
									},
									1000
								);
								cursor.animate({
										left:fScale(650),
										top:fScale(380)
									},
									1000,
									function(){
										overlay_highlight.hide();
										overlay.hide();
										setTimeout(function(){
											saveOptions_caption.html('');
											saveOptions.fadeIn('slow');
											showControls();
											$('#instructions').html(stepInstructions.step3);
										}, 350);
									}
								);
							});
						});
						break;
					case 2:
						$('#instructions').html(stepInstructions.step3);
						saveOptions_caption.html('');
						hideControls();
						upload.hide();
						savedDialog.hide();
						browser.hide();
						saveOptions.show();
						//cursor.removeClass('demo_cursor_crosshair');
						saveOptions_caption.type('Check out my skills!');
						setTimeout(function(){
							cursor.animate({
									left:430,
									top:190
								},
								1000,
								function(){
									cursor.clickFX(function(){
										saveOptions.fadeOut('normal');
										setTimeout(function(){
											upload.fadeIn('normal');
											setTimeout(function(){
												upload.fadeOut('normal', function(){
													savedDialog.fadeIn('normal');
													cursor.animate({
															left:280,
															top:200
														},
														750,
														function(){
															cursor.clickFX(function(){
																setTimeout(function(){
																	browser.fadeIn('normal');
																	$('#button_replayStep').fadeIn('normal');
																	$('#button_restart').fadeIn('normal');
																	$('#instructions').html('');
																}, 500);
															});
														});
												});	
											}, 750);
										}, 500);
									});
								}
							);
						}, 2500);
						break;
				}
			}
			resetDemo();
			
			$('#button_playStep').click(function(){
				currentStep++;
				if(currentStep>3){ currentStep = 3; }
				playStep(currentStep);
			});
			$('#button_replayStep').click(function(){
				playStep(currentStep);
			});
			$('#button_restart').click(function(){
				resetDemo();
			});
			
			var demoDialog = $('#demoWrap').dialog({
				width:640,
				height:570,
				resizable:false,
				title:'Dowce demo',
				modal:true,
				autoOpen:false
			});
			demoDialog.css('visibility', 'visible');
			$('#demoButton img').click(function(){
				resetDemo();
				demoDialog.dialog('open');
			});
		});
		$.fn.extend({
			scale: function(ratio){
				//$(this).css('top', function(i){ return i+50; });
				$(this)
					.height($(this).height()*ratio)
					.width($(this).width()*ratio)
					.css({
						'top': function(index, value){
							value = value.replace('px', '');
							if(isNaN(value)){ return value; }
							return parseInt(value)*ratio + 'px';
						},
						'left': function(index, value){
							value = value.replace('px', '');
							if(isNaN(value)){ return value; }
							return parseInt(value)*ratio + 'px';
						},
						'background-position': function(index, value){
							if(typeof(value) != 'undefined'){ value = value.replace(/px/g, ''); }
							var pos = {
								left: (typeof(value)!='undefined'?value.split(' ')[0]:$(this).css('background-position-x')).replace('px', ''),
								top: (typeof(value)!='undefined'?value.split(' ')[1]:$(this).css('background-position-y')).replace('px', '')
							};
							return (parseInt(pos.left)*ratio) + 'px ' + (parseInt(pos.top)*ratio) + 'px';
						}
					});
				for(var i=0; i<$(this).children().length; i++){
					$($(this).children(i)).scale(ratio);
				}
			}
		});