// Jason Hoi
// Date: --
// In production stage, this will be stored to xxx.js
// helper functions
String.prototype.capitalize = function(){
   return this.replace( /(^|\s)([a-z])/g , function(m,p1,p2){ return p1+p2.toUpperCase(); } );
};

function recordCart(){
	var url = 'functions_ajax/payment/record_cart.php';
	$.post(url, '');
}

$(document).ready(function(){
	var animate_time = 300;
	// add drop down menu behaviors
	$('#main_nav ul li').hover(show_menu, hide_item);
	
	function show_menu(e)
	{
		$(this).find('ul').stop(true, true).slideDown(animate_time);
	}
	
	function hide_item(e)
	{
		$(this).find('ul').fadeOut(animate_time/1.5);
	}
	
	/* ----------------------- */
	/* Testimonials */
	var item_canvas = $('#test_item_con');
	var item_container = $('#test_items');
	
	if (item_canvas.length > 0 )
	{
		var item_scroll_span = item_canvas.height()/3;
		var item_scroll = 0;
		$('#test_item_con').scrollTo('0%', 800 ); // set initial position
		
		// only need scroll effect when the height of all items is larger than container canvas
		if (item_container.height() > item_canvas.height() )
		{
			var scrollSpace = item_container.height() - item_canvas.height();
			
			$('#test_btn_up').click(function(event){
				event.preventDefault();
				
				item_scroll -= item_scroll_span;
				if (item_scroll < 0)
				{
					item_scroll = 0;
					itemScrollTo(item_scroll);
				}
				else
				{
					itemScrollTo(item_scroll);
				}
			});
			$('#test_btn_down').click(function(event){
				event.preventDefault();
				
				item_scroll += item_scroll_span;
				if (item_scroll > scrollSpace)
				{
					item_scroll = scrollSpace;
					itemScrollTo(item_scroll);
				}
				else
				{
					itemScrollTo(item_scroll);
				}
			});
		}
		else
		{
			$('#test_btn_up').hide();
			$('#test_btn_down').hide();
			item_canvas.css('padding-top', '15px');
		}
	}
	
	function itemScrollTo(pos)
	{
		$('#test_item_con').scrollTo(pos+'px', 600);
	}
	
	/* JH Tooptip */
	////// Tool Tip for products (Mouse over or click to refresh)
	var isMOver = false;		// detector for mouse over event
	var timeoutID;				// use to create delay function to load data
	var delay_loading = 300;	// delay time to load and show up tooltip data
	var item_id;				// item ref id (Object -> p_id) for loading data from server (ajax)
	
	// We need to store the obj ref to a variable to optimize the DOM element searching time for jQuery
	var tooltip_obj = $('#tooltip');
	var input_obj = $('a.tooltip');
	
	// Tooltip for product (ref to hidden input field - product_id)		
	input_obj.live('click mouseover mouseout mousemove', function(event) {
		event.preventDefault();
		if (event.type == 'mouseout') {
			isMOver = false;
			tooltip_clear(tooltip_obj);
			
		}else if (event.type == 'mouseover' || event.type == 'click'){
			// show loading
			if ( isMOver == false ){
				tooltip_obj.html('loading data ...');
				tooltip_show_loading(tooltip_obj);
			}
			else
			{
				tooltip_obj.html('refreshing ...');
			}
			
			isMOver = true;
			
			// get id data from hidden field
			item_id = {p_id: $(this).attr('id') };
			
			// tooltip data loading function (delay it with timer)
			timeoutID = window.setTimeout(function() {
				// this will confirm the id of the mouse still in the item
				if (isMOver)
					tooltip_load_data( tooltip_obj , item_id);
				else
					tooltip_clear();
			}, delay_loading);
			
		} else if (event.type == 'mousemove'){
			// when two elements are just next to each other, sometimes, mouse out may come after the mouse over event occurs
			// mouse move on the element will also set is Mouse over to true
			//isMOver = true;
			tooltip_move(event.pageX, event.pageY, tooltip_obj);
		}
	});
	
	function tooltip_clear(obj){
		if (obj != null ){
			obj.html("");
			tooltip_hide(obj);
		}
	}
	function tooltip_show(obj){
		obj.stop(true, true).css('opacity', .9);
	}
	function tooltip_show_loading(obj){
		obj.stop(true, true).fadeIn(animate_time);
	}
	
	function tooltip_move(x, y, obj){
		obj.css('top', y + 12).css('left', x + 16);
	}
	
	function tooltip_hide(obj){
		obj.stop(true, true).hide();
		//$('#tooltip').animate( {opacity: 0} , animate_time );
	}
	
	function tooltip_load_data( obj, in_item_id ){
		$.post("functions_ajax/tooltip/get_item.php", item_id,
			function(res){
					// feedback data from server should not be empty
					if(res != ""){
						if (!isMOver){
							// clear the tooltip if the data just loaded but mouse go outside
							tooltip_clear();
						} else {
							// set tooltip content if the mouse still on the same item when data loaded up from server
							if ( in_item_id.p_id == item_id.p_id){
								obj.html(res);
								// show up tooltip
								tooltip_show( obj );
							}
						}
					}else{
						if (!isMOver){
							// clear the tooltip if the data just loaded but mouse go outside
							tooltip_clear();
						} else {
							// set tooltip content if the mouse still on the same item when data loaded up from server
							if ( in_item_id.p_id == item_id.p_id){
								obj.html('Sorry, no result received.');
								// show up tooltip
								tooltip_show( obj );
							}
						}
					}
			}
		)
	}
	
	/* ----------------------- */
	/* Sliding buy pages */
	// On page loaded, auto scroll to the top of the app
	var topObj = $('#buy_top_con');
	if (topObj.length > 0)
	{
		$(window).scrollTo(topObj, 800, {offset : { top:-10, left:0 }});
	}
	
	var page = $('#scene_div');
	var product_cat_id = 1;
	var cart = $('#cart_con');
	var cartBag = $('#cart_items');
	var cartItem = new Object();
	var post_buttons = '';
	var qty_input = '';
	var pageWidth = 855; // (830px)displaying width + one padding width
	
	var page_slide_time = 450;
	var easing_page_slide = 'easeInBack';
	var easing_in = 'easeInSine';
	var easing_out = 'easeOutSine';
	var page_tween_time = 200;
	var current_page = '';
	var current_page_no = 0;
	var is_init = true;
	
	var products = '';
	var hover_product = '';
	var show_product_timer = '';
	var delay_time = 400;
	
	// cart related data
	var openCart = false;
	var selected_product = '';
	var selected_pcode = '';
	var selected_sw = '';
	var selected_post = '';
	var selected_qty = 0;
	var personal_name = '';
	var personal_name_style = '';
	
	// load up the session data to cart
	updateCart();
	
	// detect if this is a sliding page HTML
	if( page.length > 0)
	{
		init_page();
	}
	
	function setStep(step_no){
		// 1 - remove all selected
		$(".buy_step").each(function(i){
			$(this).removeClass('selected');
		});
		// 2 - find and set to target step
		var step_div = $(".buy_step:eq("+(step_no-1)+")");
		step_div.addClass('selected');
	}
	
	function init_page()
	{
		current_page = 'main_menu';
		showPageLoading();
		showPage(current_page, 1);
	}
	
	function init_menu_buttons()
	{
		// BUTTONS - category menu
		$('#category_menu #main_buttons a').each(function(i)
		{
			$(this).unbind();
			$(this).click(function(event){
				event.preventDefault();
				
				product_cat_id = $(this).attr('id');
				
				current_page = 'products';
				current_page_no = 1;
				
				// next page on the right, p.1
				changePage('right', current_page, current_page_no);
			});
		});
	}
	
	function init_item_buttons()
	{
		// store the reference of all items on the page
		products = $('a.item');
		
		// BUTTONS - items
		products.each(function(i)
		{
			var obj = $(this);
			
			// add unavailable div tag
			if( obj.hasClass('block'))
			{
				obj.prepend('<div class="unavailable">&nbsp;</div>');
			}
				
			obj.unbind();
			obj.click(function(event){
				event.preventDefault();
				// only affect available items
				if( !$(this).hasClass('block'))
				{
					selected_product = $(this).attr('id');
					selected_pcode = $(this).find('div.product-code').text();
					// change to step 2
					setStep(2);
					
					current_page = 'size_weight';
					// next page on the right, page 1
					changePage('right', current_page, current_page_no);
				}
			});
			
			// add hover effects
			obj.hover(
			function(){
				hover_product = $(this).attr('id');
				// fadeOut other button's color when mouse on an item
				products.each(function(i){
					if ($(this).attr('id') != hover_product)
					{
						// only affect available items
						if( !$(this).hasClass('block'))
						{
							$(this).animate(
							{'opacity' : .6},
							{
								duration: animate_time,
								easing: easing_out
							});
						}
					}
				});
				
				
				// only affect available items
				if( !$(this).hasClass('block'))
				{
							
							
				// enrich the color for the product code
				$(this).animate(
				{"opacity": 1}, 
				{
					duration: animate_time/2,
					easing: easing_out
				});
				
				$(this).find('.product-code').animate(
				{"color": '#333333'}, 
				{
					duration: animate_time,
					easing: easing_out
				});
				
				}
				// #end | only affect available items
			},
			function(){
				// restore the color for other items (delay for some time)
				hover_product = '';
				
				// restart a new timer for delay showUp
				window.clearInterval(show_product_timer);
				show_product_timer = window.setInterval(
				function() {
					showProducts();
				}, delay_time);
				
				// tween out product-code color
				$(this).find('.product-code').animate(
				{"color": '#A9A9A9'}, 
				{
					duration: animate_time,
					easing: easing_out
				});
			});
		});
		
		function showProducts()
		{
			// restore the product display only if the hover_product is still nothing
			if( hover_product == '')
			{
				products.each(function(i){
					// only affect available items
					if( !$(this).hasClass('block'))
					{
						$(this).stop(true,false).animate(
						{'opacity' : 1},
						{
							duration: animate_time,
							easing: easing_in
						});
						// tween out product-code color (just to ensure)
						$(this).find('.product-code').animate(
						{"color": '#A9A9A9'}, 
						{
							duration: animate_time,
							easing: easing_out
						});
					}
				});
			}
		}
	}
	
	function init_sw_buttons()
	{
		// BUTTONS - size and weight buttons
		$('.size_choice a').each(function(i)
		{
			$(this).unbind();
			$(this).click(function(event){
				event.preventDefault();
				selected_sw = $(this).attr('id');
				
				// change to step 3
				setStep(3);
				
				current_page = 'review_selection';
				// next page on the right, page not in use
				changePage('right', current_page, current_page_no);
			});
		});
	}
	
	function init_postage_buttons()
	{
		post_buttons = $('#post-group a');
		set_post = $('#apply_post');
		
		// BUTTONS - post location buttons
		post_buttons.each(function(i)
		{
			$(this).click(function(event){
				event.preventDefault();
				
				// 1 - remove all other selected status
				post_buttons.each(function(i){
					$(this).removeClass('selected');
				});
				
				// 2 - select this item
				selected_post = $(this).attr('id');
				$(this).addClass('selected');
			});
		});
		
		set_post.unbind();
		set_post.click(function(event){
			event.preventDefault();
			
			post_buttons.each(function(i)
			{
				if ($(this).hasClass('selected'))
					selected_post = $(this).attr('id');
			});
			
			var is_registered = 0;
			if ( $('#registed_post').is(':checked') )
				is_registered = 1;
			
			var data = {'post_region' : selected_post, 'post_registered' : is_registered};
			
			// 3 - apply postage on all cart items
			applyPostage(data);
		});
	}
	
	function applyPostage(data)
	{
		var url = 'functions_ajax/cart/postage_apply.php';
		$.post(url, data, onUpdatePostage);
	}
	function onUpdatePostage(data)
	{
		if ( current_page == 'checkout' )
		{
			setStep(4);
			changePage('flash', current_page, 1);
			hideCart();
		}
		updateCart();
	}
	
	function init_review_page_buttons()
	{
		/** quantity input */
		qty_input = $('input#input_qty');
		selected_qty = qty_input.val(); // get the setting at start
		qty_input.keyForcing('int'); // INPUT - input for qty
		qty_input.blur(function(event){
			selected_qty = $(this).val();
		});
		
		/** personal name style */
		// first get the default value on the page
		$( "#name_style_radio" ).find('input[type=radio]').each(function(index){
			if ( $(this).is(':checked') )
			{
				personal_name_style = $(this).val();
			}
		});
		$( "#name_style_radio" ).buttonset(); // replace original radio button to UI styled
		$( "#name_style_radio" ).find('input[type=radio]').click(function(event){
			personal_name_style = $(this).val();
		});
		
		/** personal name text */
		personal_name_input = $('#input_custom_name');
		personal_name = personal_name_input.val(); // get the setting at start
		personal_name_input.blur(function(event){
			personal_name = $(this).val();
			
			var d = new Date();
			
			// this special flyer only will show on before 2011 Aug getMonth() < 7
			if (d.getFullYear() == 2011 && (d.getMonth() < 7))
			{
				if (personal_name != '')
				{
					$(this).val('');
					personal_name = $(this).val();
					$( "#dialog-message" ).html('Due to vacation, hoop personalization is not available at this moment, full service will be resumed on August, we apologise for any inconvenience, for more details or pre-ordering, please contact us.');
					$( "#dialog" ).dialog({
						title: 'Function unavaliable',
						resizable: false,
						width:300,
						modal: true,
						buttons: {
							OK: function() {
								$( this ).dialog( "close" );
							}
						}
					});
				}
			}
			else
			{	
				var word_arr = personal_name.split(' ');
				if (word_arr.length > 2)
				{
					$(this).val('');
					personal_name = $(this).val();
					$( "#dialog-message" ).html('Sorry, for online orders, we only accept two words for personal named hoop, please contact us for special requirements.');
					$( "#dialog" ).dialog({
						title: 'Word limit',
						resizable: false,
						width:300,
						modal: true,
						buttons: {
							OK: function() {
								$( this ).dialog( "close" );
							}
						}
					});
				}
			}
		});
	}
	
	function init_nav_buttons()
	{
		// BUTTONS - MENU
		$('#nav_menu').live({
			click: function(event){
				event.preventDefault();
				// change to step 1
				setStep(1);
				current_page_no = 1;
				current_page = 'main_menu';
				changePage('left', current_page, 1);
			}
		});
		
		// BUTTONS - NEXT
		$('#nav_next').live({
			click: function(event){
				event.preventDefault();
				current_page_no += 1;
				changePage('right', current_page, current_page_no);
			}
		});
		
		// BUTTONS - BACK
		$('#nav_back').live({
			click: function(event){
				event.preventDefault();
				if( current_page_no == 1 )
				{
					current_page = 'main_menu';
					changePage('left', current_page, 1);
				}
				else
				{
					current_page_no -= 1;
					changePage('left', current_page, current_page_no);
				}
			}
		});
		
		// BUTTONS - Shopping cart open/close (cart icon on top right)
		$('#cart_button').live({
			click: function(event){
				event.preventDefault();
				if(openCart == false)
				{
					openCart = true;
					showCart();
				}
				else
				{
					openCart = false;
					hideCart();
				}
			}
		});
		
		// BUTTONS - checkout
		$('#checkout_cart').live({
			click: function(event){
				event.preventDefault();
				// go to step 1 
				setStep(4);
				current_page = 'checkout';
				changePage('right', current_page, 1);
				hideCart();
			}
		});
		
		// BUTTONS - clear cart
		$('#clear_cart').live({
			click: function(event){
				event.preventDefault();
				// confirm diague box
				//if (!confirm('Are you sure you want to remove all items in the shopping cart?') ) return false;
				$( "#dialog-message" ).html('This action can not be recovered later, are you sure?');
				$( "#dialog" ).dialog({
					title: 'Clear shopping cart items',
					resizable: false,
					width:300,
					modal: true,
					buttons: {
						"Delete all items": function() {
							clearCartItem();
							$( this ).dialog( "close" );
						},
						Cancel: function() {
							$( this ).dialog( "close" );
						}
					}
				});
				
			}
		});
		
		// BUTTONS - add to cart
		$('#add_to_cart').live({
			click: function(event){
				event.preventDefault();
				// set and update current cart item
				if( storeCurrentItem() )
				{
					current_page = 'main_menu';
					changePage('leftLoading', '', '', addToCart, cartItem);  // addToCart after the slide animation
				}
			}
		});
		
		// BUTTONS - checkout button on the step 3 - qty and post page
		$('#page_checkout').live({
			click: function(event){
				event.preventDefault();
				// set and update current cart item
				if( storeCurrentItem() )
				{
					current_page = 'checkout';
					changePage('rightLoading', '', '', addToCart, cartItem);  // addToCart after the slide animation
				}
			}
		});
		
		// BUTTONS - continue shopping
		$('#continue_shopping').live({
			click: function(event){
				event.preventDefault();
				// change to step 1
				setStep(1);
				current_page = 'main_menu';
				changePage('left', current_page, 1);
			}
		});
		
	}
	
	// normally, this is called whenever cart is updated at function: onUpdateCart()
	function initCartDeleteButtons()
	{
		$('#cart_items a.delete_cart_item').unbind();
		$('#cart_items a.delete_cart_item').click(function(event){
			event.preventDefault();
			var id = $(this).attr('id');
			
			// confirm diague box
			//if (!confirm('Are you sure you want to remove this item?') ) return false;
			$( "#dialog-message" ).html('This action can not be recovered later, are you sure?');
			$( "#dialog" ).dialog({
				title: 'Delete shopping cart item',
				resizable: false,
				width:300,
				modal: true,
				buttons: {
					"Delete this item": function() {
						deleteCartItem(id);
						$( this ).dialog( "close" );
					},
					Cancel: function() {
						$( this ).dialog( "close" );
					}
				}
			});
		});
		
		$('#product_review a.delete_cart_item').unbind();
		$('#product_review a.delete_cart_item').click(function(event){
			event.preventDefault();
			var id = $(this).attr('id');
			
			// confirm diague box
			//if (!confirm('Are you sure you want to remove this item?') ) return false;
			$( "#dialog-message" ).html('This action can not be recovered later, are you sure?');
			$( "#dialog" ).dialog({
				title: 'Delete shopping cart item',
				resizable: false,
				width:300,
				modal: true,
				buttons: {
					"Delete this item": function() {
						deleteCartItem(id);
						$( this ).dialog( "close" );
					},
					Cancel: function() {
						$( this ).dialog( "close" );
					}
				}
			});
		});
	}
	
	// save cart item to global vars (ready to be send to server)
	function storeCurrentItem()
	{
		cartItem.product_code = selected_pcode;
		var sw = selected_sw.split('-',2);
		cartItem.weight = sw[0];
		cartItem.size = sw[1];
		cartItem.qty = selected_qty;
		cartItem.personal_name = personal_name;
		cartItem.personal_name_style = personal_name_style;
		
		if (!(cartItem.qty >= 1))
		{
			$( "#dialog-message" ).html('Quantity should be larger than zero.');
			$( "#dialog" ).dialog({
				title: 'Error',
				resizable: false,
				width:300,
				modal: true,
				buttons: {
					OK: function() {
						$( this ).dialog( "close" );
					}
				}
			});
			
			return false;
		}
		
		for (var key in cartItem)
		{
			if (cartItem.hasOwnProperty(key)){
				if (key != 'personal_name')
				{
					if( cartItem[key] == '' || cartItem[key] == undefined)
					{
						$( "#dialog-message" ).html('Some of the value is missing, please complete all fields.');
						$( "#dialog" ).dialog({
							title: '',
							resizable: false,
							width:300,
							modal: true,
							buttons: {
								OK: function() {
									$( this ).dialog( "close" );
								}
							}
						});
						return false;
					}
				}
			}
		}
		
		// return success when no error
		return true;
	}
	
	// send the current cart item to the server and then refresh
	function addToCart( obj )
	{
		var url = 'functions_ajax/cart/check_qty.php';
		$.post( url, obj, onCheckQty(obj) );
	}
	
	// a simple closure to include extra parameter in above callback function
	function onCheckQty(obj)
	{
		// Handle here results of call
		return function( data, status)
		{
			if ( data != 'OK')
			{	
				$( "#dialog-message" ).html('Sorry, this action can not be proceeded, we only accept maximum of 20 hoops for each online order, please contact us for special discount on bulk order.');
				$( "#dialog" ).dialog({
					title: 'Maximum quantity',
					resizable: false,
					width:300,
					modal: true,
					buttons: {
						OK: function() {
							$( this ).dialog( "close" );
							
							setStep(1);
							current_page = 'main_menu';
							changePage('direct', current_page, 1);
						}
					}
				});
				
			}
			else
			{
				var url = 'functions_ajax/cart/add_item.php';
				$.post(url, obj, onAddToCart);
			}
		}
	}
	function onAddToCart(data)
	{
		if (data != 'OK')
		{
			$( "#dialog-message" ).html('Fail to add item into shopping cart, please contact our site admin.');
			$( "#dialog" ).dialog({
				title: 'System error',
				resizable: false,
				width:300,
				modal: true,
				buttons: {
					OK: function() {
						$( this ).dialog( "close" );
						
						setStep(1);
						current_page = 'main_menu';
						changePage('direct', current_page, 1);
					}
				}
			});
		}
		else
		{
			// the destination page after all data submission
			switch (current_page)
			{
				case 'main_menu':
				setStep(1);
				changePage('direct', current_page, 1);
				break;
				
				case  'checkout':
				setStep(4);
				changePage('direct', current_page, 1);
				break;
			}
			// update Cart bag
			updateCart();
		}
	}
	
	// clear all cart items
	function clearCartItem()
	{
		var url = "functions_ajax/cart/clear_cart.php";
		// delete item and update cart afterward
		$.post(url, '', afterDelete);
	}	
	// delete cart item with the id
	function deleteCartItem(id)
	{
		var url = "functions_ajax/cart/delete_item.php";
		// delete item and update cart afterward
		$.post(url, {'id': id}, afterDelete);
	}
	function afterDelete(){
		// re-enter the check out page if we are currently at this page
		if ( current_page == 'checkout' )
			$('#checkout_cart').click();
		updateCart();
	}
	
	/* Cart bag event/actions */
	// get the updated list for the shopping cart items
	function updateCart()
	{
		var url = "functions_ajax/cart/get_item.php";
		$.post(url, '', onUpdateCart, 'json');
	}
	
	// show up the new content for the cart
	function onUpdateCart(data)
	{
		var item_counter = 0;
		
		// only display table list when data is not a empty json object
		if ( !$.isEmptyObject( data ) )
		{
			var total = 0;
			var content = '<table><thead>\
								<tr>\
									<td class="desc">DESCRIPTION</td>\
									<td class="qty">QTY</td>\
									<td class="price">PRICE</td>\
									<td class="price"></td>\
								</tr>\
							</thead>\
							<tbody>';
			
			for(var i in data)
			{
				item_counter++;
				var all_price = parseFloat(data[i].price); 
				var id = data[i].id;
				var desc = data[i].product_code.toUpperCase();
				var weight = data[i].weight.capitalize();
				var size = data[i].size.capitalize();
				var qty = data[i].qty;
				
				content += '<tr>';
				content += '<td class="desc">' + desc + ' - ' + weight + '/' + size + '</td>';
				content += '<td class="qty">' + qty + '</td>';
				content += '<td class="price">' + all_price + '</td>';
				content += '<td><a id="' + id + '" href="#" class="delete_cart_item">x</a></td>';
				content += '</tr>';
				
				total += all_price;
			}
			
			// add check out and clear buttons
			content += '</tbody><tfoot><tr><td><a href="#" id="checkout_cart">Check Out</a> &nbsp;<a href="#" id="clear_cart">Clear cart</a></td><td class="total">TOTAL</td><td class="price">';
			content += total;
			content +='</td><td>&nbsp;</td></tr></tfoot></table>';
			
			cart.find('#cart_items').html(content);
		}
		else
		{
			var content = '<table><tr><td>Your shopping cart is empty.</td></tr></table>';
			cart.find('#cart_items').html(content);
		}
		
		// update the item counter
		cart.find('#cart_item_num').text( item_counter );
		
		// FX
		cart.find('#cart_item_num').animate({'color': '#AEA1B5' }, animate_time, function(){ $(this).animate({'color': '#FFF' }, animate_time*2);});
		
		// update event handler for delete buttons (because item list may be changed now)
		initCartDeleteButtons();
	}
	
	function showCart(){
		cartBag.stop(true,true).fadeIn(animate_time);
	}
	function hideCart(){
		cartBag.stop(true,true).fadeOut(animate_time);
	}
	
	/* AJAX page sliding system */
	// Ajax page controller
	function showPage(name, no, option)
	{
		if( name != "" && no >=1 )
		{
			switch(name)
			{
				case 'main_menu':
					// load main menu and initilaize
					page.load('ajax_page/products/main_menu.php', function()
					{
						page.hide().fadeIn(page_tween_time);
						init_menu_buttons();
						
						if ( is_init == true )
						{
							init_nav_buttons();
							setStep(1);
							is_init = false;
						}
					});
					break;
				
				case 'size_weight':
					// load Holographic hoop product page
					page.load('ajax_page/size_weight.html', function()
					{
						page.hide().fadeIn(page_tween_time);
						init_sw_buttons();
					});
					break;
				
				case 'products':
					// load Holographic hoop product page
					page.load('ajax_page/products/show_item.php?p='+no+'&cid='+product_cat_id, function()
					{
						page.hide().fadeIn(page_tween_time);
						init_item_buttons();
					});
					break;
					
				case 'review_selection':
					// load Holographic hoop product page
					page.load('ajax_page/products/review_selection.php?pc='+selected_product+'&sw='+selected_sw, function()
					{
						page.hide().fadeIn(page_tween_time);
						init_item_buttons();
						init_review_page_buttons();
					});
					break;
				
				case 'checkout':
					// load Holographic hoop product page
					page.load('ajax_page/payment/review.php', function()
					{
						page.hide().fadeIn(page_tween_time);
						init_item_buttons();
						initCartDeleteButtons();
						init_postage_buttons();
					});
					break;
			}
		}
	}
	
	function changePage(direction, page_name, page_no, callback, data_obj)
	{
		if( direction == 'right' )
		{
			// animate to next page
			page.animate(
			{ "left": -pageWidth },  // animation properties
			{
				duration: page_slide_time,
				easing: easing_page_slide,
				complete: function(){
					clearPage();
					showPageLoading();
					showPage(page_name, page_no); 
				}
			});
		}
		else if( direction == 'left' )
		{
			// animate to next page
			page.animate(
			{ "left": pageWidth },  // animation properties
			{
				duration: page_slide_time,
				easing: easing_page_slide,
				complete: function(){
					clearPage();
					showPageLoading();
					showPage(page_name, page_no); 
				}
			});
		}
		else if( direction == 'flash' )
		{
			// animate to next page
			clearPage();
			showPageLoading();
			showPage(page_name, page_no);
		}
		else if( direction == 'direct' )
		{
			// animate to next page
			showPage(page_name, page_no);
		}
		else if( direction == 'rightLoading' )
		{
			// animate to next page
			page.animate(
			{ "left": -pageWidth },  // animation properties
			{
				duration: page_slide_time,
				easing: easing_page_slide,
				complete: function(){
					clearPage();
					showPageLoading();
					callback(data_obj);
				}
			});
		}
		else if( direction == 'leftLoading' )
		{
			// animate to next page
			page.animate(
			{ "left": pageWidth },  // animation properties
			{
				duration: page_slide_time,
				easing: easing_page_slide,
				complete: function(){
					clearPage();
					showPageLoading();
					callback(data_obj);
				}
			});
		}
	}
	
	function clearPage(){ 
		page.empty();
		page.css('left', 0); 
	};
	
	function showPageLoading()
	{
		page.html('<div class="load_bar"><div>LOADING</div><img src="assets/images/loading_3.gif" width="196" height="20" /></div>'); 
	};
});