/**** /js/moikrug/card/FirstPage.js ****/
Lang.module('moikrug.card.FirstPage');

moikrug.card.FirstPage = Lang.createClass(Page, {
    init: function() {
        this.baseConstructor();
        this.bindEvents();
    },

    bindEvents: function() {
    
        Event.observe($('person_photo'), 'keydown', (function (e) { 
            Event.stop(e);
            return false;
        }));
        
        Event.observe($('person_photo'), 'change', (function() {
            window.setTimeout((function() {
                this.onPhotoUploadStart();
                Event.observe($('person_photo_iframe'), 'load', (function() {
                    this.onPhotoUploadFinish();
                    var image = window.frames['person_photo_iframe'].document.getElementById('person_photo_url');
                    // if we have an uploaded image url then show it and hide label
                    if (image && image.className.indexOf("hidden") == -1 && image.src) {
                        $('person_photo_url').src = image.src;
                        if ($('person_photo_url').hasClassName('hidden')) {
                            $('person_photo_url').removeClassName('hidden');
                            if ($('person_photo_label')) {
                                $('person_photo_label').addClassName('hidden');
                            }
                        }
                    }

                    // copy photo errors from iframe to current document
                    var errors = window.frames['person_photo_iframe'].document.getElementById('person_photo_errors');
                    
                    var myErrors = $('person_photo_errors');
                    myErrors.innerHTML = errors.innerHTML;
                    
                }).bind(this));
                try {
                    $('person_photo_form').submit();
                } catch(e) { 
                    this.onPhotoUploadFinish();
                }
            }).bind(this), 100);
        }).bind(this));
    },
    
    onPhotoUploadStart: function() {
        // if image is preloaded -- hide it
        $('person_photo_url').addClassName('hidden');
        // show upload progress text
        $('person_photo_upload_progress').removeClassName('hidden');
        // disable main submit button
        var submit = $$('input.button_submit')[0];
        submit.disabled = true;
        submit.addClassName('disabled');
    },
    
    onPhotoUploadFinish: function() {
        // hide upload progress text
        $('person_photo_upload_progress').addClassName('hidden');
        // enable main submit button
        var submit = $$('input.button_submit')[0];
        submit.disabled = null;
        submit.removeClassName('disabled');
        $('person_photo_url').removeClassName('hidden');
    }
    
});

;

/**** /js/common/FormUtils.js ****/
Lang.module('common.FormUtils');

common.FormUtils = {
    
    placeholder: function(node, textOrLabel, options) {
         this.options = options || {};
         
         this.isSpanHeightRequired = this.options.hasOwnProperty("isSpanHeightRequired") ? this.options.isSpanHeightRequired : true;
         
         if (!$(node)) {
             return;
         }
         if (!textOrLabel && $(node + '_label')) { 
            this._placeholderLabel($(node), $(node + '_label'));
        } else if ($(textOrLabel)) {
            this._placeholderLabel($(node), $(textOrLabel));
        } else if (textOrLabel) {
            this._placeholderText($(node), textOrLabel);
        }
    },

    getLabel: function(input) {
        for (var i=0,I=this._inputs.length;i<I;i++) {
            if (this._inputs[i] == input) {
                return this._labels[i];
            }
        }
        return null;
    },
    
    _inputs: [],
    _labels: [],
    _cleanerLaunched: false,
    
    _cleaner: function() {
        for (var i=0,I=this._inputs.length; i<I; i++) {
            //noinspection BadExpressionStatementJS
            if (this._inputs[i] && !!this._inputs[i].value.length) {
                this._labels[i].style.display = "none";
            }
        }
    },
    
    _placeholderLabel: function(node, label)
    {
        this._inputs[this._inputs.length] = node;
        this._labels[this._labels.length] = label;
        Event.observe(node, "focus", function() {
             label.style.display = "none";
        });
        Event.observe(node, "blur", function() {
            if (node.value.strip() === "") {
                label.style.display = "block";
            }
        });
        Event.observe(label, "click", function() {
            node.focus();
        });
        if (!this._cleanerLaunched) {
            this._cleanerLaunched = true;
            window.setInterval(this._cleaner.bind(this), 100);
        }
    },
    
    _placeholderText: function(node, text) {
        Element.wrap(node, 'span').setStyle({
            position: 'relative',
            top: '0', 
            left: '0', 
            display: 'block', 
            height: this.isSpanHeightRequired ? "1%" : ""
        });
        
        var label = new Element('label', {'for': node.id});
        label.innerHTML = text;
        label.setStyle({
            position: 'absolute',
            top: this.options.top || '1px', 
            left: '4px',
            display: 'block',
            lineHeight: '1.4em',
            cursor: 'text',
            color: '#999',
            zIndex: '2',
            whiteSpace: 'nowrap'
        });
        node.insert({before: label});
        this._placeholderLabel(node, label);
    }
};

;