/*******************************************************************************
 * productStyle
 ******************************************************************************/

var productStyle = {

// Public
    init: function (inputName, prodType) {
        this._inputName = inputName;
        this.setProdType(prodType);
    },

    empty: function () {
        var inp = document.getElementById(this._inputName);
        if (inp && inp.value != '') {
            return false;
        }
        return true;
    },

    setProdType: function(prodType) {

        switch (prodType.toLowerCase()) {
            case 'shirts':
                this._type = 'shirts';
                return true;

            case 'trousers':
                this._type = 'trousers';
                return true;

            default:
                this.error(3);
        }

        return false;
    },

    add: function(elementId, index) {
        this._elements[index].push(elementId);
    },

    trigger: function(index) {

        switch (index) {
            case 1:
                this._index = 1;
                break;

            case 2:
                this._index = 2;
                break;

            case 3:
                this._index = 3;
                break;

            default:
                this.error(2);
        }

        this.reset();
    },

    reset: function() {

        this._setInputValue();
        
        var typeLen = (this._type == 'trousers') ? 3 : 2;

        for (var i = 1; i <= typeLen; i++) {
            var len = this._elements[i].length;
            for(var j = 0; j < len; j++) {
                elem = document.getElementById(this._elements[i][j]);
                if (i == this._index) {
                    this._elementActive(elem);
                }
                else {
                    this._elementNoActive(elem);
                }
            }
        }
    },

    error: function(numErr) {
        switch (numErr) {
            case 1:
                alert('Please select style');
                break;
        }
    },

// Private
    _elements: [[], [], [], []],

    _index: null,

    _inputName: '',

    _type: '',

    _elementActive: function (element) {
        element.className = 'orange';
    },

    _elementNoActive: function (element) {
        element.className = '';
    },

    _setInputValue: function () {
        //HTMLInputElement
        var inp = document.getElementById(this._inputName);
        if (inp) {
            inp.value = this._index;
        }
    }
}


/*******************************************************************************
 * productInseam
 ******************************************************************************/

var productInseam = {

// Public
    init: function(sizeObj, blockId, prefix) {
        this._size = sizeObj;
        this._blockId = blockId;
        this._setPrefix(prefix);
        return this;
    },

    add: function(id, names, values) {
        if (names && values) {
            this._inseamName[id] = names;
            this._inseam[id] = values;
        }
    },

    get: function() {
        if (this._index !== null) {
            return this._id(this._inseam[this._sizeIndex][this._index]);
        }
        else {
            this._error();
            return false;
        }
    },

    trigger: function(index) {

        this._index = index;

        var prefixes = this._size.getPrefixes();

        for (var indPref = 0; indPref < prefixes.length; indPref++) {
            var prefix = '';
            if (indPref != 0) {
                prefix = prefixes[indPref];
            }
            for (var i = 0; i < this._inseam[this._sizeIndex].length; i++) {
                var id = this._size._id(prefix, this._id(this._inseam[this._sizeIndex][i]));
                if (this._index == i) {
                    this._elementActive(document.getElementById(id));
                } else {
                    this._elementNoActive(document.getElementById(id));
                }
            }
        }
    },

    isColor: function(value) {
        if (value === true) {
            this._isColor = true;
        }
        else if (value === false)  {
            this._isColor = false;

        }

        return this._isColor;
    },

    reset: function(index) {

        this._sizeIndex = index;
        this._index = null;

        var prefixes = this._size.getPrefixes();

        for (var indPref = 0; indPref < prefixes.length; indPref++) {
            var prefix = '';
            if (indPref != 0) {
                prefix = prefixes[indPref];
            }
            var objDiv = document.getElementById(prefix + this._blockId);
            var content = '';
            for (var i = 0; i < this._inseam[this._sizeIndex].length; i++) {
                var id = this._size._id(prefix, this._id(this._inseam[this._sizeIndex][i]));
                content += this._getButton(id, this._inseamName[this._sizeIndex][i], i);
            }
            objDiv.innerHTML = content;
        }
    },

// Private
    _size: null,

    _isColor: false,

    _sizeIndex: '',

    _inseam: [],

    _inseamName: [],

    _index: null,

    _prefix: '',

    _blockId: '',

    _id: function(index) {
        return this._prefix + '_' + index;
    },

    _setPrefix: function(prefix) {
        if (prefix) {
            this._prefix = prefix;
        }
    },

    _getButton: function(id, name, indexCurr) {
        if (this._isColor) {
            return '<a id="'
                 + id
                 + '" onclick="javascript:productInseam.trigger('
                 + indexCurr
                 + ');return void(0);" href="javascript: void(0);" class="">'
                 + '<div style="background-color: '
                 + name
                 + ';">'
                 + '<img height="15" width="25" alt="" src="images/px.gif"/>'
                 + '</div>'
                 + '</a>';

        } else {
            return '<a href="javascript: void(0);" onclick="javascript:productInseam.trigger('
                 + indexCurr
                 + ');return void(0);" id="'
                 + id
                 + '" style="margin-bottom: 8px; ">'
                 + name
                 + '</a>';
        }
    },

    _elementActive: function(element) {
        if (this._isColor) {
            element.className = 'sel';
        } else {
            element.className = 'orange';
        }
    },

    _elementNoActive: function(element) {
        element.className = '';
    },

    _error: function() {
        if (this._isColor) {
            alert('Please select color');
        } else {
            alert('Please select size');
        }
    }
}


