$.namespace('Kalahari.Web.UI.help');
/**
 * Page specific class. Handles all the javascript functionality for the contact us page
 * @class Kalahari.Web.UI.help.contact_us
 */
 
/**
 * Configuration constructor
 * @constructor
 * @param {Object} config
 */
Kalahari.Web.UI.help.contact_us = function(config) {
    this.initialConfig = config;

    var self = this;
    $.apply(this, config);
    
    this.getSubcategories(this.$ddlCategory.val(), this.$subcategoryID.val());

    this.$ddlCategory.change(function() {
        self.getSubcategories($(this).val());
    });
    
    this.$ibtnSend.click(function() {
        self.$subcategoryID.val(self.$ddlSubcategory.val());
    });
    
    this.$txtMessage.maxlength({
        slider: true,
        maxCharacters: 3500,
        notificationClass: 'notification',
        statusClass: 'jq_maxlength_status',
        statusAppendToParent: true,
        statusText: this.language == 'English' ? 'characters remaining' : 'karakters oor'
    });
};

Kalahari.Web.UI.help.contact_us.prototype = {
    /**
     * @cfg {jQuery} $category The category jquery element
     */
    $ddlCategory: undefined,
    /**
     * @cfg {jQuery} $subcategory The subcategory jquery element
     */
    $ddlSubcategory: undefined,
    /**
     * @cfg {jQuery} $ibtnSend The send jquery element
     */
    $ibtnSend: undefined,
    /**
     * @cfg {jQuery} $subcategoryID The subcategoryID jquery element
     */
    $subcategoryID: undefined,
    /**
     * @cfg {jQuery} $message The message jquery element
     */
    $txtMessage: undefined,
    /**
     * @cfg {jQuery} language The user's language
     */
    language: 'English',
    

    // private
    getSubcategories: function(catid, subcatid) {

    if (!this.$ddlSubcategory.data('width'))
        this.$ddlSubcategory.data('width', this.$ddlSubcategory.outerWidth());
            
        if (catid == '') {
            this.$ddlSubcategory
                .html('')
                .css('width', this.$ddlSubcategory.data('width'))
                .attr('disabled', true);
            
            return;
        }
  
        var $parent = this.$ddlSubcategory
            .attr('disabled', false)
            .wrap('<div></div>')
            .parent()
            .css({ 'width': this.$ddlSubcategory.outerWidth(true), 'float': 'left' });

        $parent.block({message:null});
        $.ajax({

            type: 'POST',
            url: '../common/ShoppingService.asmx/GetCustomerFeedbackSubcategories',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify({ categoryID: catid }),
            dataType: 'json',
            success: function(data) {
                var options = '';
                data.results.unshift({
                    SubCategoryID: '',
                    DescriptionENG: 'Select a subcategory',
                    DescriptionAFR: 'Kies \'n subkategorie'
                });
   
                for (var i = 0; i < data.results.length; i++) {
                    options += '<option value="' + data.results[i].SubCategoryID + '">' + (this.language == 'English' ? data.results[i].DescriptionENG : data.results[i].DescriptionAFR) + '</option>';
                }
                
                $parent.unblock({onUnblock: function() {
                    $parent.unwrap().remove();
                    this.$ddlSubcategory
                        .html(options)
                        .css('width', 'auto');
                    if (subcatid)
                        this.$ddlSubcategory.val(subcatid);
                }.createDelegate(this)});
            }.createDelegate(this)
        });
    }
};