(function($){
    $('html').addClass('stylish-form');

    $.sForm = {
        defaults: {
            containerClass: '', //additional classes for container div
            classes: {'radio'   : {'on': 'styled-selected',
                                   'off':'styled-unselected'
                                  },
                      'box'     : {'on': 'styled-checked',
                                   'off':'styled-unchecked'
                                  },
                      'text'    : 'styled-text',
                      'textarea': 'styled-textarea',
                      'select'  : {'on'         : 'styled-select',
                                   'active'     :'styled-select-active',
                                   'focus'      :'styled-select-focus',
                                   'hover'      :'styled-select-hover',
                                   'size'       : 'styled-selectsize',
                                   'sizefocus'  : 'styled-selectsize-focus'
                                  },
                      'focus'   : 'focus'
                    }
        }
    };

    $.fn.sForm = function(options) {

        opts = $.extend($.sForm.defaults, options);

        function create(input){
            var $checkDiv       = $('<div class="styled-checkbox ' + opts.containerClass + '"></div>'),
                $selectDiv      = $('<div class="styled-select ' + opts.containerClass + '"></div>');
                $selectsizeDiv  = $('<div class="styled-selectsize ' + opts.containerClass + '"></div>'),
                $selectmultiDiv = $('<div class="styled-selectmulti ' + opts.containerClass + '"></div>');

            var $input = input;
//            var cur_id = $input.attr('id');
            switch ($input.attr('type')) {
                case 'radio':
                case 'checkbox':
                    if ($('label[for='+$input.attr('id')+']').exists()) {
                        $('label[for='+$input.attr('id')+']').addClass('styled-checkbox');
                        $checkDiv.insertAfter($input);
                        $checkDiv.attr("id", $input.attr('id')+'_checkhold');
                        if('radio' == $input.attr('type')) {
                            if (true == $input.attr('checked')) {
                                $('label[for='+$input.attr('id')+']').addClass(opts.classes.radio.on);
                                $('div[id='+$input.attr('id')+'_checkhold]').addClass(opts.classes.radio.on);
                            } else {
                                $('label[for='+$input.attr('id')+']').addClass(opts.classes.radio.off);
                                $('div[id='+$input.attr('id')+'_checkhold]').addClass(opts.classes.radio.off);
                            }
                        } else {
                            if (true == $input.attr('checked')) {
                                $('label[for='+$input.attr('id')+']').addClass(opts.classes.box.on);
                                $('div[id='+$input.attr('id')+'_checkhold]').addClass(opts.classes.box.on);
                            } else {
                                $('label[for='+$input.attr('id')+']').addClass(opts.classes.box.off);
                                $('div[id='+$input.attr('id')+'_checkhold]').addClass(opts.classes.box.off);
                            }
                        }
                        $input.hide();
//alert ('label'+$input.attr("onClick"));
//                        if ($input.attr("onClick") != undefined) {
//                            $(div[id='+$input.attr('id')+'_checkhold]').bind('click.sForm',function(event){
////                                $input.click();
//                            });
//                        }

                        $('label[for='+$input.attr('id')+'], div[id='+$input.attr('id')+'_checkhold]').bind('click.sForm',function(event){
                            var cur_id = $input.attr('id');

                            if('radio' == $input.attr('type')) {
                                $('input[name='+$input.attr('name')+']').each(function(index) {
                                    $('label[for='+$(this).attr('id')+']').removeClass(opts.classes.radio.on);
                                    $('label[for='+$(this).attr('id')+']').addClass(opts.classes.radio.off);
                                    $('div[id='+$(this).attr('id')+'_checkhold]').removeClass(opts.classes.radio.on);
                                    $('div[id='+$(this).attr('id')+'_checkhold]').addClass(opts.classes.radio.off);
                                });
                                $('label[for='+cur_id+']').removeClass(opts.classes.radio.off);
                                $('label[for='+cur_id+']').addClass(opts.classes.radio.on);
                                $('div[id='+cur_id+'_checkhold]').removeClass(opts.classes.radio.off);
                                $('div[id='+cur_id+'_checkhold]').addClass(opts.classes.radio.on);
                            } else {
                                if (true == $input.attr('checked')) {
                                    $('label[for='+cur_id+']').removeClass(opts.classes.box.on);
                                    $('label[for='+cur_id+']').addClass(opts.classes.box.off);
                                    $('div[id='+cur_id+'_checkhold]').removeClass(opts.classes.box.on);
                                    $('div[id='+cur_id+'_checkhold]').addClass(opts.classes.box.off);
                                    if ($(this).attr('id') == cur_id+'_checkhold') {
                                        $input.attr('checked', false);
                                    }
                                } else {
                                    $('label[for='+cur_id+']').removeClass(opts.classes.box.off);
                                    $('label[for='+cur_id+']').addClass(opts.classes.box.on);
                                    $('div[id='+cur_id+'_checkhold]').removeClass(opts.classes.box.off);
                                    $('div[id='+cur_id+'_checkhold]').addClass(opts.classes.box.on);
                                    if ($(this).attr('id') == cur_id+'_checkhold') {
                                        $input.attr('checked', true);
                                    }
                                }
                            }
                            if ($(this).attr('id') == cur_id+'_checkhold') {
                                if ($input.attr("onClick") != undefined) {
                                    $input.click();
                                }
                            }

                        });
                    } else {
//alert (''+$input.attr("onClick"));

                        $checkDiv.insertAfter($input);
                        $checkDiv.attr("id", $input.attr('id')+'_checkhold');
                        if('radio' == $input.attr('type')) {
                            if (true == $input.attr('checked')) {
                                $('div[id='+$input.attr('id')+'_checkhold]').addClass(opts.classes.radio.on);
                            } else {
                                $('div[id='+$input.attr('id')+'_checkhold]').addClass(opts.classes.radio.off);
                            }
                        } else {
                            if (true == $input.attr('checked')) {
                                $('div[id='+$input.attr('id')+'_checkhold]').addClass(opts.classes.box.on);
                            } else {
                                $('div[id='+$input.attr('id')+'_checkhold]').addClass(opts.classes.box.off);
                            }
                        }
                        $input.hide();


//                        if ($input.attr("onClick") != undefined) {
//                            $('div[id='+$input.attr('id')+'_checkhold]').bind('click.sForm',function(event){
//                                $input.attr("onClick");
//                            });
//                        }

//                        $input.bind('change.sForm', function(event) {
//                            alert ('single huhu');
//                            });

                        $('div[id='+$input.attr('id')+'_checkhold]').bind('click.sForm',function(event){
                            if ($input.attr("onClick") != undefined) {
//                                $input.attr("onClick");
                            }
                            var cur_id = $input.attr('id');
                            if('radio' == $input.attr('type')) {
                                $('input[name='+$input.attr('name')+']').each(function(index) {
                                    $('div[id='+$(this).attr('id')+'_checkhold]').removeClass(opts.classes.radio.on);
                                    $('div[id='+$(this).attr('id')+'_checkhold]').addClass(opts.classes.radio.off);
                                });
                                $('div[id='+cur_id+'_checkhold]').removeClass(opts.classes.radio.off);
                                $('div[id='+cur_id+'_checkhold]').addClass(opts.classes.radio.on);
                            } else {
                                if (true == $input.attr('checked')) {
                                    $('div[id='+cur_id+'_checkhold]').removeClass(opts.classes.box.on);
                                    $('div[id='+cur_id+'_checkhold]').addClass(opts.classes.box.off);
                                    if ($(this).attr('id') == cur_id+'_checkhold') {
                                        $input.attr('checked', false);
                                    }
                                } else {
                                    $('div[id='+cur_id+'_checkhold]').removeClass(opts.classes.box.off);
                                    $('div[id='+cur_id+'_checkhold]').addClass(opts.classes.box.on);
                                    if ($(this).attr('id') == cur_id+'_checkhold') {
                                        $input.attr('checked', true);
                                    }
                                }
                            }
                        });

                    }
                    break;

                case 'text':
                case 'password':
                    $input.addClass(opts.classes.text);
                    break;

                case 'textarea':
                    $input.addClass(opts.classes.textarea);
                    break;

                default:
                    if ($input.is('select')) {
                        if ($input.attr('size') > 1 &&
                            $input.attr("multiple") != true
                        ) {
                            var ulTag = $('<ul>'),
                                myheight = ($input.height()/$input.attr('size'));

                            var selected = $input.find(":selected:first");
                            if (selected.length == 0){
                                selected = $input.find("option:first");
                            }

                            $input.addClass(opts.classes.select.size);

                            if (true == $input.parent().is('div.styled-selectsize')) {
                            } else {
                                $input.wrap($selectsizeDiv);
                            }
                            $input.before(ulTag);
                            var divTag = $input.parent("div");
                            var optgroups = [];

                            divTag.css('width', $input.width()+20);
                            divTag.css('height', $input.height());


                            if ($('div[id='+$input.attr('id')+'-options]').exists) {
                                $('div[id='+$input.attr('id')+'-options]').find('button').each(function(i){
                                    var $this = $(this);
                                    $this.get(0).onclick = '';
                                    if ('elementincrease' == $this.attr('class')) {
                                        $this.bind({
                                            "click.sForm": function() {
                                                divTag.css('height', divTag.height()+5*myheight);
                                            }
                                        });
                                    } else {
                                        $this.bind({
                                            "click.sForm": function() {
                                                if ($input.height() <= divTag.height()-5*myheight) {
                                                    divTag.css('height', divTag.height()-5*myheight);
                                                }
                                            }
                                        });
                                    }
                                });
                            }
                            ulTag = $input.siblings("ul");

                            $input.find('option').each(function(i){
                    			var $this = $(this),
                    				title = $this.html(),
                    				value = this.value;

                    		    if($this.parent().is('optgroup')) {
                    		        label = $this.parent().attr('label');
                    		        if($.inArray(label,optgroups) === -1){
                    		            ulTag.append('<li class="group '+$this.parent().attr('class')+'"><span>' + label + '</span></li>');
                    		            optgroups.push(label);
                    		        }
                    		    }
                                if (value == selected.val()) {
                                    ulTag.append('<li class="selected '+$this.attr('class')+'"><a href="#" rel="'+value+'">' + title + '</a></li>');

                                } else {
                                    ulTag.append('<li class="'+$this.attr('class')+'"><a href="#" rel="'+value+'">' + title + '</a></li>');
                                }
                            });
                            ulTag.find('a').bind({
                                "click.sForm": function() {
                                    $input.find('option[value='+$(this).attr('rel')+']').attr('selected', 'selected');
                                    ulTag.find('li').removeClass('selected');
                                    $(this).parent().addClass('selected');
                                    divTag.addClass(opts.classes.select.sizefocus);
                                    return false;
                                },
                                "blur.sForm": function() {
                                    divTag.removeClass(opts.classes.select.sizefocus);
                                    return false;
                                }
                            });
                        } else if ($input.attr("multiple") == true) {
                            var spanTag   = $('<span>'),
                                holderTag = $('<div class="selectmulti">'),
                                ulTag     = $('<ul>');

                            spanTag.html('aaaa');
                            $input.addClass(opts.classes.select.off);
                            if (true == $input.parent().is('div.styled-selectmulti')) {
                            } else {
                                $input.wrap($selectmultiDiv);
                                $input.before(spanTag);
                            }
                            $input.before(holderTag);

                            if ($('div[id='+$input.attr('id')+'-options]').exists) {
                                $('div[id='+$input.attr('id')+'-options]').hide();
                            }
                            var divTag = $input.parent();
                            var optgroups = [];
                            divTag.css('width', $input.width());

                            spanTag = $input.siblings("span");

                            $input.find('option').each(function(i){
                    			var $this = $(this),
                    				title = $this.html(),
                    				value = this.value;

                    		    if($this.parent().is('optgroup')) {
                    		        label = $this.parent().attr('label');
                    		        if($.inArray(label,optgroups) === -1){
                    		            ulTag.append('<li class="group '+$this.parent().attr('class')+'"><span>' + label + '</span></li>');
                    		            optgroups.push(label);
                    		        }
                    		    }
                                if (true == $this.attr('selected')) {
                                    ulTag.append('<li class="selected"><a href="#" rel="'+value+'">' + title + '</a></li>');
                                } else {
                                    ulTag.append('<li><a href="#" rel="'+value+'">' + title + '</a></li>');
                                }
                            });
                            ulTag.find('a').bind({
                                "click.sForm": function() {
                                    if (true == $input.find('option[value='+$(this).attr('rel')+']').attr('selected')) {
                                        $input.find('option[value='+$(this).attr('rel')+']').attr('selected', '');
                                        $(this).parent().removeClass('selected');
                                    } else {
                                        $input.find('option[value='+$(this).attr('rel')+']').attr('selected', 'selected');
                                        $(this).parent().addClass('selected');
                                    }
                                    divTag.addClass(opts.classes.select.sizefocus);
                                    return false;
                                },
                                "blur.sForm": function() {
                                    divTag.removeClass(opts.classes.select.sizefocus);
                                    return false;
                                }
                            });

                            holderTag.append(ulTag);
                            holderTag.hide();

                            spanTag.bind({
                                'click.sForm': function() {
                                    holderTag.toggle();
                                }
                            });

                        } else {
                            var spanTag = $('<span>');

                            var selected = $input.find(":selected:first");
                            if(selected.length == 0){
                                selected = $input.find("option:first");
                            }
                            spanTag.html(selected.text());

                            $input.addClass(opts.classes.select.off);
                            $input.wrap($selectDiv);
                            $input.before(spanTag);

                            var divTag = $input.parent("div");
                            divTag.css('width', $input.width());

                            spanTag = $input.siblings("span");
                            $input.bind({
                                "change.sForm": function() {
                                    spanTag.text($input.find(":selected").text());
                                    divTag.removeClass(opts.classes.select.active);
                                },
                                "focus.sForm": function() {
                                    divTag.addClass(opts.classes.select.focus);
                                },
                                "blur.sForm": function() {
                                    divTag.removeClass(opts.classes.select.focus);
                                    divTag.removeClass(opts.classes.select.active);
                                },
                                "mousedown.sForm touchbegin.sForm": function() {
                                    divTag.addClass(opts.classes.select.active);
                                },
                                "mouseup.sForm touchend.sForm": function() {
                                    divTag.removeClass(opts.classes.select.active);
                                },
                                "click.sForm touchend.sForm": function(){
                                    divTag.removeClass(opts.classes.select.active);
                                },
                                "mouseenter.sForm": function() {
                                    divTag.addClass(opts.classes.select.hover);
                                },
                                "mouseleave.sForm": function() {
                                    divTag.removeClass(opts.classes.select.hover);
                                },
                                "keyup.sForm": function(){
                                    spanTag.text($input.find(":selected").text());
                                }
                            });

                            $.noSelect(spanTag);
                        }
                    }
                    break;
            }
        }

        $.sForm.update = function(elem) {
            $input = elem;
            if ('select-multiple' == elem.attr('type')) {
                divTag = $input.parent();
                divTag.find('div').remove();
                create($input);
            }
            if ('select-one' == elem.attr('type')) {
                if (elem.attr('size') > 1 ) {
                    divTag = $input.parent();
                    divTag.find('ul').remove();
                    create($input);
                } else {
                    var selected = $input.find(":selected:first");
                    if(selected.length == 0){
                        selected = $input.find("option:first");
                    }
                    var divTag = $input.parent("div");
                    divTag.find('span').html(selected.text());
                    divTag.css('width', $input.width());
                }
            }
            if ('checkbox' == elem.attr('type')) {
                cur_id = elem.attr('id');
                if (true == elem.attr('checked')) {
                    $('div[id='+cur_id+'_checkhold]').removeClass(opts.classes.box.off);
                    $('div[id='+cur_id+'_checkhold]').addClass(opts.classes.box.on);
                } else {
                    $('div[id='+cur_id+'_checkhold]').removeClass(opts.classes.box.on);
                    $('div[id='+cur_id+'_checkhold]').addClass(opts.classes.box.off);
                }
            }
        }

        $.noSelect = function(elem) {
            function f() {
                return false;
            };
            $(elem).each(function() {
                this.onselectstart = this.ondragstart = f; // Webkit & IE
                $(this)
                    .mousedown(f) // Webkit & Opera
                    .css({ MozUserSelect: 'none' }); // Firefox
            });
        };

        return this.each(function() {
            create($(this));
        });

    }

})(jQuery);

