$(document).ready(function() {

	// function
	$.demo = function(opacity, time) {
		if( time == 'undefined') {
			time = 200;
		}
		$('.over').stop(true, true).fadeTo(time, opacity);

		// hidetip
		$.hidetip();

		// lightness, 5 - 100
		var lightness = (opacity*95)+5;
		lightness = Math.ceil(lightness);
		$('#lightness').find('span').html(lightness+'%');

		// energy, 0 - 40
		var energy = opacity*40;
		energy = Math.ceil(energy);
		$('#energy').find('span').html(energy+'%');

		// uv, 5 - 99
		var uv = (opacity*95)+5;
		uv = Math.ceil(uv);
		if(uv == 100) {
			uv = 99;
		}
		$('#uv').find('span').html(uv+'%');

		// heat, 5 - 65
		var heat = (opacity*60)+5;
		heat = Math.ceil(heat);
		$('#heat').find('span').html(heat+'%');

		// satisfaction, 0 - 100
		var satisfaction = opacity*100;
		satisfaction = Math.ceil(satisfaction);
		$('#satisfaction').find('span').html(satisfaction+'%');
	}

	// loop function
	var demointerval = '';
	$.loop = function(steps, opacity) {

		var c = 0;
		demointerval = setInterval(
			function() { 
				var value = (opacity*100)/steps*(c+1);
				$('.slider').slider('value', value, 'animated');
				$.demo(value/100, 200);
				c++;
				if( c >= steps) {
					window.clearInterval(demointerval);
					setTimeout(function() {
						$('#tip').show();
						setTimeout(function() {
							$('#tip').effect('shake', { times:3, distance:5 }, 200);
						}, 600);
					}, 600);
				};
			}
		,200);
	}

	// function start demo
	$.startdemo = function(first) {
		if(first == true) {
			setTimeout(function() {
				$.loop(10, 1);
			}, 400);
		} else {
			$('.slider').slider('value', 0, 'animated');
			$.demo(0, 200);
			$.resetdemo();
			setTimeout(function() {
				$.loop(10, 1);
			}, 400);
		}
	}

	// demo reset
	$.resetdemo = function() {
		window.clearInterval(demointerval);
	}

	// hide tooltip
	$.hidetip = function() {
		$('#tip').hide();
	}

	// select medium
	var ran = Math.ceil(Math.random()*4)-1;
	$('ul#medium').tabs("div#mediums > div", {
		initialIndex: ran,
		// history: true,
		onClick: function() {
			$('#overlay').hide();
		}
	});

	// slider
	$(".slider").slider({
		orientation: "vertical",
		range: "min",
		min: 0,
		max: 100,
		value: 0,
		animate: 200,
		slide: function(event, ui) {
			var to = ui.value/100;
			$.demo(to, 200);
		}
	});
	$.demo(0, 0);

	// initial demo animation
	$.preLoadImages(
		[
			home+'graphics/demo/1.png',
			home+'graphics/demo/1_over.png',
			home+'graphics/demo/2.png',
			home+'graphics/demo/2_over.png',
			home+'graphics/demo/3.png',
			home+'graphics/demo/3_over.png',
			home+'graphics/demo/4.png',
			home+'graphics/demo/4_over.png'
		],
		function(){
			$.startdemo(true);
		});

	// show medium chooser
	var mouse_is_inside = false;
	$('#environmnet a').click(function() {
		$('#overlay').show();
		$('.form_content').hover(function(){
			mouse_is_inside = true;
		}, function(){
			mouse_is_inside = false;
		});
		$('body').mouseup(function(){
			if(! mouse_is_inside) {
				$('#overlay').hide();
			}
		});
		return false;
	});

	// start demo
	$('#start a').click(function() {
		$.startdemo(false);
		return false;
	});

});