/*******************************************************************************
 * productSize
 ******************************************************************************/

var productSize = {

// Public
    init: function(allSizes, prefix) {
        this._setSize(allSizes);
        this._setPrefix(prefix);
        return this;
    },

    add: function(value) {
        if (value) {
            this._size.push(value);
            for (var i = 0; i < this._prefix.length; i++) {
                this._elementGlue(this._getElementById(this._prefix[i], value))
            }
        }        
    },

    get: function() {
        if (this._index !== null) {
            var result = this._id(this._prefix[0], this._getCurrSize());
            if (this._inseam) {
                var inseam = this._inseam.get();
                if (inseam) {
                    result = this._id(result, inseam);
                }
                else {
                    return false;
                }
            }
            return result;
        } else {
            this._error();
            return false;
        }
    },

    addPrefix: function(idPrefix) {
        this._prefix.push(idPrefix);
        for (var i = 0; i < this._size.length; i++) {
            this._elementGlue(this._getElementById(idPrefix, this._size[i]))
        }
    },

    getPrefixes: function() {
        return this._prefix;
    },

    trigger: function(element) {
        for (var i = 0; i < this._prefix.length; i++) {
            for (var j = 0; j < this._size.length; j++) {
                var id = this._id(this._prefix[i], this._size[j]);
                if (id == element.id) {
                    this._index = j;
                }
                this._elementNoActive(this._getElementById(this._prefix[i], this._size[j]));
            }
        }
        for (i = 0; i < this._prefix.length; i++) {
            this._elementActive(this._getElementById(this._prefix[i], this._getCurrSize()));
        }
        this._resetInseam(this._getCurrSize());
    },

    createInseam: function(blockId, prefix) {
        this._inseam = productInseam.init(this, blockId, prefix);
        return this._inseam;
    },

// Private
    _size: [],

    _index: null,

    _prefix: [],

    _inseam: null,

    _id: function(prefix, index) {
        return prefix + '_' + index;
    },

    _getCurrSize: function() {
        if (null != this._index) {
            return this._size[this._index];
        }
        return '';
    },

    _getElementById: function(prefix, index) {
        var element = document.getElementById(this._id(prefix, index));
        return (element != null) ? element : false;
    },

    _elementActive: function(element) {
        element.className = 'orange';
    },

    _elementNoActive: function(element) {
        element.className = '';
    },

    _elementGlue: function(element) {
        element.onclick = function() {
            productSize.trigger(this);
        }
    },

    _setSize: function(allSizes) {
        if (allSizes) {
            this._size = allSizes;
        }
    },

    _setPrefix: function(prefix) {
        if (prefix) {
            this._prefix[0] = prefix;
        }
    },

    _resetInseam: function(index) {
        if (this._inseam) {
            this._inseam.reset(index);
        }
    },

    _error: function() {
        alert('Please select size');
    }
};

