/// <reference name="MicrosoftAjax.debug.js" />
/// <reference name="MicrosoftAjaxTimer.debug.js" />
/// <reference name="MicrosoftAjaxWebForms.debug.js" />
/// <reference path="jquery.intellisense.js"/>
/// <reference path="jquery.validate.js"/>

/// <reference path="Kleenex.Core.js"/>

Kleenex.ProductLocator = function(clientId, imagePath, products)
{
    this.ClientID = clientId;
    this.ImagePath = imagePath;
    this.Products = products;
    this.Selector = "#" + clientId;
    this.Initialize();
};
Kleenex.ProductLocator.prototype =
{
    Name : 'Kleenex.ProductLocator',
    __typeName : 'Kleenex.ProductLocator',
    __class : true,
    AttachEvents : function()
    {
        var __app = this;
        var context = $(this.Selector);

        var ddl = $('.ProductsDropDownList', context);
        ddl.append('<option value="">Select one...</option>');
        for (var i=0;i<this.Products.length;i++)
        {
            var product = this.Products[i];
            var markup = '<option value="' + i + '">' + product.Name + '</option>';
            ddl.append(markup);
        }
        
        var onDropDownChange = function()
        {
            var index = parseInt($(this).val(), 10);
            if (isNaN(index))
            {
                __app.SetProductID(0);
                return;
            }
            var product = __app.Products[index];
            $('.BoxType', context).hide().removeClass('Shown');
            
            if (product.Types.length === 0)
            {
                __app.SetProductID(product.ProductID);
            }
            else
            {
                for (var j=0;j<product.Types.length;j++)
                {
                    var type = product.Types[j];
                    $('.LocatorTypes .' + type.Shape, context).show().addClass('Shown');
                    var result =  $('.LocatorTypes .' + type.Shape + ' .ProductID', context).val(type.ProductID);
                }
                $('.Shown .ProductID:first').click();
            }
        };
        
        $('.ProductsDropDownList', context).change(onDropDownChange);
        
        var onRadioChange = function()
        {
            var productId = $(this).val();
            __app.SetProductID(productId);
        };
        
        $('.LocatorTypes input[type="radio"]', context).click(onRadioChange);
    },
    SetProductID : function(productId)
    {
        var context = $(this.Selector);
        $('span.ProductID input[type="hidden"]', context).val(productId);
    },
    Display : function()
    {
        var __app = this;
    },
    Validate : function()
    {
        var context = $(this.Selector);
        var validateSelection = function(productId)
        {
            if(productId === '')
            {
                $('#ProductsDropDownListError', context).show();
                return false;
            }
            $('#ProductsDropDownListError', context).hide();
            return true;
        };
        
        var validateZipcode = function(zip)
        {
            if(zip === '' || zip.length != 5 || !isNumeric(zip))
            {
                $('#LocatorZipError', context).show();
                return false;
            }
            $('#LocatorZipError', context).hide();
            return true;
        };
        
        var isNumeric = function(s)
        {
           var validChars = "0123456789";
           var isNumber=true;
           var Char;
         
            for (i = 0; i < s.length && isNumber === true; i++) 
            { 
                Char = s.charAt(i);
                if (validChars.indexOf(Char) == -1) 
                {
                    isNumber = false;
                }
            }
            return isNumber;
        };
        
        var selectionValid = validateSelection($('span.ProductID input[type="hidden"]', context).val());
        var zipValid = validateZipcode($('.LocatorZip', context).val());
        
        return selectionValid && zipValid;
    }
};

Kleenex.Extend(Kleenex.ProductLocator, Kleenex.UserControl);