$j(function() {
	
	var overlay_wrapper;
	var overlay_panel;
	
	// ecommerce form
	$j('#item').change(function() {
		var cost = $j('#price_' + $j(this).val()).val();
		if (isNaN(cost)) cost = 0;
		var quantity = $j('#quantity').val();
		var total = sum(cost, quantity);
		$j('#price').val(total);
	});
	
	$j('#quantity').keyup(function() {
		var quantity = parseInt($j(this).val());  
		if (isNaN(quantity)) quantity = 0;
		if (quantity < 0) quantity = 0;
		$j(this).val(quantity);
		var cost = $j('#price_' + $j("#item").val()).val();
		if (isNaN(cost)) cost = 0;
		var total = sum(cost, quantity);
		$j('#price').val(total);
	});

	$j('#ecommerce .submit').click( function() { 
		if ($j('#price').val() == 0) { alert('Please select a product option that is in stock and enter a quantity.'); }
		else { ajaxform(); }
	});
	
	// Icon Tooltips
	$j('#product_icons a').tooltip({
		track: true,
		delay: 0,
		showBody: " btm_shadow ",
		showURL: false,
		fixPNG: true
	});
	
	// Product Image lightbox
	$j('#slideshow a').click(function() {
		var image = $j(this).attr('href');
		if (image) {
			var content = '<a href="#" class="hide-overlay x-close">x</a><a href="#" class="print">print</a>';
			content += '<img src="' + image + '" />';
			show_overlay(content,'gallery');
			$j(this).find('span').clone().appendTo('.gallery');
		}
		return false;
	});
	
	// Functions	
	function ajaxform(){
		var optionid = $j("#item").val();
		var optionpicked=$j("#name_" + optionid).val();
		var price=$j("#price").val();
		var title=$j("#product_title").val();
		var content = '<h2>Your item has been added!</h2>';
		content += '<h3>' + title + '</h3>';
		content += '<p>' + optionpicked + '</p>';
		content += '<div><a href="/" class="checkout">Checkout</a><a href="#" class="hide-overlay">Continue Shopping</a></div>';
		content += '<div class="clear"></div>';
		
		var html= $j.ajax({
		   type: "POST",
		   url: "ecommerce_form.php",
		   data: "price="+price,
		   success: function(msg){
				show_overlay(content,'cart');
		   }
		 });
	}

	function sum(cost, quantity) {
		var total = (Math.round(parseFloat(cost) * parseInt(quantity) * 1000) / 1000).toFixed(2);
		return total;
	}
	
	function show_overlay(content,type) {
		if (overlay_wrapper) overlay_wrapper.remove();	
		append_overlay(content,type);
		$j('select').hide();
		overlay_wrapper.fadeIn("fast");
	}
	
	function hide_overlay() {
		overlay_wrapper.fadeOut(500);
		$j('select').show();
		$j('body').unbind('click');
	}
	
	function append_overlay(content,type) {
		overlay_wrapper = $j('<div id="overlay"></div>').appendTo( $j('BODY') );
		overlay_panel = $j('<div id="overlay-panel" class="' + type + '"></div>').appendTo( overlay_wrapper );
		background = $j('<div id="background-fade"></div>').appendTo( overlay_wrapper ); 
	
		overlay_panel.html(content);
	
		attach_overlay_events();
	}
	
	function attach_overlay_events() {
		$j('A.hide-overlay', overlay_wrapper).click( function() {
			hide_overlay();
			return false;
		});
		$j('A.print', overlay_wrapper).click( function() {
			var img = $j('img', overlay_wrapper).attr('src');
			print_image(img);
			return false;
		});
		
		$j('body').bind('click', function(ev) {
			if ($j(ev.target).is('#overlay-panel') || $j(ev.target).parent().attr('id') == 'overlay-panel') { } else {
				hide_overlay();
				return false;
			}
		});
	}
	
	function print_image(img) {
		var win = window.open('', 'Image', 'resizable=yes,...');
		if (win.document) {
			win.document.writeln('<img src="'+ img +'" alt="image" />');
			win.document.close();
			win.focus();
			win.print();
		}
	}
	
});

/* <![CDATA[ */
// Begin Mootools scripts			
var afterUserClick;
var myMooFlowPage = {

	start: function(){

		var mf = new MooFlow($('thumbs'), {
			startIndex: 1,
			interval:12000,
			useAutoPlay: true,
			useKeyInput: true,
			bgColor: '#fff',
			heightRatio: 0.3,
			factor: 100,
			offsetY: -45,
			reflection: false,
			'onStart': function(){
				this.play();
				
				//Next btn
				$('images').next = new Element('a',{'class':'next','events': {'click':this.next.bind(this)}});
				$('images').next.onclick = mf.stop.bind(mf);				
				$('images').adopt($('images').next);
				
				//Prev btn
				$('images').prev = new Element('a',{'class':'prev','events': {'click':this.prev.bind(this)}});
				$('images').prev.onclick = mf.stop.bind(mf);
				$('images').adopt($('images').prev);
				
				//Stop auto scroll when thumb or image is clicked
				$('thumbs').onclick = mf.stop.bind(mf);
				$('slideshow').onclick = mf.stop.bind(mf);
				
			},
			'onAutoStop': function() {
				clearTimeout(afterUserClick);
				afterUserClick = setTimeout(this.play.bind(this), 10000);
			}
		});
	}
	
};

var mainBanner; // add this here so the switchBanner below can call it later

window.addEvent('domready', function () {
	
	myMooFlowPage.start();
	
	mainBanner = new noobSlide({
		box: $('slideshow'),
		items: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16],
		size: 357,
		autoPlay: false
	});

});


function switchBanner(thumb) {
	mainBanner.walk(thumb);
}

/* ]]> */