$(document).ready(function() {
    
    // Beautiful SELECT
    $('SELECT.beauty').each(function() {
        var option = '';
        var id = $(this).attr('id');
        var active_item = '';
        $('OPTION', this).each(function() {
            option += '<div value="' + $(this).val() + '"';
            if ($(this).get(0).selected == true)
            {
                option += ' class="selected"';
                active_item = $(this).text();
            }
            option += '>' + $(this).text() + '</div>'; 
        });
        var select = $('<div class="select"><table cellpadding="0" cellspacing="0" class="frame input"><tr><td class="frame_10"></td><td class="frame_11"><div class="active_item">' + active_item + '</div></td><td class="frame_12"></td></tr></table><div class="arrow" style="cursor: pointer"></div><div class="drop_down"><table border="0" cellpadding="0" cellspacing="0" class="frame input grey"><tr><td class="frame_1"></td><td class="frame_2">&nbsp;</td><td class="frame_3"></td></tr><tr><td class="frame_4">&nbsp;</td><td class="frame_5">' +
                 option +
                 '</td><td class="frame_6">&nbsp;</td></tr><tr><td class="frame_7"></td><td class="frame_8">&nbsp;</td><td class="frame_9"></td></tr></table></div></div>').insertAfter(this);
        $(this).prependTo(select);

        if (id !== '')
        {
            $(select).attr('id', id);
        }
        $(select).addClass($(this).attr('class'));
        $(select).removeClass('beauty');
		
        
        $('.drop_down DIV', select).bind('mouseover mouseout', function() {
            $(this).toggleClass('hover');
        });
        $('.arrow', select).bind('mouseover mouseout', function() {
            $(this).toggleClass('active');
        });
        $('.drop_down DIV', select).click(function() {
        	//var select = $(this).parents('DIV.select');
            $('.active_item',select).text($(this).text());
            $('SELECT', select).val($(this).attr('value'));
            $('.drop_down DIV', select).removeClass('selected');
            $(this).addClass('selected');
            $('.drop_down', select).slideToggle(150);
        });
        $('.arrow, .active_item', select).click(function() {
        	if ($('.drop_down', select).css('display') != 'none')
        	{
        		$('.select .drop_down').slideUp(150);
        	}
        	else
        	{
        		$('.select .drop_down').slideUp(150);
        		$('.drop_down', select).slideDown(150);
        	}
        });
		$('.form_close').bind("mouseleave",function(){
		$('.drop_down', select).slideUp(150);
		});
    });
	
	$('SELECT.beauty1').each(function() {
        var option = '';
        var id = $(this).attr('id');
        var active_item = '';
        $('OPTION', this).each(function() {
            option += '<div value="' + $(this).val() + '"';
            if ($(this).get(0).selected == true)
            {
                option += ' class="selected"';
                active_item = $(this).text();
            }
            option += '>' + $(this).text() + '</div>'; 
        });
        var select = $('<div class="select"><table cellpadding="0" cellspacing="0" class="frame input"><tr><td class="frame_10"></td><td class="frame_11"><div class="active_item">' + active_item + '</div></td><td class="frame_12"></td></tr></table><div class="arrow" style="cursor: pointer"></div><div class="drop_down"><table border="0" cellpadding="0" cellspacing="0" class="frame input grey"><tr><td class="frame_1"></td><td class="frame_2">&nbsp;</td><td class="frame_3"></td></tr><tr><td class="frame_4">&nbsp;</td><td class="frame_20">' +
                 option +
                 '</td><td class="frame_6">&nbsp;</td></tr><tr><td class="frame_7"></td><td class="frame_8">&nbsp;</td><td class="frame_9"></td></tr></table></div></div>').insertAfter(this);
        $(this).prependTo(select);

        if (id !== '')
        {
            $(select).attr('id', id);
        }
        $(select).addClass($(this).attr('class'));
        $(select).removeClass('beauty1');
		
        
        $('.drop_down DIV', select).bind('mouseover mouseout', function() {
            $(this).toggleClass('hover');
        });
        $('.arrow', select).bind('mouseover mouseout', function() {
            $(this).toggleClass('active');
        });
        $('.drop_down DIV', select).click(function() {
        	//var select = $(this).parents('DIV.select');
            $('.active_item',select).text($(this).text());
            $('SELECT', select).val($(this).attr('value'));
            $('.drop_down DIV', select).removeClass('selected');
            $(this).addClass('selected');
            $('.drop_down', select).slideToggle(150);
        });
        $('.arrow, .active_item', select).click(function() {
        	if ($('.drop_down', select).css('display') != 'none')
        	{
        		$('.drop_down', select).slideUp(150);
        	}
			else
			{
				$('.drop_down', select).slideDown(150);
			}
		
        });
		$('.form_close').bind("mouseleave",function(){
		$('.drop_down', select).slideUp(150);
		});
    });
    
    // Beautiful TEXTAREA
    $('TEXTAREA.beauty').each(function() {
        var id = $(this).attr('id');
        var textarea = $('<div class="textarea"><table cellpadding="0" cellspacing="0" class="frame input"><tr><td class="frame_1"></td><td class="frame_2">&nbsp;</td><td class="frame_3"></td></tr><tr><td class="frame_4">&nbsp;</td><td class="frame_5"> \
                </td><td class="frame_6">&nbsp;</td></tr><tr><td class="frame_7"></td><td class="frame_8">&nbsp;</td><td class="frame_9"></td></tr></table> \
                <div class="scrollbar"><div class="up_bg"><div class="up"></div></div><div class="line">&nbsp;<div class="pimp"></div></div><div class="up_bg"><div class="down"></div></div></div></div>').insertAfter(this);
        $(this).prependTo($('.frame_5', textarea));

        if (id !== '')
        {
            $(textarea).attr('id', id);
        }
        $(textarea).addClass($(this).attr('class'));
        $(textarea).removeClass('beauty');
        $(this).removeClass();
        $(this).removeAttr('id');
        
        $('.scrollbar .pimp', textarea).draggable({
            axis: 'y',
            containment: 'parent',
            drag: function(event, ui) {
                //alert(ui.position.top);
                var textarea = $(this).parents('.textarea').get(0);
                //alert(textarea.barHeight);
                if (textarea.totalHeight > textarea.withoutScrollHeight)
                {
                    textarea.offset = (textarea.totalHeight - textarea.withoutScrollHeight)/(textarea.barHeight - 19) * ui.position.top;
                    $('TEXTAREA', textarea).get(0).scrollTop = textarea.offset;
                }
            }
            });
        $('.up', textarea).click(function() {
            textarea_up($(this).parents('.textarea').get(0));
        });
        $('.down', textarea).click(function() {
            textarea_down($(this).parents('.textarea').get(0));
        });
        $(this).bind('change focus blur mousewheel DOMMouseScroll scroll keypress change', function() {
            textarea_rebuild($(this).parents('.textarea').get(0));
        });
        
        textarea_rebuild($(textarea).get(0));
    });
        
    function textarea_rebuild(textarea) {
        var handler = $('TEXTAREA', textarea).get(0);
        
        textarea.offset              = handler.scrollTop;
        textarea.withoutScrollHeight = handler.clientHeight;
        textarea.totalHeight         = handler.scrollHeight;
        textarea.barHeight           = $(textarea).height() - 46
        
        $('.line', textarea).height(textarea.barHeight);
        
        if (textarea.totalHeight <= textarea.withoutScrollHeight) {
            $('.line .pimp', textarea).css('top', '0').draggable('disable');
        } else {
            $('.line .pimp', textarea).css('top', textarea.offset * (textarea.barHeight - 19) / (textarea.totalHeight - textarea.withoutScrollHeight)).draggable('enable');
        }
    }
    
    function textarea_up(textarea) {
        if (textarea.totalHeight > textarea.withoutScrollHeight)
        {
            var step = (textarea.totalHeight - textarea.withoutScrollHeight)/10;
            textarea.offset = textarea.offset - step;
            if (textarea.offset < 0)
            {
                textarea.offset = 0;
            }
            $('TEXTAREA', textarea).get(0).scrollTop = textarea.offset;
            textarea_rebuild(textarea)
        }
    }
    
    function textarea_down(textarea) {
        if (textarea.totalHeight > textarea.withoutScrollHeight)
        {
            var step = (textarea.totalHeight - textarea.withoutScrollHeight)/10;
            textarea.offset = textarea.offset + step;
            if ((textarea.offset + textarea.withoutScrollHeight) > textarea.totalHeight)
            {
                textarea.offset = textarea.totalHeight - textarea.withoutScrollHeight;
            }
            $('TEXTAREA', textarea).get(0).scrollTop = textarea.offset;
            textarea_rebuild(textarea)
        }
    }
    
    // Beautiful INPUT :text
    $('INPUT:text.beauty').each(function() {
        var input = $('<div class="input_text"><table cellpadding="0" cellspacing="0" class="frame input"><tr><td class="frame_10"></td><td class="frame_11"></td><td class="frame_12"></td></tr></table>').insertAfter(this);
        $(this).appendTo($('.frame_11', input));

        var id = $(this).attr('id');
        if (id !== '')
        {
            $(input).attr('id', id);
        }
        $(input).addClass($(this).attr('class'));
        $(input).removeClass('beauty');
        $(this).removeClass();
        $(this).removeAttr('id');
    });
    
    // Beautiful INPUT :submit
    $('INPUT:submit.beauty').each(function() {
    	$(this).addClass('input_submit');
		
    });
    // Beautiful INPUT :reset
    $('INPUT:reset.beauty').each(function() {
    	$(this).addClass('input_reset');
    });
});