﻿/* Form Select Restyled v1.1.0 Beta - jQuery Plugin
* Copyright (c) 2010 Patrik Totero
* Author: 	Patrik Totero, www.patriktotero.com
* Released with the MIT License: http://www.opensource.org/licenses/mit-license.php
*/
(function($) {
    $.fn.FormSelectRestyled = function($nameAsId, $className, $noSelectSign) {
        return this.each(function() {
            var $parent = $(this);
            $parent.find('select').each(function(i, elm) {
                $(elm).find('option').each(function(i, elm) {
                    if ($(elm).attr('value') == '') {
                        $(elm).text($noSelectSign + $(elm).text() + $noSelectSign);
                    }
                    if (i == 0) $(elm).wrapInner('<span />'); console.log('wdwd');
                    var $innerHtml = $(elm).html();
                    $(elm).replaceWith('<li>' + $innerHtml + '</li>');
                    $dropTop = $(elm).height();
                });
                var $selectWidth = $(elm).width();
                var $innerHtml = $(elm).html();
                var $ul = $('<ul />').css({ width: $selectWidth });
                if ($nameAsId) {
                    var $id = $(elm).attr('name');
                    $($ul).attr('id', $id);
                }
                $(elm).replaceWith($ul);
                $($ul).html($innerHtml);
                $($ul).attr('class', $className);
                var $li = $($ul).find('li');
                $($li[0]).clone().appendTo($li[0]);
                $($li).each(function(i, elm) {
                    if (i > 0) {
                        $(elm).remove().appendTo($li[0]);
                    }
                });
                $($ul).find('li li').wrapAll('<ul class="' + $className + '-drop" />').bind('click', function() {
                    $($li[0]).find('span').eq(0).text($(this).text());
                });
                $('.' + $className + '-drop', $($ul)).css({
                    top: $($li).innerHeight(),
                    width: $($ul).width()
                });
                $($ul).append('<li class="' + $className + '-open"><span /></li>');
                $('.' + $className + '-open span', $($ul)).css({
                    width: $($ul).height(),
                    height: $($ul).height()
                }).bind('click', function() {
                    $(this).parent().prev().find('ul').fadeIn('fast', function() {
                        $(this).one('mouseleave', function() {
                            $(this).fadeOut('fast');
                        }).one('click', function() {
                            $(this).fadeOut('fast');
                        });
                    });
                });
            });

        });
    }
})(jQuery);
