$(document).ready(function(){
var FEEDBACK_GENERAL_ERROR    = "feedback-general-error";

var FEEDBACK_LOGIN_REQUIRED   = "feedback-login-required";
var FEEDBACK_ADD_CART_SUCCESS        = "feedback-add-cart-success";
var FEEDBACK_REMOVE_CART_SUCCESS     = "feedback-remove-cart-success";
var FEEDBACK_UPDATE_CART_SUCCESS     = "feedback-update-cart-success";
var FEEDBACK_ADD_WISHLIST_SUCCESS    = "feedback-add-wishlist-success";
var FEEDBACK_REMOVE_WISHLIST_SUCCESS = "feedback-remove-wishlist-success";
var FEEDBACK_UPDATE_CART_QTY_SUCCESS = "feedback-update-cart-qty-success";
var FEEDBACK_MYCART_UPDATE_ERROR     = "feedback-mycart-update-error";
var FEEDBACK_WISHLIST_UPDATE_ERROR   = "feedback-wishlist-update-error";
var FEEDBACK_MYPURCHASE_CANCEL_ORDER_SUCCESS = "feedback-mypurchase-cancel-order-success";

var SHOW_LOADING_DELAY = 1000;

var $html = $("html");
var $body = $("body");
var $headerBar = $("#header-bar");
	
function ajaxPost(url, data, success, error){
	ajaxSend("POST", url, data, success, error);
}
function ajaxGet (url, data, success, error){
	ajaxSend("GET" , url, data, success, error);
}
function ajaxSend(method, url, data, success, error){	
	$.ajax({
		type    : method,
		url     : url,
		data    : data,
		success : success,
		dataType: "text"
	}).fail(error);
}
function addHeaderCartCounter(value){	
	addHeaderCounter("mycart", value);
}
function updateHeaderCartCounter(value){	
	updateHeaderCounter("mycart", value);
}
function getHeaderCounter(key){
	var $item = $headerBar.find(".header-bar-item-"+key);
	var $num = $item.find(".header-bar-item-button-num");
	if($num.length == 0){ 
		return 0;
	}
	return parseInt($num.find(".header-bar-item-button-num-wrapper").text());
}
function addHeaderCounter(key, num){
	var counter = getHeaderCounter(key);
	updateHeaderCounter(key, counter + num);
}
function updateHeaderCounter(key, num){
	var $item = $headerBar.find(".header-bar-item-"+key);
	var $num = $item.find(".header-bar-item-button-num");
	if(num == 0){
		$num.remove();
	}else{
		if($num.length == 0){
			$num = $("<div class='header-bar-item-button-num'></div>");			
			var $wrapper = $("<div class='header-bar-item-button-num-wrapper'></div>");
			$wrapper.text(num);
			$num.append($wrapper);
			$item.find(".header-bar-item-button").append($num);			
		}else{
			$num.find(".header-bar-item-button-num-wrapper").text(num);
		}		
	}
}

function appendLoading($parent){
	var spinner = $parent.data("spinner");
	if(spinner == null){
		var opt = {
			color : "#e18078",
			//color: "#ffffff",
			zIndex: "auto"
			//shadow: true
		};
		spinner = new Spinner(opt).spin();
		$parent.data("spinner",spinner);
		$parent.append($(spinner.el));
	}else{
		spinner.spin();
	}	
}
function removeLoading($parent){
	var spinner = $parent.data("spinner");
	if(spinner == null) return;
	spinner.stop();
}
function isLogged(){
	return $body.hasClass("logged");
}


function productAction(url, data, successFeedback, errorFeedback, successCallback, errorCallback){
	function success(response){				
		if(response == "1"){
			log("success");
			hideModalLoading();
			if(isBlank(successFeedback)){
				if(successCallback != null){
					successCallback(response);
				}
			}else{
				feedback(successFeedback, function(){
					if(successCallback != null){
						successCallback(response);
					}
				});	
			}
			
		}else{
			error(response);
		}
	}
	function error(response){
		log("error");
		log(response);
		hideModalLoading();
		if(isBlank(errorFeedback)){
			if(errorCallback != null){
				errorCallback(response);
			}
		}else{
			feedback(errorFeedback, function(){
				if(errorCallback != null){
					errorCallback(response);
				}
			});	
		}
		
	}
	showModalLoading();
	//return;
	if(SHOW_LOADING_DELAY>0){
		setTimeout(function(){
			ajaxPost(url, data, success, error);
		}, SHOW_LOADING_DELAY);	
	}else{
		ajaxPost(url, data, success, error);
	}
}
function myAjaxPost(url, data, success, error){
	if(SHOW_LOADING_DELAY>0){
		setTimeout(function(){
			ajaxPost(url, data, success, error);
		}, SHOW_LOADING_DELAY);
	}else{
		ajaxPost(url, data, success, error);
	}
}

// call from product
function removeProductFromWishlistByProductId(product_id, successCallback, errorCallback){
	log("removeProductFromWishlist");
	var url = "xml/removeProductFromWishlist.php";
	var data = {product_id:product_id};
	productAction(url, data, "", "", successCallback, errorCallback);
}
function removeProductFromWishlistById(id, successCallback, errorCallback){
	log("removeProductFromWishlist");
	var url = "xml/removeProductFromWishlist.php";
	var data = {id:id};
	productAction(url, data, "", "", successCallback, errorCallback);
}
function addProductToWishlistByProductId(product_id, successCallback, errorCallback){
	log("addProductToWishlist");
	var url = "xml/addProductToWishlist.php";
	var data = {product_id:product_id};
	productAction(url, data, "", FEEDBACK_GENERAL_ERROR, successCallback, errorCallback);
}
function addProductToCart(productID, colorID, sizeID, successCallback, errorCallback){
	log("addProductToCart");
	var url = "xml/addProductToCart.php";
	var data = {id:productID, color:colorID, size:sizeID};
	productAction(url, data, "", FEEDBACK_GENERAL_ERROR, successCallback, errorCallback);
}
function updateCart(cartItemID, productID, colorID, sizeID, qty,successCallback, errorCallback){
	log("updateCart");	
	var url = "xml/updateProductToCart.php";
	var data = {id:productID, cart_id:cartItemID, color:colorID, size:sizeID, qty:qty};
	productAction(url, data, "", FEEDBACK_GENERAL_ERROR, successCallback, errorCallback);
}
// call from mycart
function removeProductFromCart(cartItemID, successCallback, errorCallback){
	log("removeProductFromCart");
	var url  = "xml/removeProductFromCart.php";
	var data = {cart_id:cartItemID};
	productAction(url, data, "", "", successCallback, errorCallback);
}
function updateCartQty(cartItemID, qty, successCallback, errorCallback){
	log("updateCartQty");
	var url = "xml/updateCartQty.php";
	var data = {cart_id:cartItemID, qty:qty};
	productAction(url, data, "", "", successCallback, errorCallback);	
}
function getMemberDiscount(amount, success, error){
	var url = "xml/getMemberDiscount.php";
	var data = {amount:amount};
	
	if(SHOW_LOADING_DELAY > 0){
		setTimeout(function(){
			ajaxPost(url, data, success, error);
		}, SHOW_LOADING_DELAY);	
	}else{
		ajaxPost(url, data, success, error);
	}
}

function showModalLoading(){
	var $loading = $("<div id='modal-loading'></div>");
	var options = {
		noClose     : true, 
		noPadding   : true,
		noBoxShadow : true,
		noBackground: true
	};
	overlay($loading);	
	appendLoading($loading);
	/*
	var $loading = $("<div class='lightbox-loading'></div>");
	var options = {noClose:true, noPadding:true};
	lightbox($loading, options);
	*/
}
function hideModalLoading(){
	removeLoading($("#modal-loading"));
	unmodal();
}
function modal(){
	var $modal = $("<div id=\"modal\"></div>");
	$body.append($modal).addClass("modal");
	return $modal;
	/*
	var $clickable = $("<div class='modal-clickable'></div>");
	$modal.append($clickable).append($stuff);
	$body.append($modal).addClass("modal");
	if(click != null){
		$clickable.click(click);
	}	*/
}
function unmodal(callback){
	$("#modal").remove();
	$body.removeClass("modal");
	if(callback != null){
		callback();
	}
}
function overlay($panel){
	lightbox($panel, false, false, false);
}
function lightboxFrame($panel, afterClosed){
	lightbox($panel, false, false, true, afterClosed);
}
function lightboxWindow($panel, afterClosed){
	lightbox($panel, true, true, true, afterClosed);
}
function lightboxMessageNoClose($panel){
	lightbox($panel, true, false, false);
}
function lightboxMessage($panel, afterClosed){
	lightbox($panel, true, false, true, afterClosed);
}
function lightbox($panel, withStyle, withPadding, withClose, afterClosed){
	function onClose(){
		lightbox_close(afterClosed);
	}
	var $modal = modal();
	var $table = $("<div class='lightbox-table'></div>");
	$table.hide();
	var $cell  = $("<div class='lightbox-cell'></div>");	
	var $win = $("<div class='lightbox-window'></div>");
	$win.append($panel);
	if(withStyle == true){
		$win.addClass("lightbox-window-with-style");
	}
	if(withPadding == true){
		$win.addClass("lightbox-window-with-padding");
	}
	$cell.append($win);
	$table.append($cell);		
	$modal.append($table);
	//
	if(withClose == true){
		var $close = get_lightbox_close_button();	
		$close.click(onClose);
		if(withPadding == true){
			$win.addClass("lightbox-window-with-close-button");
		}
		$win.append($close);
		var $clickable1 = $("<div class='modal-clickable'></div>");
		var $clickable2 = $("<div class='modal-clickable'></div>");
		$clickable1.click(onClose);
		$clickable2.click(onClose);
		$modal.prepend($clickable1);
		$cell.prepend($clickable2);
	}
	//
	$table.fadeIn();
}
/*
function lightbox($panel, options, afterClosed){	
	function onClose(){
		lightbox_close(afterClosed);
	}
	var $modal = modal();
	var $table = $("<div class='lightbox-table'></div>");
	$table.hide();
	var $cell  = $("<div class='lightbox-cell'></div>");	
	var $win = $("<div class='lightbox-window'></div>");
	$win.append($panel);
	if(options){
		if(options.noPadding){
			$win.addClass("lightbox-window-no-padding");
		}
		if(options.noBoxShadow){
			$win.addClass("lightbox-window-no-box-shadow");
		}
		if(options.noBackground){
			$win.addClass("lightbox-window-no-background");
		}
	}
	if(options && options.noClose){
	}else{
		var $close = get_lightbox_close_button();	
		$close.click(onClose);
		$win.addClass("lightbox-window-with-close-button").append($close);
		var $clickable1 = $("<div class='modal-clickable'></div>");
		var $clickable2 = $("<div class='modal-clickable'></div>");
		$clickable1.click(onClose);
		$clickable2.click(onClose);
		$modal.append($clickable1);
		$cell.append($clickable2);
	}
	$cell.append($win);
	$table.append($cell);		
	$modal.append($table);
	$table.fadeIn();
}*/
function get_lightbox_close_button(){
	return $("<div class='lightbox-close-button'><div class=' icon icon-close'></div></div>");
}
function lightbox_close(callback){
	var $modal = $("#modal");
	if($modal.length == 0) {
		if(callback != null){
			callback();
		}
		return;
	}
	$modal.find(".lightbox-table").fadeOut("fast", function(){
		unmodal(callback);
	});
}
function getFeedbackMessagePanel(text){
	var $wrapper = $("<div class='feedback-message-wrapper'></div>");
	var $div = $("<div class='feedback-message'></div>");
	$wrapper.append($div);
	$div.text(text);
	return $wrapper;
}
function getFeedbackMessage(key){
	return $("#"+key).text();
}
function feedback(key, afterClosed){	
	feedbackMessage(getFeedbackMessage(key), afterClosed);
}
function feedbackMessage(text, afterClosed){
	//var $wrapper = $("<div class='feedback-message-wrapper'></div>");
	//var $div = $("<div class='feedback-message'></div>");
	//$wrapper.append($div);
	//$div.text(text);
	lightboxMessage(getFeedbackMessagePanel(text), afterClosed);
}
function requireLogin(){
	var text = $("#"+FEEDBACK_LOGIN_REQUIRED).text();
	var $wrapper = $("<div class='feedback-message-wrapper'></div>");
	var $div = $("<div class='feedback-message'></div>");
	$wrapper.append($div);
	$div.text(text);
	var $button = $("<a class='common-button feedback-message-button' href='login.php'></a>");
	$button.text("login");
	$div.append($button);
	lightboxMessage($wrapper);
}
function isCanvasSupported(){
  var elem = document.createElement('canvas');
  return !!(elem.getContext && elem.getContext('2d'));
}function initForm(){
	log("initForm()");
	function initCommonForm(){
		var $form = $("form.common-form");
		if($form.length == 0) return;
		log("initCommonForm()");
		var $submit = $form.find(".form-input-submit");
		//
		function onsubmit(){
			log("onsubmit()");
			$form[0].submit();
		}
		//
		if($submit.is("input[type='submit']")){
			$form.bind("submit", function(e){
				e.preventDefault();
				if($submit.hasClass("common-button-disabled")) return;
				onsubmit();
			});	
		}else{
			$submit.click(function(){
				if($submit.hasClass("common-button-disabled")) return;
				onsubmit();
			});
		}
		
		$form.bind("submit", function(e){
			e.preventDefault();
			if($submit.hasClass("common-button-disabled")) return;
			onsubmit()
		});
		/*
		$submit.click(function(){
			if($(this).hasClass("common-button-disabled")) return;
			onsubmit();
		});*/
		SimpleForm_initForm($form, $submit);
	}
	
	/*
	function isInputText($input){
		return $input.hasClass("form-input-text");
	}
	function isInputTextarea($input){
		return $input.hasClass("form-input-textarea");
	}
	function isInputSelect($input){
		return $input.hasClass("form-input-select");
	}
	function isInputEmail($input){
		return $input.hasClass("form-input-email");
	}
	function isInputPassword($input){
		return $input.hasClass("form-input-password");
	}
	function isInputConfirmPassword($input){
		return $input.hasClass("form-input-confirm-password");
	}
	function initCommonForm(){
		//
		function submitForm($form){
			

			//alert("submit");
			log(".submit()");
			$form[0].submit();
		}
		function validateElement($element){
			clearElementError($element);
			var $input = $element.find(".form-input");
			var skip_validate = ($input.attr("data-validate")=="false");
			//
			function validateRequired(){
				//$element.removeClass("form-element-validate-error-required");
				if(!$element.hasClass("form-element-required")) return true;
				if(isInputText($input) || isInputTextarea($input) || isInputEmail($input) || isInputPassword($input) || isInputConfirmPassword($input)){
					return !isBlank($input.val());
				}else if(isInputSelect($input)){
					return ($input[0].selectedIndex != 0);
				}
				return false;
			}
			function isValidPassword(password){
			  var regExp = new RegExp(/^.{6,8}$/);
			  return regExp.test(password);
			}
			function validateEmail(){
				//$element.removeClass("form-element-validate-error-email");
				if(!isInputEmail($input)) return true;				
				return isValidEmail($input.val());
			}
			function validatePassword(){
				if( (!isInputPassword($input)) && (!isInputConfirmPassword($input)) ) return true;
				//if(!isInputPassword($input)) return true;
				return isValidPassword($input.val());
			}
			function validateConfirmPassword(){
				if(!isInputConfirmPassword($input)) return true;
				var password = $input.closest("form").find(".form-input-password").val();
				var confpswd = $input.val();				
				return (password==confpswd);
			}
			//			
			//log("validateElement " + $input.attr("name"));			
			if(!validateRequired()) {
				if(!skip_validate){
					addElementValidateError($element, "required");
				}
				return false;
			}
			//
			if(skip_validate) return true;
			//
			if(!validateEmail()){
				addElementValidateError($element, "email");
				return false;
			}
			if(!validatePassword()){
				addElementValidateError($element, "password");
				return false;
			}
			if(!validateConfirmPassword()){
				addElementValidateError($element, "confirm-password");
				return false;
			}
			//
			return true;
		}
		
		function validateForm($form){//return true;
			var result = true;
			$form.find(".form-element").each(function(){
				if(!validateElement($(this))){
					result = false;
				}
				
			});
			return result;
		}
		function addElementValidateError($element, error){
			$element.addClass("form-element-error");
			var errorClass = "form-element-validate-error-" + error;
			var errorData = $element.data("validateError");
			if(errorData == null){
				errorData = [];
			}
			errorData.push(errorClass);
			$element.data("validateError", errorData);
			$element.addClass(errorClass);
		}		
		function clearElementError($element){
			$element.removeClass("form-element-error");
			var errorData = $element.data("validateError");
			if(errorData == null) return;			
			for(var i=0;i<errorData.length;i++){
				var error = errorData[i];
				$element.removeClass(error);
			}
			errorData = [];
			$element.data("validateError", errorData);
		}
		function onInputChange($input){
			log("onInputChange " + $input.attr("name"));
			clearElementError($input.closest(".form-element"));
		}
		function attemptSubmit($form){
			log("attemptSubmit 123");
			if(validateForm($form)){
				submitForm($form);
			}else{
				log("validate fail");
			}
		}
		//
		var $forms = $(".common-form");
		if($forms.length == 0) return;
		log("initCommonForm()");
		$forms.each(function(){
			var $form = $(this);
	
			var $submit = $form.find(".form-input-submit");
			$form.bind("submit", function(e){
				e.preventDefault();
				if($submit.hasClass("common-button-disabled")) return;
				
				
				var $form = $(this);
				attemptSubmit($form);
			});
			$form.find(".form-input").bind("change input", function(){
				onInputChange($(this));				
			});
		});
	}*/
	initCommonForm();
}
initForm();function SimpleForm_initForm($form, $submit, skip_validate, change_only){
	var $formFields = $form.find(".form-field");
	var INPUT_TEXT_SELECTOR = "input[type='text'], input[type='email'], input[type='password'], input[type='number']";
	function init(){
		//log($required.filter("input").length)				
		
		$formFields.find(INPUT_TEXT_SELECTOR).bind("input propertychange", function(){
			//onInputChange($(this));
			//main();
			on_input_text_change($(this));
			on_something_change();
		});
		$formFields.find("textarea").bind("input propertychange", function(){
			on_something_change();
		});
		$formFields.find("select").bind("change", function(){
			//onInputChange($(this));
			on_select_change($(this));
			on_something_change();
			//main();
		});
		$formFields.find("input[type='checkbox']").bind("change", function(){
			on_checkbox_change($(this));
			on_something_change();
		});
		
		if(change_only == true){
			save_old_values();
		}
	}
	function on_checkbox_change($input){
		var $formField = $input.closest(".form-field");
		var value = "";
		if($input[0].checked){
			value = $input.val();
		}
		if(value == $input.data("old-value")){
			$formField.data("dirty", false);
		}else{
			$formField.data("dirty", true);
		}
	}
	function on_input_text_change($input){
		var $formField = $input.closest(".form-field");
		if($input.val() == $input.data("old-value")){
			$formField.data("dirty", false);
		}else{
			$formField.data("dirty", true);
		}
	}
	function on_select_change($input){
		var $formField = $input.closest(".form-field");
		if($input.find("option:selected").val() == $input.data("old-value")){
			$formField.data("dirty", false);
		}else{
			$formField.data("dirty", true);
		}
	}
	function on_textarea_change($input){
		on_input_text_change($input);
	}
	function save_input_text_old_value($input){
		$input.data("old-value", $input.val());
	}
	function save_checkbox_old_value($input){
		var value = "";
		if($input[0].checked){
			value = $input.val();
		}
		$input.data("old-value", value);
	}
	function save_select_old_value($input){
		$input.data("old-value", $input.find("option:selected").val());
	}
	function save_textarea_old_value($input){
		save_input_text_old_value($input);
	}
	
	function save_old_values(){
		$formFields.each(function(){
			var $this = $(this);
			if(!$this.hasClass("form-field-readonly")){
				$this.find(INPUT_TEXT_SELECTOR).each(function(){
					save_input_text_old_value($(this));
				});
				$this.find("select").each(function(){
					save_select_old_value($(this));
				});
				$this.find("textarea").each(function(){
					save_textarea_old_value($(this));
				});
				$this.find("input[type='checkbox']").each(function(){
					save_checkbox_old_value($(this));
				});
			}
		});
	}
	function on_something_change(){
		log("on_something_change()");
		validate_all(true);
	}
	function validate_all(with_mark){
		var pass = true;
		$formFields.each(function(){
			var $field = $(this);
			var check = validateField($field);			
			if(with_mark){
				if(check){
					$field.removeClass("form-field-validation-fail");
				}else{
					$field.addClass("form-field-validation-fail");
				}
			}
			if(!check){
				log("fail");
				pass = false;
			}
		});
		updateSubmit(pass);
	}
	function find_dirty(){
		log("--found_changes--")
		var found = false;
		$formFields.each(function(){
			var $this = $(this);
			if(!$this.hasClass("form-field-readonly")){
				if($this.data("dirty") != null){
					log($this.attr("data-name") + " dirty = " + $this.data("dirty"));
					if($this.data("dirty") == true){
						found = true;
					}
				}
			}
		});
		return found;
	}
	function updateSubmit(val){
		if(val){
			if(change_only){
				if(find_dirty()){
					$submit.removeClass("common-button-disabled");
				}else{
					$submit.addClass("common-button-disabled");
				}
			}else{
				$submit.removeClass("common-button-disabled");
			}
		}else{
			$submit.addClass("common-button-disabled");
		}
	}
	
	function validateField($field){
		var $input = $field.find(".form-field-input");
		if($field.hasClass("form-field-readonly")) return true;
		//log("checkField " + $field.attr("data-name"))
		//		
		function isRequired($f){
			return $f.hasClass("form-field-required");
		}
		function isMirror($f){
			return !isBlank($f.attr("data-mirror"));
		}
		function isInputText($i){
			return $i.hasClass("form-field-input-text");
		}
		function isInputPassword($i){
			return $i.hasClass("form-field-input-password");
		}
		function isInputEmail($i){
			return $i.hasClass("form-field-input-email");
		}
		function isInputSelect($i){
			return $i.hasClass("form-field-input-select");
		}
		function isInputTextarea($i){
			return $i.hasClass("form-field-input-textarea");
		}
		function getValue($i){
			if(isInputTextarea($i)) return $i.val();
			if(isInputSelect($i)) return $i.find("option:selected").val();
			return $i.val();
		}
		function isInputTypeOfText($i){
			return (isInputText($i) || isInputTextarea($i) || isInputEmail($i) || isInputPassword($i));
		}
		function validateRequired(){
			if(!isRequired($field)) return true;
			if(isInputTypeOfText($input)){
				return !isBlank($input.val());
			}else if(isInputSelect($input)){
				return ($input[0].selectedIndex != 0);
			}
			return false;
		}	
		function validateEmail(){
			if(!isInputEmail($input)) return true;
			return isValidEmail($input.val());
			//return false;
		}
		function validatePassword(){
			if(!isInputPassword($input)) return true;				
			var value = trim($input.val());
			if(value == "") return true;
			var regExp = new RegExp(/^.{6,20}$/);
			return regExp.test(value);
		}
		function validateMirror(){
			if(!isMirror($field)) return true;
			var mirror = $field.attr("data-mirror");
			var $target = $formFields.find(".form-field-input[name="+mirror+"]");				
			return getValue($input) == getValue($target);
		}
		//
		if(!validateRequired()){
			//log("validateRequired fail");
			return false;
		}
		if(!validateEmail()){
			//log("validateEmail fail");
			return false;
		}
		if(!validatePassword()){
			//log("validatePassword fail");
			return false;
		}
		if(!validateMirror()){
			//log("validateMirror fail");
			return false;
		}
		
		return true;
	}
	function main(){
		log("start checking...");
		var check = true;
		//
		
		/*
		function checkInput($input){
			
			//
			function checkInputText($input){
				return (!isBlank($input.val()));
			}
			function checkSelect($input){
				return $input.find("option:selected").val()!="";
			}
			function checkPassword($input){
				var value = trim($input.val());
				var regExp = new RegExp(/^.{6,8}$/);
				return regExp.test(value);
			}
			//			
			log("checkField " + $input.attr("name"))
			
			if($input.is("input[type='text']")){
				return checkInputText($input);
			}
			if($input.is("input[type='password']")){
				return checkPassword($input);
			}
			if($input.is("select")){
				return checkSelect($input);
			}
			log("unexpect type");
			return false;
		}
		*/
		//
		$formFields.each(function(){
			var $this = $(this);
			var result = checkField($(this));
			//log(result);
			
		});
		/*
		$required.each(function(){
			var result = checkInput($(this));
			log(result);
			if(!result){				
				check = false;
			}
		});
		*/
		if(check){
			$submit.removeClass("common-button-disabled");
		}else{
			$submit.addClass("common-button-disabled");
		}
	}
	init();
	if(skip_validate == true){
	}else{
		validate_all(false);
	}
}


function initTicker(){
	log("initTicker()");
	var $ticker = $("#ticker");
	$ticker.find(".close-button").click(function(){
		$(this).unbind("click");
		$ticker.slideUp({
			duration: 400,
			easing  : "easeOutCubic",
			complete: function(){
				$ticker.remove();
			}
		});
		var url = "xml/hideTicker.php";
		var data = {};
		function success(response){}
		function error(response){}
		ajaxPost(url, data, success, error);
	});
}
initTicker();
function initMenu(){
	log("initMenu()");
	var $menu = $("#main-menu");
	////////
	function initMenu4Touch(){

		$menu.find(".menu-list-item").each(function(){
			var $this = $(this);
			if($this.find(".submenu-wrapper").length == 0) return;
			$this.find(".menu-item").click(function(e){
				e.preventDefault();
				$this.addClass("menu-list-item-hover");
			});	
		});		
		
		$menu.find(".submenu-modal").click(function(){
			$(this).closest(".menu-list-item-hover").removeClass("menu-list-item-hover");
		});
	}
	////////
	$menu.find(".menu-list-item").last().addClass("menu-list-item-last-child");
	if(Modernizr.touch){
		initMenu4Touch();
	}
}
initMenu();function initFooter(){
	log("initFooter()");
	var $footer = $("#footer");
	$("#footer-to-top-button").click(function(e){
			e.preventDefault();
			//log($(window).scrollTop());
			$("html, body").animate({ scrollTop: 0 }, 700, "easeOutCubic");
		});
}
initFooter();
function initProduct(){
	log("initProduct()");
	var $detail = $("#product-detail");
	var $info = $("#product-detail-info");
	var $main = $("#product-detail-main");
	var pid = $detail.attr("data-id");
	
	function initInfo(){
		var CHANGE = "product_detail_selection_changed";
		var $add_button  = $info.find(".product-detail-action-button-add");
		var $update_button = $main.find(".product-detail-update-footer-button");
		var $action_buttons= $info.find(".product-detail-action-button");
		
		var $grids = $info.find(".product-detail-color-grid");
		
		function init_colors(){			
			var $titles = $info.find(".product-detail-color-title");
			function select_grid($grid){
				$grids.filter(".product-detail-color-grid-selected").removeClass("product-detail-color-grid-selected");
				$grid.addClass("product-detail-color-grid-selected");
				var index = $grids.index($grid);
				$titles.filter(".product-detail-color-title-selected").removeClass("product-detail-color-title-selected");
				$titles.eq(index).addClass("product-detail-color-title-selected");
				selection_change();
			}
			$grids.click(function(){
				var $this = $(this);
				if($this.hasClass("product-detail-color-grid-selected")) return;
				select_grid($this);
			});
		}
		var $sets    = $main.find(".product-detail-more-photos-set");
		var $viewers = $main.find(".product-detail-images-wrapper");
		function change_detail_main(){			
			var selected_color = $grids.index($grids.filter(".product-detail-color-grid-selected"));
			//
			function change_set(index){
				var $set = $sets.eq(index);
				function init_set($set){
					if($set.attr("data-status")=="show")return;
					$set.find(".product-detail-thumbnail").each(function(){
						var $this = $(this);
						var src = $this.attr("data-src");
						$this.attr("src",src);
					});
					$set.attr("data-status", "show");
				}
				init_set($set);
				$set.show();
				$set.siblings(".product-detail-more-photos-set").hide();
			}
			function change_viewer(index){
				var $viewer = $viewers.eq(index);
				function init_viewer(){
					load_image($viewer, 0);
				}
				init_viewer();
				$viewer.show();
				$viewer.siblings(".product-detail-images-wrapper").hide();
			}	
			//
			change_set(selected_color);
			change_viewer(selected_color);
		}
		function load_image($viewer, index){				
			var $image = $viewer.find(".product-detail-image").eq(index);
			var status = $image.attr("data-status");
			if(status == "show") return;
			function do_load(){
				//var $div = $("<div class='product-detail-image-loading'></div>");
				//$image.append($div);
				appendLoading($image);
				$image.attr("data-status", "loading");
				var $img = $image.find(".product-detail-image-img");
				var src = $img.attr("data-src");					
				$img.load(function(){
					$img.unbind("load");
					log(src + " loaded");
					removeLoading($image);
					$image.attr("data-status", "show");
					//$div.remove();
					$img.fadeIn("fast", function(){
						$image.find(".product-detail-image-tn").remove()
					});
					
				});
				//return;
				setTimeout(function(){
					$img.attr("src",src);
				}, SHOW_LOADING_DELAY);
				
				log(src + " loading");
				//$img.attr("src",src);
			}
			//
			if(status == ""){
				do_load();
			}				
		}
		
		
		function init_more_photos(){
			var $wrapper = $main.find(".product-detail-more-photos-wrapper");
			if($wrapper.length == 0) return;
			var $prev = $wrapper.find(".product-detail-image-prev-button");
			var $next = $wrapper.find(".product-detail-image-next-button");
			var $imageViewer = $main.find(".product-detail-image-viewer");
			var $thumbnails = $main.find(".product-detail-thumbnail");
			
			var dur = 400;
			var easing = "easeOutQuad";
			
			function update_nav($set, index){
				var $p = $set.find(".product-detail-image-prev-button");
				var $n = $set.find(".product-detail-image-next-button");
				if(index > 0){
					$p.addClass("product-detail-image-nav-button-active");
				}else{
					$p.removeClass("product-detail-image-nav-button-active");
				}
				var count = parseInt($set.attr("data-count"));
				if(index == (count-1)){
					$n.removeClass("product-detail-image-nav-button-active");
				}else{
					$n.addClass("product-detail-image-nav-button-active");
				}
				$set.find(".product-detail-image-count-value").text(index+1);
			}
			
			function nav($set, dir){
				var index = parseInt($set.attr("data-index"));				
				index = index + dir;
				$set.attr("data-index", index);				
				// viewer
				var $viewer = $viewers.eq($sets.index($set));
				var left = -400 * index;
				$viewer.animate({left:left}, dur, easing);
				// nav
				var $tn_wrapper = $set.find(".product-detail-thumbnails-wrapper");
				var tn_left = -120 * (index+1);
				$tn_wrapper.animate({left:tn_left}, dur, easing);
				//
				load_image($viewer, index)
				update_nav($set, index);
			}
			function prev($set){
				nav($set, -1);
			}
			function next($set){
				nav($set, 1);
			}
			
			$prev.click(function(){
				var $this = $(this);
				if(!$this.hasClass("product-detail-image-nav-button-active")) return;
				prev($this.closest(".product-detail-more-photos-set"));
			});
			$next.click(function(){
				var $this = $(this);
				if(!$this.hasClass("product-detail-image-nav-button-active")) return;
				next($this.closest(".product-detail-more-photos-set"));
			});
			$thumbnails.click(function(){
				var $this = $(this);
				var $set = $this.closest(".product-detail-more-photos-set");
				var current = parseInt($set.attr("data-index"));
				var index = $set.find(".product-detail-thumbnail").index($this);
				nav($set, index - current);
			});
		}
		
		function selection_change(){
			//log("selection_change");
			$detail.trigger(CHANGE);
			//$info.trigger(CHANGE);
		}
		function on_change(){
			log("on_change");
			update_action_button();			
			change_detail_main();
		}
		function get_size_value(){
			return $info.find(".product-detail-size-select").val();
		}
		function get_size_label(){
			return $info.find(".product-detail-size-select option:selected").text();
		}
		function get_color_index(){
			return $grids.index($grids.filter(".product-detail-color-grid-selected"));			
		}
		function get_color_value(){
			return $info.find(".product-detail-color-grid-selected").attr("data-id");
		}
		function get_qty_value(){
			var $select = $(".product-detail-quantity-select");
			if($select.length == 0) return "1";
			return $select.val();
		}
		function get_qty_label(){
			var $select = $(".product-detail-quantity-select");
			if($select.length == 0) return "1";
			return $select.find("option:selected").text();
		}
		function update_action_button(){
			
			if($action_buttons.hasClass("product-detail-action-button-unavailable")){
				return;
			}
			var color_selected   = ($info.find(".product-detail-color-grid-selected").length==1);
			var size_selected    = (get_size_value()!="");
			if(color_selected && size_selected){
				$action_buttons.addClass("product-detail-action-button-ready");	
				$update_button.removeClass("common-button-disabled");
			}else{
				$action_buttons.removeClass("product-detail-action-button-ready");
				$update_button.addClass("common-button-disabled");
			}
			/*
			var add_button_exist = ($add_button.length==1);
			if(color_selected && size_selected && add_button_exist){
				$add_button.addClass("product-detail-action-button-add-ready");
			}else{
				$add_button.removeClass("product-detail-action-button-add-ready");
			}*/
		}
		function init_size(){
			$info.find(".product-detail-size-select").bind("change", selection_change);
		}
		function get_feedback_panel(type){
			var button_title = "";
			var button_href  = "";
			var header = "";
			if(type=="add-cart"){
				header = "已加至購物車 Item is added to cart";
				button_title = "查看購物車view cart / 結算checkout";
				button_href  = $detail.attr("data-mycart");
			}else if(type=="add-wishlist"){
				header = "已加至心商單清單Item is added to wish list";
				button_title = "查看心水商品清單 view wish list";
				button_href  = $detail.attr("data-wishlist");
			}else if(type=="update-cart"){
				header = "購物車已更新 Cart is updated";
				button_title = "返回購物車 Back to cart";
				button_href  = $detail.attr("data-mycart");
			}
			
			var $panel = $("<div class='product-action-feedback'></div>");
			var $header = $("<div class='product-action-feedback-header'></div>");
			$header.text(header);
			var $content = $("<div class='product-action-feedback-content-wrapper'></div>");
			//
			var $img = $("<img class='product-action-feedback-thumbnail'/>");
			var src = $viewers.filter(":visible").attr("data-theme-tn");
			$img.attr("src", src);
			var $img_cell = $("<div class='product-action-feedback-thumbnail-wrapper'></div>");
			$img_cell.append($img);
			//
			var $info_wrapper = $("<div class='product-action-feedback-info-wrapper'></div>");
			var $info_block   = $("<div class='product-action-feedback-info'></div>");
			//
			var $fb_title = $("<div class='product-action-feedback-info-title'></div>");
			$fb_title.text($info.find(".product-detail-title").text())
			$info_block.append($fb_title);
			//
			var heels = $info.find(".product-detail-heels").text();
			if(!isBlank(heels)){
				var $fb_heels = $("<div class='product-action-feedback-info-heels'></div>");
				$fb_heels.text(heels);					
				$info_block.append($fb_heels);
			}					
			//
			if((type=="add-cart") || (type=="update-cart")){
			var $fb_color = $("<div class='product-action-feedback-info-color'></div>");
			var $color_title = $("<div class='product-action-feedback-info-color-title'></div>");
			$color_title.text($info.find(".product-detail-color-title-selected").text());
			var $color_grid  = $("<div class='product-action-feedback-info-color-grid'></div>");
			$color_grid.append($info.find(".product-detail-color-grid-selected").clone());
			$fb_color.append($color_title).append($color_grid);
			//
			//$fb_color.text($info.find(".product-detail-info-header-color").text()+": " + $info.find(".product-detail-color-title-selected").text());
			//
			
			$info_block.append($fb_color);
			//
			var $fb_size = $("<div class='product-action-feedback-info-size'></div>");
			$fb_size.text($info.find(".product-detail-info-header-size").text()+": " + get_size_label());
			$info_block.append($fb_size);			
			//
			if(type=="update-cart"){
			var $fb_qty   = $("<div class='product-action-feedback-info-qty'></div>");
			$fb_qty.text($info.find(".product-detail-info-header-quantity").text()+": " + get_qty_label());
			$info_block.append($fb_qty);	
			}
			//
			var $fb_selling = $("<div class='product-action-feedback-info-price'></div>");
			$fb_selling.html($info.find(".product-detail-info-header-price").text()+": <span class='product-action-feedback-info-price-value'>" + $info.find(".product-detail-selling").text()) + "</span>";
			$info_block.append($fb_selling);
			}
			//
			var $button = $("<a class='common-button product-action-feedback-button' ></a>");
			$button.text(button_title);
			$button.attr("href", button_href);
			//
			$info_wrapper.append($info_block);
			$content.append($img_cell);
			$content.append($info_wrapper);
			$panel.append($header);
			$panel.append($content);
			$panel.append($button);			
			return $panel;
		}
		function init_action(){
			function add_to_cart(){
				function success(response){
					log("add_to_cart success");	
					var $panel = get_feedback_panel("add-cart");
					lightboxMessage($panel);
					addHeaderCartCounter(1);
				}
				function error(response){
					log("add_to_cart error");
					log(response);
				}
				addProductToCart(pid, get_color_value(), get_size_value(), success, error);				
			}
			
			//
			$add_button.click(function(){
				if(!$add_button.hasClass("product-detail-action-button-ready")) return;
				add_to_cart();
			});			
			//$update_button.click(function(){
			//	if(!$update_button.hasClass("product-detail-action-button-ready")) return;
			//	update_cart();
			//});
			update_action_button();
		}
		function init_enlarge(){
			function enlarge(){
				function close(){
					lightbox_close();
				}
				var index = parseInt($main.find(".product-detail-more-photos-set").filter(":visible").attr("data-index"));
				var $wrapper = $("<div class='product-detail-enlarge-img-wrapper-table'></div>");
				$wrapper.attr("data-index", index);
				var $imgs = $viewers.filter(":visible").find(".product-detail-image-img");
				var img_w;
				
				$imgs.each(function(i){
					var src = $(this).attr("data-src");
					var $img = $("<img class='product-detail-enlarge-img'/>");
					
					if(i == index){
						$img.attr("src", src);
						$img.addClass("product-detail-enlarge-img-visible");
					}else{
						$img.attr("data-src", src);
					}
					var $img_wrapper = $("<div class='product-detail-enlarge-img-wrapper'></div>");
					$img_wrapper.append($img);
					$wrapper.append($img_wrapper);
				});
				
				
				var $lightbox = $("<div class='product-detail-enlarge-lightbox'></div>");
				var $window = $("<div class='product-detail-enlarge-window'></div>");
				$window.append($wrapper);
				
				if($imgs.length>1){
					var $prev = $("<div class='product-detail-enlarge-prev-button'><div class='icon icon-arrow-l'></div></div>");
					var $next = $("<div class='product-detail-enlarge-next-button'><div class='icon icon-arrow-r'></div></div>");
					$lightbox.append($prev).append($next);
					if(index > 0){
						$prev.addClass("product-detail-enlarge-nav-button-active");
					}
					if(index != ($imgs.length-1)){
						$next.addClass("product-detail-enlarge-nav-button-active");
					}
					function load_img(index){
						var $img = $enlarges.eq(index);
						if($img.hasClass("product-detail-enlarge-img-visible")) return;
						//var $loading = $("<div class='product-detail-enlarge-img-loading'></div>");
						//$img.closest(".product-detail-enlarge-img-wrapper").append($loading);
						var $loadingParent = $img.closest(".product-detail-enlarge-img-wrapper");
						appendLoading($loadingParent);
						$img.load(function(){
							log(src + " loaded");
							//$loading.remove();
							removeLoading($loadingParent);
							$img.addClass("product-detail-enlarge-img-visible");
							$img.hide();
							$img.fadeIn();
						});
						//return;
						var src = $img.attr("data-src");
						setTimeout(function(){
							$img.attr("src",src);
						}, SHOW_LOADING_DELAY);
						log(src + " loading");
						// $img.attr("src",src);
					}
					function nav_enlarge(dir){
						var dur = 500;
						var easing = "easeOutQuad";
						var index = parseInt($wrapper.attr("data-index"));
						index = index + dir;
						$wrapper.attr("data-index", index);
						var left = index * img_w * (-1);
						load_img(index);
						$wrapper.animate({left:left}, dur, easing);
						if(index > 0){
							$prev.addClass("product-detail-enlarge-nav-button-active");
						}else{
							$prev.removeClass("product-detail-enlarge-nav-button-active");
						}
						if(index != ($imgs.length-1)){
							$next.addClass("product-detail-enlarge-nav-button-active");
						}else{
							$next.removeClass("product-detail-enlarge-nav-button-active");
						}
					}
					function prev_enlarge(){
						nav_enlarge(-1);
					}
					function next_enlarge(){
						nav_enlarge(1);						
					}
					$prev.click(function(){
						if(!$(this).hasClass("product-detail-enlarge-nav-button-active")) return;
						prev_enlarge();
					});
					$next.click(function(){
						if(!$(this).hasClass("product-detail-enlarge-nav-button-active")) return;
						next_enlarge();
					});
				}
				$lightbox.append($window);
				lightboxFrame($lightbox);
				//lightbox($lightbox, {noPadding:true, noBoxShadow:true});
				/*
				$lightbox.append($window);
				var $close = get_lightbox_close_button();
				$close.click(close);
				$lightbox.append($close);
				lightbox($lightbox, close);
				*/
				
				// in DOM, size ready
				var $enlarges = $wrapper.find(".product-detail-enlarge-img");
				img_w = $enlarges.width();
				var left = index * img_w * (-1);
				$wrapper.css({left:left});
			}
			$main.find(".product-detail-images-wrapper, .product-detail-enlarge-button").click(enlarge);
		}
		function init_more_products(){
			var $prev = $main.find(".product-detail-more-products-prev-button");
			var $next = $main.find(".product-detail-more-products-next-button");
			if($prev.length==0)return;
			log("init_more_products");
			var dur = 400;
			var easing = "easeOutQuad";
			var $wrapper = $main.find(".product-detail-more-products-items-wrapper");
			var length = $wrapper.find(".product-detail-more-products-item-wrapper").length;
			var size = parseInt($wrapper.attr("data-size"));
			function nav_more(dir){
				var index = parseInt($wrapper.attr("data-index")) + dir;
				var step = $wrapper.find(".product-detail-more-products-item").width() + parseInt($wrapper.find(".product-detail-more-products-item-wrapper").css("padding-right"))
				log(step);
				var left = index * (-step);
				$wrapper.attr("data-index", index);
				$wrapper.animate({left:left}, dur, easing);
				if(index > 0){
					$prev.addClass("product-detail-more-products-nav-button-active");
				}else{
					$prev.removeClass("product-detail-more-products-nav-button-active");
				}
				if(index < (length-size)){
					$next.addClass("product-detail-more-products-nav-button-active");
				}else{
					$next.removeClass("product-detail-more-products-nav-button-active");
				}
			}
			function prev_more(){
				nav_more(-1);
			}
			function next_more(){
				nav_more(1);
			}
			$prev.click(function(){
				if(!$(this).hasClass("product-detail-more-products-nav-button-active")) return;
				prev_more();
			});
			$next.click(function(){
				if(!$(this).hasClass("product-detail-more-products-nav-button-active")) return;
				next_more();
			});
		}
		function init_updating(){
			function update_cart(){
				
				function success(response){
					log("update_cart success");	
					log(response);
					var $panel = get_feedback_panel("update-cart");
					lightboxMessageNoClose($panel);
				}
				function error(response){
					log("update_cart error");
					log(response);
				}
				var cart_id = $detail.attr("data-cart-id");
				updateCart(cart_id, pid, get_color_value(), get_size_value(), get_qty_value(), success, error);			
			}
			$main.find(".product-detail-update-footer-button").click(function(e){
				e.preventDefault();
				if($(this).hasClass("common-button-disabled")) return;
				update_cart();
			});
		}
		function init_main_sidebar_buttons(){
			function sizeguide(){
				var $lightbox = $("#size-guide").children().clone();				
				//lightbox($lightbox);
				lightboxWindow($lightbox);
			}
			function add_to_wishlist(){
				function success(response){
					log("add_to_wishlist success");	
					log(response);
					$detail.addClass("product-in-wishlist");
					var $panel = get_feedback_panel("add-wishlist");
					lightboxMessage($panel);
				}
				function error(response){
					log("add_to_wishlist error");
					log(response);
				}
				addProductToWishlistByProductId(pid, success, error);
			}
			function remove_from_wishlist(){
				function success(response){
					log("remove_from_wishlist success");	
					log(response);
					$detail.removeClass("product-in-wishlist");
				}
				function error(response){
					log("remove_from_wishlist error");
					log(response);
				}
				removeProductFromWishlistByProductId(pid, success, error);
			}
			//
			$main.find(".product-detail-main-sidebar-button").click(function(){
				var action = $(this).attr("data-action");
				if(action == "sizeguide"){
					sizeguide();
				}else if (action == "add"){
					if(isLogged()){
						add_to_wishlist();
					}else{
						requireLogin();
						//feedback(FEEDBACK_LOGIN_REQUIRED);
					}
				}else if(action == "remove"){
					remove_from_wishlist();
				}
			});
		
		}
		//////////
		
		init_colors();
		init_more_photos();
		init_size();
		init_action();
		init_enlarge();
		init_main_sidebar_buttons();
		init_more_products();
		init_updating();
		$detail.bind(CHANGE, on_change);
	}
	initInfo();
}
initProduct();	
});