var PictureTrail = PictureTrail || { page: {} };
PictureTrail.page = PictureTrail.page || {};

// Wire up the color pickers
PictureTrail.page.Pets = {
    form   : null,
    colors : {
        head_color      : null,
        body_color      : null,
        tail_color      : null,
        left_ear_color  : null,
        right_ear_color : null
    },

    resetColors : function () {
        var Pets = PictureTrail.page.Pets;
        if (!Pets.form) {
            return;
        }

        Pets.colors['head_color'].select('E6DFC3');
        Pets.colors['body_color'].select('E6DFC3');
        Pets.colors['tail_color'].select('D3A54D');
        Pets.colors['left_ear_color'].select('D3A54D');
        Pets.colors['right_ear_color'].select('D3A54D');
        Pets.form.submitForm();
    },

    setStyle : function (style) {
        var Pets = PictureTrail.page.Pets;
        var Form = PictureTrail.form;

        Form.fieldValue('pet_cust_form','Footwear',style);
        Form.fieldValue('pet_cust_form','Headgear',style);
        Form.fieldValue('pet_cust_form','Collar',style);
        Form.fieldValue('pet_cust_form','Glasses',style);
        Form.fieldValue('pet_cust_form','Piercing',style);
        Form.fieldValue('pet_cust_form','EarLeft',style);
        Form.fieldValue('pet_cust_form','EyeBrow',style);

        Pets.form.submitForm();
    }
};

Ext.onReady( function() { 
    var COLORS = [
    'FCE7B2','E6DFC3','D3A54D','AC5927','BD551E','993300','800000','6D4335',
    'FFCC99','DFD3A1','BB9346','835437','BC714A','67341B','4A2525','432920',
    'CBC3B6','BCAD94','C0C0C0','969696','808080','333333','000000','FFFFFF',
    'FFFF99','FFFF00','FFCC00','FF9900','FF6600','FF0000','CB116D','FFA9D4',
    '003366','000080','333399','666699','800080','993366','BA80F5','65A7E9',
    '1E9F48','008080','33CCCC','00FFFF','CCFFFF','0000FF','3366FF','00CCFF'
    ];
    var Pets   = PictureTrail.page.Pets;
    var Form   = PictureTrail.form;
    var Event  = YAHOO.util.Event,
        Dom    = YAHOO.util.Dom;
    var frm    = Dom.get('pet_cust_form');

    Pets.form  = new Form.AsyncForm(frm,true);

    Pets.form.subscribe({
        preprocess : function () {
            var obj = document.AdoptAPet;
            obj = document.getElementById('AdoptAPet');
            if ( !obj ) return;
            var pet_data = Form.fields(frm);
            for ( var field in pet_data ) {
                var value = pet_data[field];
                if (value === null) {
                    continue;
                }

                if ( /^#/.test(value) ) {
                    value = value.replace(/^#/, '0x');
                    Form.fieldValue(frm,field,value);
                }
                if (field == 'Piercing') {
                    Form.fieldValue(frm,'EyeBrow', value);
                    Form.fieldValue(frm,'EarLeft', value);
                    obj.SetVariable('EyeBrow', value);
                    obj.SetVariable('EarLeft', value);
                } else {
                    obj.SetVariable(field, value);
                }
            }
            obj.SetVariable("varsChange", 1);
            var is_sample = pet_data['sample'];
            return is_sample ? false : true;
        },
        success: function () {},
        failure: function (o) {
            if (YAHOO.util.Connection.isCallInProgress(o)) {
                return;
            }
            alert("Sorry, there was a problem updating!");
            document.location = document.location;
        }
    });

    // Wire up the color pickers
    for (color in Pets.colors) {
        Pets.colors[color] = new Form.ColorPicker(color, Pets.form.submitForm, COLORS);
    }

    // copy finalized form values from the async form to the save form on submit
    Event.on('pet_save', 'submit', function () {
        var pet_data = Form.fields(frm);
        for (var field in pet_data) {
            if (field === 'async') {
                continue;
            }
            Form.fieldValue(this, field, pet_data[field], true);
        }
        return true;
    });

    // Add style hover highlighting 
    var styles = Dom.getElementsByClassName('section','TD',frm);
    for ( var i = 0, limit = styles.length; i < limit; ++i) {
        var link = styles[i].getElementsByTagName('A').item(0);
        if (!link) {
            continue;
        }

        Event.on(link, 'mouseover', function (e,row) {
            Dom.addClass(row, 'highlight');
        }, styles[i].parentNode);
        Event.on(link, 'mouseout', function (e,row) {
            Dom.removeClass(row, 'highlight');
        }, styles[i].parentNode);
    }
} );