/*******************************************************************************
 * product
 ******************************************************************************/

var product = {

// Public
    init: function (inputId) {
        this._setInput(inputId);
    },

    submit: function () {
        // bad code!!! ////////////
        var arm = document.getElementById('armlength').value;
        var isArmActive = (armList.length > 0) ? true : false;
        if (isArmActive > 0 && arm == '') {
            this._error();
        } else {
            if (this._setInputValue()) {
                this._form.submit();
            }
        }
    },

    createSize: function(allSizes, prefix) {
        productSize.init(allSizes, prefix);
        this._size = productSize;
        return this._size;
    },

    createStyle: function (inputName, prodType) {
        productStyle.init(inputName, prodType);
        this._style = productStyle;
        return this._style;
    },

// Private
    _input: null,

    _size: null,

    _form: null,

    _style: null,

    _setInput: function (inputId) {
        var input = document.getElementById(inputId);
        if (input) {
            this._input = input;
            this._form = this._input.parentNode;
            this._submitChange(this._getSubmitForm(this._form));
        }
    },

    _setInputValue: function() {
        var value = this._size.get();
        if (value) {
            this._input.value = value;
            if (this._style != null) {
                var emp = this._style.empty();
                if (emp) {
                    this._style.error(1);
                    return false
                }
                else {
                    return true
                }
            }
            else {
                return true;
            }
        }

        return false;
    },

    _submitChange: function(element) {
        var parent = element.parentNode;
        parent.innerHTML = '<input name="'
                         + element.name
                         + '" type="button" class="'
                         + element.className
                         + '" onclick="product.submit();">';
    },

    _getSubmitForm: function(formObj) {
        var nodes = formObj.elements;
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i].type == 'submit') {
                return nodes[i];
            }
        }
        return null;
    },

    _error: function() {
        alert('Please select arm length size');
    }

};


/******************************************************************************/

function unsetSelected(type) {

    if (result[type]) {
        var el = document.getElementById(result[type]);
        
        if(el){
            el.className = '';
        }

        result[type] = null;
    }

}


function zoom(obj) {
    x = obj.parentNode;
    if (document.getElementById('superDiv')) {
        for (i=0; i < x.getElementsByTagName('div').length; i++) {
            if (x.getElementsByTagName('div')[i].getElementsByTagName('img')[0].src) {
                x.getElementsByTagName('div')[i].getElementsByTagName('img')[0].src = obj.src;
            }
        }
    }
    TJPzoom(obj);
}

function unsetSelected3(type){
    if(result[type]){
        var el = document.getElementById(result[type]);
        if(el){
            el.className = '';
        }
        result[type] = null;
    }
}

function unsetSelected9(type){
    if(result9[type]){
        var el = document.getElementById(result9[type]);
        if(el){
            el.className = '';
        }
        result9[type] = null;
    }
}

function preloadImages() 
{
    // preload large images...
    for (i = 0; i < large_imgIDs.length; i++) {
        large_Images[large_imgIDs[i]] = new Image();
        large_Images[large_imgIDs[i]].src = large_imgPaths[i];
    }
    // ...and front images if they exist
    if ('' != front_imgIDs) {
        for (i = 0; i < front_imgIDs.length; i++) {
            front_Images[front_imgIDs[i]] = new Image();
            front_Images[front_imgIDs[i]].src = front_imgPaths[i];
        }   
    }
}

