/* dropdown rollovers to highlight header */
jQuery(document).ready( function() {

	// alias required to cRequired with new message
	jQuery.validator.addMethod("qRequired", jQuery.validator.methods.required,
	  "A quantity is required.");
	jQuery.validator.addMethod("qDigits", jQuery.validator.methods.digits, 
	  "Please enter only positive numbers for the quantity.");
	jQuery.validator.addMethod("qRange", jQuery.validator.methods.range, 
	  "Sorry, the quantity must be from 0-99,999.");	
	// combine them all into one validation class for cart quantities
	jQuery.validator.addClassRules("cartqty", { qRequired: true, qDigits: true, qRange: [0,99999] });

    jQuery("#ShoppingPage_AddToCartForm_AddToCartForm").validate({
        rules: {
            Quantity: {
                required: true,
                digits: true,
                range: [1,99999]
            }
        },
        messages: {
            Quantity: {
                required: "A quantity is required.",
                range: "Sorry, the quantity must be from 1-99,999.",
                digits: "Please enter only positive numbers for the quantity."
            }
        },
        errorPlacement: function(error, element) {
            error.appendTo(jQuery('div.product-error-messages'));
        }
    });

    jQuery("#OrderPage_EditCartForm").validate({
        errorPlacement: function(error, element) {
            error.appendTo(jQuery("#" + element.attr("id") + "-error"));
        }
    });

    jQuery("#RegisterForm_Form").validate({
        rules: {
            FirstName: {
                required: true
            },
            Surname: {
                required: true
            },
            Email: {
                required: true,
                email: true
            },
            ConfirmEmail: {
                required: true,
                email: true,
                equalTo: "#RegisterForm_Form_Email"
            },
            Password: {
                required: true,
                rangelength: [6, 12]
            },
            ConfirmPassword: {
                required: true,
                equalTo: "#RegisterForm_Form_Password"
            },
            Street: {
                required: true
            },
            PostCode: {
                required: true
            },
            City: {
                required: true
            },
            Telephone: {
                required: true
            }
        },
        messages: {
            FirstName: {
                required: "First Name is required."
            },
            Surname: {
                required: "Last Name is required."
            },
            Email: {
                required: "Email is required.",
                email: "Email is not a valid address"
            },
            ConfirmEmail: {
                required: "Email Confirmation is required.",
                equalTo: "Emails do not match"
            },
            Password: {
                required: "Password is required.",
                rangelength: "Password must be 6-12 characters"
            },
            ConfirmPassword: {
                required: "Password Confirmation is required.",
                equalTo: "Passwords do not match"
            },
            Street: {
                required: "Street is required."
            },
            PostCode: {
                required: "Post Code is required."
            },
            City: {
                required: "City is required."
            },
            Telephone: {
                required: "Telephone is required."
            }
        },
        errorPlacement: function(error, element) {
            error.appendTo(element.parent());
        }
    });

    jQuery("#ProfileForm_Form").validate({
        rules: {
            FirstName: {
                required: true
            },
            Surname: {
                required: true
            },
            Email: {
                required: true,
                email: true
            },
            ConfirmEmail: {
                required: true,
                email: true,
                equalTo: "#ProfileForm_Form_Email"
            },
            OldPassword: {
                required: true,
                rangelength: [6, 12]
            },
            Password: {
                rangelength: [6, 12]
            },
            ConfirmPassword: {
                equalTo: "#ProfileForm_Form_Password"
            },
            Street: {
                required: true
            },
            PostCode: {
                required: true
            },
            City: {
                required: true
            },
            Telephone: {
                required: true
            }
        },
        messages: {
            FirstName: {
                required: "First Name is required."
            },
            Surname: {
                required: "Last Name is required."
            },
            Email: {
                required: "Email is required.",
                email: "Email is not a valid address"
            },
            ConfirmEmail: {
                required: "Email Confirmation is required.",
                equalTo: "Emails do not match"
            },
            OldPassword: {
                required: "Current password is required.",
                rangelength: "Current password must be 6-12 characters"
            },
            Password: {
                rangelength: "Password must be 6-12 characters"
            },
            ConfirmPassword: {
                equalTo: "Passwords do not match"
            },
            Street: {
                required: "Street is required."
            },
            PostCode: {
                required: "Post Code is required."
            },
            City: {
                required: "City is required."
            },
            Telephone: {
                required: "Telephone is required."
            }
        },
        errorPlacement: function(error, element) {
            error.appendTo(element.parent());
        }
    });

    jQuery(".callout-image").click(
    function() {
        calloutImage(jQuery(this).attr('id'));
    });
    
    jQuery("#callout-popup-close").click(
    function() {
        jQuery("#callout-popup").hide();
    });
    
    jQuery(".menu-item").hover(
		function()
		{
			target  = getTargetId(jQuery(this).attr('class'));
			jQuery("#" + target).addClass("hover");
			jQuery(this).addClass("hover");			
		},
		function()
		{
			target  = getTargetId(jQuery(this).attr('class'));
			jQuery("#" + target).removeClass("hover");
			jQuery(this).removeClass("hover");
		}
	);	
	jQuery(".sub-menu-item").hover(
		function()
		{
			target  = getTargetId(jQuery(this).attr('class'));
			jQuery("#menu-items ." + target).addClass("hover");
			jQuery(this).addClass("hover");
		},
		function()
		{
			target  = getTargetId(jQuery(this).attr('class'));
			jQuery("#menu-items ." + target).removeClass("hover");
			jQuery(this).removeClass("hover");
		}
	);

	jQuery("#SearchForm_SearchForm_Search").focus(
		function () {
			if (this.value == "Search...") this.value = '';
		}
	);

	jQuery("#ShopSearchForm_ShopSearchForm_Search").focus(
		function () {
			if (this.value == "Search...") this.value = '';
		}
	);
    
});

function getTargetId(classes) {

	var classList = classes.split(/\s+/);
	for (i = 0; i < classList.length; i++) {
		if (classList[i].substring(0,13) === 'menu-item-id-') {
			return classList[i]; //e.g. menu-item-id-4 
		}
	}

}

function calloutImage(id) {
    var newid = id.replace('callout-image-', '');
    jQuery("#debug").text(newid);
	
    jQuery("#callout-popup").show();
    jQuery(".active").toggleClass('active');
    jQuery("#callout-popup-image-" + newid).toggleClass('active');
}


/* CALLOUT IMAGE AJAX */

function ajaxCalloutPopup(url,video) {

	var source;

	if (video)
		source = jQuery("#videos-callout");
	else
		source = jQuery("#images-callout");

	//position left of source gallery
	var pos = source.offset();  
	var width = source.width();

	jQuery("#callout-popup").css( { "top":(pos.top-10) + "px" } ); 

    var active = jQuery("#callout-popup div.active");
    var inactive = jQuery("#callout-popup div.inactive");

	jQuery("#callout-popup").show();
    
    //since we don't know what to load next we start fadein once ajax call complete, and fadeout after
    inactive.load(url, null, function() {
        inactive.fadeIn(100, function() {
            inactive.removeClass("inactive");
            inactive.addClass("active");
        });
        active.fadeOut(100, function() {
            active.removeClass("active");
            active.addClass("inactive");
        });
    });

    return false;
}