$(function(){

    checkbox_area();
    select_area();
    radio_area();

});

function radio_area()
{
    $('div.radio_area').click(function(){
        var input = $(this).find('input');
        input.attr('checked', 'checked');

        $('div.radio_area input[name="'+input.attr('name')+'"]').each(function(){
            $(this).parent().removeClass('checked');
        });

        $(this).addClass('checked');
    });

    $('div.radio_area.checked').each(function(){
        $(this).find('input').attr('checked', 'checked');
    });
}

function checkbox_area()
{
    $('div.checkbox_area').click(function(){
        var input = $(this).find('input');
        if( input.attr('checked') )
        {
            $(this).removeClass('checked').find('input').removeAttr('checked');
        }
        else
        {
            $(this).addClass('checked').find('input').attr('checked', 'checked');
        }
    });

    $('div.checkbox_area.checked').each(function(){
        $(this).find('input').attr('checked', 'checked');
    });
}

function select_area()
{
    $('div.select_area').each(function(){
        var current = $(this).find('ul li.checked');
        var select_value = $(this).find('div.select_value');
        var option_value = $(this).find('select option:first');

        var value = current.attr('value');
        var text = current.text();

        if(!text)
        {
            var first_li = $(this).find('ul li:first');
            text = first_li.text();
            value = first_li.attr('value');
            first_li.addClass('color');
        }
        else
        {
            current.addClass('color');
        }

        select_value.text(text);

        option_value.text(text);
        option_value.val(value);

    });


    var selectHandler = function(){
        var select_area = $(this).parent().parent();
        select_area.find('ul li.checked').removeClass('checked');
        $(this).addClass('checked').addClass('color');

        var current = select_area.find('ul li.checked');
        var select_value = select_area.find('div.select_value');
        var option_value = select_area.find('select option:first');

        var value = current.attr('value');
        var text = current.text();

        if(!text)
        {
            text = $(this).find('ul li:first').text();
            value = $(this).find('ul li:first').val();
        }

        select_value.text(text);
        select_value.attr('val', value);

        option_value.text(text);
        option_value.val(value);

        select_area.find('ul').hide();

        select_value.bind('click', ULOpenHandler).unbind('click', ULCloseHandler);

    };

    var ULOpenHandler = function(){
        $(this).next('ul').show();
        $(this).bind('click', ULCloseHandler);
        $(this).unbind('click', ULOpenHandler);
    };

    var ULCloseHandler = function(){
        $(this).next('ul').hide();
        $(this).bind('click', ULOpenHandler);
        $(this).unbind('click', ULCloseHandler);
    };

    $('div.select_value').bind('click', ULOpenHandler);

    $('div.select_area').mouseleave(function(){
        $(this).find('ul').slideUp('fast');
        $(this).find('div.select_value').bind('click', ULOpenHandler).unbind('click', ULCloseHandler);
    });

    $('div.select_area ul li').click(selectHandler);


    $('div.select_area ul li').mouseenter(function(){
        $(this).parent().find('.color').removeClass('color');
    });
}