function changeBigImage(id_large, color_id, id_front)
{
    //document.getElementById('big_img_'+color_id).src = large_Images[id_large].src;
    var large_image = large_Images[id_large].src;
    id_front = false;
    if (!id_front) {
        front_image = large_image;
    } else {
        front_image = front_Images[id_front].src;
    }

    document.getElementById('divColor_' + color_id).innerHTML = '<img class="img1" src="'
                                                              + front_image
                                                              + '" id="big_img_'
                                                              + color_id
                                                              + '" width="435" height="600" onmouseover="TJPzoom(this, \''
                                                              + large_image
                                                              + '\');" style="width: 435px; height: 600px;" />';
}


function setSelected(obj, type){
    unsetSelected(type);
    obj.className = 'orange';
    result[type] = obj.getAttribute('id');
    selInseam();
}


function showImages(imgColor) {
    for (i = 0; i < imgcolorsID.length; i++) {
        if (imgcolorsID[i] == imgColor) {

            var collectColorId = document.getElementsByName('_color_id');
            for (j = 0; j < collectColorId.length; j++) {
                collectColorId[j].value = imgcolorsID[i];
            }
            document.getElementById('divColor_'+imgcolorsID[i]).style.display = 'block';
            document.getElementById('divColor2_'+imgcolorsID[i]).style.display = 'block';

            /*document.getElementsByClassName('thumb_color').style.borderColor = '#000';
            document.getElementById('thumb_color_'+imgcolorsID[i]).style.borderColor = '#FF693A';*/
        }
        else {
            document.getElementById('divColor_' + imgcolorsID[i]).style.display = 'none';
            document.getElementById('divColor2_' + imgcolorsID[i]).style.display = 'none';
        }
    }
}

function _setSelected(obj, type){
    unsetSelected(type);
    obj.className = 'orange';
    result[type] = obj.getAttribute('id');
    selColor();
}

function _setSelected5(obj, type){
    unsetSelected(type);
    obj.className = 'orange';
    result[type] = obj.getAttribute('id');
    var size_id = document.getElementById('size_id');
    size_id.value = obj.id;
}

function setSelected3(obj, type){
    unsetSelected3(0);
    obj.className = 'orange';
    result[0] = obj.getAttribute('id');
    selColor3();
}



function setSelected4(obj, type){
    unsetSelected3(0);
    obj.className = 'orange';
    result[0] = obj.getAttribute('id');
    var size_id = document.getElementById('size_id');
    size_id.value = obj.id;
}



function setSelected5(obj, type){

    unsetSelected(type);
    obj.className = 'orange';
    result[type] = obj.getAttribute('id');
    selInseam2();
}




function setSelected9(obj, type){
    unsetSelected9(0);
    obj.className = 'orange';
    result9[0] = obj.getAttribute('id');
    var armlength = document.getElementById('armlength');
    armlength.value = obj.id;
}

function selColor3(){

    var cd = document.getElementById("colorDiv");
    cd.innerHTML = "";
    result[1] = null;
    var color_code = result[0];

    if(result[0] && colors[color_code]){
        var str = "";
        var br = 0;
        for(var i = 0; i < colors[color_code].length; i++){
            str += '<a href="javascript: void(0);" onclick="javascript:chooseColor3(this);return void(0);" id="' + color_code + '_c_' +  colors[color_code][i] + '"><div style="background-color: ' + colors[color_code][i] +';"><img src="' + baseUrl + 'images/px.gif" alt="" width="25" height="15"></div></a>';
            br++;
            if (br == 4) {
                /*str += '<br><br>';*/
                br = 0;
            }
        }
        cd.innerHTML = str;
    }
}

function checkValidData3(){
    if(!result[0]){
        alert('Please select waist');
        return false;
    }
    if(!result[1]){
        alert('Please select inseam');
        return false;
    }
    if(!result[2]){
        alert('Please select size');
        return false;
    }
    return true;
}

function checkValidData5(){
    if(!result[0]){
        alert('Please select waist');
        return false;
    }
    if(!result[1]){
        alert('Please select inseam');
        return false;
    }
    return true;
}


