/// <reference path="jquery-1.3.2.js"/>

var product = {
    productId: 0,
    designImage: "",
    init: function() {
        $(document).ready(function() {
            $("#colors").attr("disabled", "disabled");
            $("#sizes").attr("disabled", "disabled");

            $("#types").change(
                function() {
                    if (this.selectedIndex != 0) {
                        var typeId = $(this).val();
                        product.getProductTypeColors(typeId);
                        product.getProductTypeSizes(typeId);
                        product.getProductBackgroundImage(typeId, 0);
                    }
                    else {
                        //product.hideContainer("#colorContainer");
                        $("#sizes").attr("disabled", "disabled");
                        // get/load default product background image
                        location.reload();
                        //product.hideContainer("#sizeContainer");
                    }
                });

            $("#colors").change(
                function() {
                    if (this.selectedIndex != 0) {
                        product.getProductBackgroundImage($("#types").val(), $(this).val());
                    }
                });

            // get basic product info
            product.getProduct(product.productId);

            // get/load default product background image
            product.getProductImagesByProductId(product.productId);
        });
    },

    addToCart: function(productId) {
        var colorId = $("#colors").val();
        var sizeId = $("#sizes").val();
        var typeId = $("#types").val();

        if (colorId > 0 &&
            sizeId > 0 &&
            productId > 0 &&
            typeId > 0)
            window.location = "http://shockertees.com/AddToCart.aspx?productid=" + productId + "&sizeid=" + sizeId + "&colorid=" + colorId + "&typeid=" + typeId;
        //http://shockertees.com/
        else
            alert("Please select a product type, color, and size");
    },

    errorHandler: function(sourceMethod, message) {
        alert(message);
    },

    initList: function(selector, text) {
        $(selector)
            .html("")
            .append($("<option selected=selected></option>").val("").html(text));
    },

    hideContainer: function(selector) {
        $(selector)
            .removeClass("elementContainer")
            .addClass("elementContainerHidden");
    },

    showContainer: function(selector) {
        $(selector)
            .removeClass("elementContainerHidden")
            .addClass("elementContainer");
    },

    // retrieve product types 
    getProductTypes: function(productId) {
        product.productId = productId;

        $(document).ready(function() {
            $.ajax({
                type: "POST",
                url: "ProductService.asmx/GetProductTypes",
                data: "{'productId':'" + productId + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(result) {
                    $.each(result, function() {
                        $("#types").append($("<option></option>").val(this['Id']).html(this['Name'] + " ($" + this['Price'] + ")"));
                    });
                },
                error: function(xhr) {
                    if (!xhr) return;

                    if (xhr.responseText) {
                        product.errorHandler("getProductTypes", xhr.responseText);
                    }

                    return;
                }
            });
        });
    },

    // retrieve product colors given a product type
    getProductTypeColors: function(typeId) {
        $(document).ready(function() {
            // show color loader
            //var colorLoader = $("#colorLoader");
            //colorLoader.show();

            $.ajax({
                type: "POST",
                url: "ProductService.asmx/GetProductTypeColorsByTypeId",
                data: "{'productId':'" + product.productId + "', 'typeId':'" + typeId + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(result) {
                    product.initList("#colors", "Select Color");

                    if (result) {
                        var defColor = 0;
                        $.each(result, function() {
                            if (this.IsDefault) defColor = this.Id;
                            $("#colors").append($("<option></option>").val(this['Id']).html(this['Name']));
                        });
                        $("#colors").val(defColor);
                        product.getProductBackgroundImage($("#types").val(), $("#colors").val());
                    }

                    // hide color loader
                    //colorLoader.hide("slow");

                    // enable colors list
                    $("#colors").removeAttr("disabled");
                },
                error: function(xhr) {
                    if (!xhr) return;

                    if (xhr.responseText) {
                        product.errorHandler("getProductTypeColors", xhr.responseText);
                    }

                    return;
                }
            });
        });
    },

    // retrieve product colors given a product type
    getProductBackgroundImage: function(typeId, colorId) {
        $(document).ready(function() {

            $.ajax({
                type: "POST",
                url: "ProductService.asmx/GetProductBackgroundImage",
                data: "{'productId':'" + product.productId + "', 'typeId':'" + typeId + "', 'colorId':'" + colorId + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(result) {
                    if (result) {
                        // load default background image
                        $("#mainImage")
                            .html("")
                            .css("height", "580px")
                            .css("background-image", "url(" + result + ")")
                            .css("background-repeat", "no-repeat")
                            .append("<img src='" + product.designImage + "' alt=''/>");

                        $("#thumbnails").html("");
                    }
                },
                error: function(xhr) {
                    if (!xhr) return;

                    if (xhr.responseText) {
                        product.errorHandler("getProductTypeColors", xhr.responseText);
                    }

                    return;
                }
            });
        });
    },

    getProductImagesByProductId: function(productId) {
        $(document).ready(function() {

            $.ajax({
                type: "POST",
                url: "ProductService.asmx/GetProductImages",
                data: "{'productId':'" + product.productId + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(result) {
                    if (result) {
                        var regEx = new RegExp("mod");

                        $(result).each(function(i) {
                            if (!regEx.test(this.ImagePath)) {
                                // load default background image
                                product.loadMainImage(this.ImagePath);
                            }

                            var div = jQuery("<div></div>");
                            var thumb = jQuery("<img/>");
                            thumb.attr("src", this.ThumbnailPath);

                            var bigImage = this.ImagePath;
                            thumb.click(function() { product.loadMainImage(bigImage); });
                            div.append(thumb);

                            $("#thumbnails").append(div);

                        });
                    }
                },
                error: function(xhr) {
                    if (!xhr) return;

                    if (xhr.responseText) {
                        product.errorHandler("getProductTypeColors", xhr.responseText);
                    }

                    return;
                }
            });
        });
    },

    // retrieve product sizes given a product color
    getProductTypeSizes: function(typeId) {
        $(document).ready(function() {
            $.ajax({
                type: "POST",
                url: "ProductService.asmx/GetProductTypeSizesByTypeId",
                data: "{'productId':'" + product.productId + "', 'typeId':'" + typeId + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(result) {
                    product.initList("#sizes", "Select Size");

                    if (result) {
                        $.each(result, function() {
                            if (this['AdditionalCost'] > 0)
                                $("#sizes").append($("<option></option>").val(this['Id']).html(this['Name'] + " (+$" + this['AdditionalCost'] + ")"));
                            else
                                $("#sizes").append($("<option></option>").val(this['Id']).html(this['Name']));
                        });
                    }

                    // enable colors list
                    $("#sizes").removeAttr("disabled");
                },
                error: function(xhr) {
                    if (!xhr) return;

                    if (xhr.responseText) {
                        product.errorHandler("getProductTypeSizes", xhr.responseText);
                    }

                    return;
                }
            });
        });
    },

    getProduct: function() {
        $(document).ready(function() {
            $.ajax({
                type: "POST",
                url: "ProductService.asmx/GetProductById",
                data: "{'productId':'" + product.productId + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(result) {
                    if (result) {
                        $("#productName").text(result.Name);
                        $("#productDesc").text(result.Description);
                        product.designImage = result.DesignImage;
                        //$("#mainImage")
                        //.css("background-image", "url(grafx_new/shirts/shpg_hoodie_black.gif)")
                        //.css("background-repeat", "no-repeat")
                        //    .append("<img src='" + result.DesignImage + "' alt='' />");

                    }
                },
                error: function(xhr) {
                    if (!xhr) return;

                    if (xhr.responseText) {
                        product.errorHandler("getProduct", xhr.responseText);
                    }

                    return;
                }
            });
        });
    },

    loadMainImage: function(imagePath) {
        var img = $("#mainImage").find("img");

        if (img[0])
            img.attr("src", imagePath);
        else
            $("#mainImage").append("<img src='" + imagePath + "' alt='' />");
    }
};