$(function() {
    oxui = new Oxui();
    oxui.init();
});

function Oxui() {
    var oxui = this;
    this.init = function(path) {
        oxui.path = typeof(path) != 'undefined' ? path : '/static/images/0xui/';
        var oxuiImages = [
            'button43', 'button60', 'button94', 'button128', 'button196', 'button264',
            'checkbox', 'checkboxChecked',
            'input43', 'input60', 'input94', 'input128', 'input196', 'input264', 'input400', 'input536',
            'radio', 'radioChecked',
            'search128',
            'select43', 'select60', 'select94', 'select128', 'select196', 'select264', 'select400', 'select536',
            'text128', 'text196x60', 'text240', 'text264', 'text264x128', 'text400', 'text536',
            'textarea536x192'
        ];
        var images = []
        for (i in oxuiImages) {
            images[i] = new Image();
            images[i].src = oxui.path + oxuiImages[i] + '.png';
        }
        this.load();
        /*
        $(document).keydown(function(event) {
            var key = event.which;
            if (key == 13) {
                var element = $('input.focus');
                element.blur();
                element.submit();
            }
            else
                return true;
        });
        */
        // prevent firefox from filling in placeholders as values after reload
        $(window).unload(function() { $('.placeholder').val('') });
    }
    this.load = function(element) {
        var element = typeof(element) != 'undefined' ? element : 'body';
        $(element + ' div.oxui').map(function() {
            var width = parseInt($(this).css('width'));
            var height = parseInt($(this).css('height'));
            var paddingTop = parseInt($(this).css('padding-top'));
            var fontSize = parseInt($(this).css('font-size'));
            var filename = 'text' + width;
            if (height != 16) {
                filename += 'x' + height;
            }
            if (!paddingTop) {
                paddingTop = 7 - Math.ceil(fontSize / 2);
            }
            $(this).addClass('oxuiText');
            $(this).css('width', (width - 16) + 'px');
            $(this).css('height', (height - paddingTop) + 'px');
            $(this).css('padding-top', paddingTop + 'px');
            $(this).css('background', 'url(' + oxui.path + filename + '.png) no-repeat');
        });
        $(element + ' input.oxui').map(function() {
            var t = $(this);
            var width = parseInt($(this).css('width'));
            // fixme: use $(':text', ':checkbox' etc)
            if ($.inArray($(this).attr('type'), ['button', 'reset', 'submit']) > -1) {
                $(this).css('display', 'none');
                //$(this).attr('tabindex', '1');
                var element = $('<div></div>');
                element.addClass('oxuiButton');
                element.css('width', (width - 16) + 'px');
                element.css('background', 'url(' + oxui.path + 'button' + width + '.png)')
                element.html($(this).val());
                if ($(this).attr('disabled')) {
                    element.addClass('disabled');
                } else {
                    var e = element;
                    element.mousedown(function() { e.addClass('focus'); });
                    element.mouseup(function() { e.removeClass('focus') });
                    element.mouseout(function() { e.removeClass('focus'); });
                    //element.focus(function() { e.addClass('focus'); });
                    //element.blur(function() { e.removeClass('focus') });
                    element.click(function() {
                        if (t.attr('type') == 'submit')
                            $('.placeholder').val('');
                        t.click();
                    });
                }
                $(this).next('.oxuiButton').remove();
                $(this).after(element);
            }
            else if ($(this).attr('type') == 'checkbox') {
                $(this).css('display', 'none');
                $(this).change(function() {
                    //alert('changed')
                    if (t.attr('checked')) {
                        t.next().addClass('checked');
                    } else {
                        t.next().removeClass('checked');
                    }
                });
                //$(this).focus(function() { t.next().addClass('focus') });
                //$(this).blur(function() { t.next().removeClass('focus') });
                var element = $('<div></div>');
                element.addClass('oxuiCheckbox');
                if (t.attr('checked')) {
                    element.addClass('checked');
                }
                var e = element;
                element.click(function() {
                    if (t.attr('checked')) {
                        t.removeAttr('checked');
                    } else {
                        t.attr({'checked': 'checked'});
                    }
                    t.change();
                    //e.toggleClass('checked');
                });
                $(this).next('.oxuiCheckbox').remove();
                $(this).after(element);
            }
            else if ($(this).attr('type') == 'radio') {
                var name = $(this).attr('name');
                $(this).css('display', 'none');
                //$(this).attr('tabindex', '1');
                //$(this).focus(function() { t.next().addClass('focus') });
                //$(this).blur(function() { t.next().removeClass('focus') });
                var element = $('<div></div>');
                element.addClass('oxuiRadio');
                element.addClass('notChecked');
                element.attr('name', name);
                var e = element;
                element.click(function() {
                    if (!t.attr('checked')) {
                        $('input[type=radio][name=' + name + '][checked]').attr('checked', '');
                        t.attr('checked', 'checked');
                        var element = $('div[name=' + name +']')
                        element.removeClass('checked');
                        element.addClass('notChecked');
                        e.removeClass('notChecked');
                        e.addClass('checked');
                    }
                });
                $(this).next('.oxuiRadio').remove();
                $(this).after(element);
            }
            else if ($(this).attr('type') != 'hidden') {
                /*
                if ($(this).attr('id', 'password')) {
                    // $(this).attr('type', 'text');
                    $(this).val($(this).attr('placeholder'));
                }
                */
                if ($(this).attr('disabled')) {
                    $(this).addClass('disabled');
                } else {
                    $(this).focus(function() {
                        t.addClass('focus');
                        // if (!$.browser.safari && t.hasClass('placeholder')) {
                        if (t.hasClass('placeholder')) {
                            t.removeClass('placeholder');
                            t.val('');
                            if (this.id == 'password') {
                                this.type = 'password';
                                this.focus();
                                this.select();
                            }
                        }
                    });
                    $(this).blur(function() {
                        t.removeClass('focus');
                        // if (!$.browser.safari && t.val() == '') {
                        if (t.val() == '') {
                            t.addClass('placeholder');
                            t.val(t.attr('placeholder'));
                            if (this.id == 'password')
                                this.type = 'text';
                        }
                    });
                }
                if ($(this).attr('autosave')) {
                    $(this).addClass('oxuiSearch');
                    $(this).css('width', width + 'px');
                    $(this).css('background', 'url(' + oxui.path + 'search' + width + '.png) no-repeat')
                    var element = $('<select></select>');
                    element.addClass('oxuiSearchSelect');
                    element.css('margin-left', '-' + width + 'px');
                    element.attr('tabindex', '-1');
                    var option = $('<option></option>');
                    option.attr('disabled', 'disabled');
                    option.html('Recent Values');
                    element.append(option);
                    /*
                    option = $('<option></option>');
                    option.val('_Clear Recent Values_');
                    option.html('Clear Recent Values');
                    element.append(option);
                    */
                    $(this).after(element);
                    element = $('<div></div>')
                    element.addClass('oxuiSearchButton');
                    element.css('margin-left', (width - 16) + 'px');
                    if ($.browser.mozilla) {
                        element.css('height', '18px');
                    }
                    element.click(function() { t.val(''); t.focus() });
                    $(this).next().after(element);
                }
                else {
                    $(this).addClass('oxuiInput');
                    if ($(this).attr('placeholder') && $(this).val() == '') {
                        $(this).addClass('placeholder')
                        $(this).val($(this).attr('placeholder'));
                    }
                    if ($.browser.safari) {
                        $(this).css('width', (width - 16) + 'px');
                    } else {
                        $(this).css('width', (width - 16) + 'px');
                    }
                    $(this).css('background', 'url(' + oxui.path + 'input' + width + '.png) no-repeat')
                }
            }
        });
        $(element + ' select.oxui').map(function() {
            var t = $(this);
            var width = parseInt($(this).css('width'));
            if ($.browser.mozilla) {
                $(this).css('height', '14px');
            }
            $(this).focus(function() { t.prev().addClass('focus') });
            $(this).blur(function() { t.prev().removeClass('focus') });
            $(this).change(function() { t.prev().html(t.children('[selected]').html()) });
            var element = $('<div></div>');
            element.addClass('oxuiSelect');
            element.css('width', (width - 24) + 'px');
            element.css('background', 'url(' + oxui.path + 'select' + width + '.png) no-repeat');
            element.html($(this).children('[selected]').html());
            $(this).prev('.oxuiSelect').remove();
            $(this).before(element);
            // silly fix for firefox 2.x
            if ($.browser.mozilla) {
                $(this).remove();
                element.after($(this));
                $(this).focus(function() { t.prev().addClass('focus') });
                $(this).blur(function() { t.prev().removeClass('focus') });
                $(this).change(function() { t.prev().html(t.children('[selected]').html()) });
            }
        });
        $(element + ' textarea.oxui').map(function() {
            var t = $(this);
            var width = parseInt($(this).css('width'));
            var height = parseInt($(this).css('height'));
            if ($(this).val() == '' && $(this).attr('placeholder') != '') {
                t.addClass('placeholder');
                $(this).val($(this).attr('placeholder'));
            }
            $(this).focus(function() {
                t.addClass('focus');
                if (t.hasClass('placeholder')) {
                    t.removeClass('placeholder');
                    t.val('');
                }
            });
            $(this).blur(function() {
                t.removeClass('focus');
                if (t.val() == '') {
                    t.addClass('placeholder');
                    t.val(t.attr('placeholder'));
                }
            });
            $(this).addClass('oxuiTextarea');
            if ($.browser.mozilla) {
                $(this).css('padding-left', '6px');
                $(this).css('padding-right', '6px');
                $(this).css('width', (width - 12) + 'px');
            } else {
                $(this).css('width', (width - 8) + 'px');
            }
            $(this).css('height', (height - 8) + 'px');
            $(this).css('background', 'url(' + oxui.path + 'textarea' + width + 'x' + height + '.png) no-repeat')
        });
        if ($.browser.mozilla) {
            $(element + ' input[placeholder]').map(function() {
                if ($(this).val() == '') {
                    $(this).addClass('placeholder');
                    $(this).val($(this).attr('placeholder'));
                }
            });
        }
    }
}