function checkValidData2(){
    if(!result[0]){
        alert('Please select waist');
        return false;
    }
    if(!result[1]){
        alert('Please select color');
        return false;
    }
    return true;
}

function checkValidData1(){
    if(!result[0]){
        alert('Please select size');
        return false;
    }
    if(!result[1]){
        alert('Please select color');
        return false;
    }

    return true;
}

function checkValidData4(){
    if(!result[0]){
        alert('Please select size');
        return false;
    }
    return true;
}

function selColor(){
    var cd = document.getElementById("colorDiv");
    cd.innerHTML = "";
    result[2] = null;

    var color_code = result[0] + '_' + result[1];

    if(result[0] && result[1] && colors[color_code]){
        var str = "";

        for(var i = 0; i < colors[color_code].length; i++){
            str += '<a href="javascript: void(0);" onclick="javascript:chooseColor(this);return void(0);" id="' + color_code + '_' +  colors[color_code][i] + '"><div style="background-color: ' + colors[color_code][i] +';"><img src="' + baseUrl + 'images/px.gif" alt="" width="25" height="15"></div></a>';
        }
        cd.innerHTML = str;
    }
}

function selInseam(){
    
    var cd = document.getElementById("inseamDiv");
    cd.innerHTML = "";
    result[1] = null;
    var waist_code = result[0];
    //alert(waist_code);

    if(result[0] && inseam_id[waist_code]){
        var str = "";

        for(var i = 0; i < inseam_id[waist_code].length; i++){
            str += '<a href="javascript: void(0);" onclick="javascript:_setSelected(this, 1);return void(0);" id="' + 'i_' + inseam_id[waist_code][i] + '" style="margin-bottom: 8px; ">'+inseam_name[waist_code][i]+'</a>';
        }
        cd.innerHTML = str;
    }
}

function selInseam2(){

    var cd = document.getElementById("inseamDiv");
    cd.innerHTML = '';
    result[1] = null;
    var waist_code = result[0];
    //alert(waist_code);

    if(result[0] && inseam_id[waist_code]){
        var str = "";
        for(var i = 0; i < inseam_id[waist_code].length; i++){
            str += '<a href="javascript: void(0);"  onclick="javascript:_setSelected5(this, 1);return void(0);" id="'+ waist_code  + '_i_' + inseam_id[waist_code][i] + '"  style="margin-bottom: 8px; ">'+inseam_name[waist_code][i]+'</a>';
        }
        cd.innerHTML = str;
    }

}

function chooseColor3(obj){
    if(result[1]){
        var oldColor = document.getElementById(result[1]);
        if(oldColor){
            oldColor.className = '';
        }
    }
    result[1] = obj.getAttribute('id');
    obj.className = 'sel';
    var size_id = document.getElementById('size_id');
    size_id.value = obj.id;
}

function chooseColor(obj){
    if(result[2]){
        var oldColor = document.getElementById(result[2]);
        if(oldColor){
            oldColor.className = '';
        }
    }
    result[2] = obj.getAttribute('id');
    obj.className = 'sel';
    var size_id = document.getElementById('size_id');
    size_id.value = obj.id;
}




/**
 *  LightBox_2
 */

function synchronValue(objFromId, objToId){

    var objFrom = document.getElementById(objFromId);
    var objTo   = document.getElementById(objToId);

    var synchron = (objFrom != null && objFrom.value != undefined)
                && (objTo != null && objTo.value != undefined);

    if (synchron) {
        objTo.value = objFrom.value;
        return true;
    }

    return false;
}


function setArmLength(namber) {
    //reset class name
    for (var i = 0; i <armList.length; i++) {
        document.getElementById('a_' + armList[i]).className = '';
        document.getElementById('lb_a_' + armList[i]).className = '';
    }
    // set active class name
    var id = 'a_' + namber;
    document.getElementById('armlength').value = id;
    document.getElementById(id).className = 'orange';
    document.getElementById('lb_' + id).className = 'orange';
    
}