jQuery.fn.formupdate = function(){return $.sForm.update(this)}
jQuery.fn.exists = function(){return jQuery(this).length>0;}
$().ready(function() {
    $('input.text,input.password,textarea').sForm();
    $(function () {
        var uri  = window.location.href.split("#")[0];
        var hash = window.location.href.split("#")[1];

        var tabContainers = $('div.tab-pane > div');
        $('div.tab-pane').addClass('dynamic-tab-pane-control');
        $('div.tab-pane > a[name=tabs]').before('<div class="tab-row"></div>');
        var tabMenu = $('div.tab-pane > div.tab-row');
        tabContainers.each(function(index) {
            var elem = $(this).find('div.tab');
            if ($(this).hasClass('selected')) {
                tabMenu.append('<div class="tab selected"><a href="'+uri+'#'+$(this).attr('id')+'" accesskey="'+$(this).attr('title')+'">'+elem.text()+'</a></div>');
            } else {
                tabMenu.append('<div class="tab"><a href="'+uri+'#'+$(this).attr('id')+'" accesskey="'+$(this).attr('title')+'">'+elem.text()+'</a></div>');
            }
            elem.hide();
        });

        tabContainers.hide().filter('.selected').show();

        $('div.tab-pane > div.tab-row a').click(function () {
                tabContainers.hide();
                tabContainers.filter(this.hash).show();
                if ($('input[name=curtab]').exists()) {
                    $('input[name=curtab]').val(this.hash.substring(1));
                }
                $('div.tab-pane > div.tab-row a').parent().removeClass('selected');
                $(this).parent().addClass('selected');
//                return false;
            }).filter('.selected').click();
    });
});