/*

CUSTOM FORM ELEMENTS

The only thing you need to change in this file is the following
variables: checkboxHeight, radioHeight and selectWidth.

Replace the first two numbers with the height of the checkbox and
radio button. The actual height of both the checkbox and radio
images should be 4 times the height of these two variables. The
selectWidth value should be the width of your select list image.

You may need to adjust your images a bit if there is a slight
vertical movement during the different stages of the button
activation.

*/

var checkboxHeight = "25";
var radioHeight = "25";
var selectWidth = "125";
var selectWidth2 = "70";
var selectWidth3 = "83";
var selectWidth4 = "50";

var selectWidth50 = "50";
var selectWidth60 = "60";
var selectWidth70 = "70";
var selectWidth80 = "80";
var selectWidth83 = "83";
var selectWidth125 = "125";
var selectWidth170 = "170";
var selectWidth210 = "210";
var selectWidth230 = "230";
var selectWidth263 = "263";

/* No need to change anything after this */

document.write('<style type="text/css">input.drop-down { display: none; } select.drop-down { position: relative; width: ' + selectWidth + 'px; opacity: 0; z-index: 5; }</style>');
document.write('<style type="text/css">input.drop-down-2 { display: none; } select.drop-down-2 { position: relative; width: ' + selectWidth2 + 'px; opacity: 0; z-index: 5; }</style>');
document.write('<style type="text/css">input.drop-down-3 { display: none; } select.drop-down-3 { position: relative; width: ' + selectWidth3 + 'px; opacity: 0; z-index: 5; }</style>');
document.write('<style type="text/css">input.drop-down-4 { display: none; } select.drop-down-4 { position: relative; width: ' + selectWidth4 + 'px; opacity: 0; z-index: 5; }</style>');

document.write('<style type="text/css">select.drop-down-50 { position: relative; width: ' + selectWidth50 + 'px; opacity: 0; z-index: 5; }</style>');
document.write('<style type="text/css">select.drop-down-60 { position: relative; width: ' + selectWidth60 + 'px; opacity: 0; z-index: 5; }</style>');
document.write('<style type="text/css">select.drop-down-70 { position: relative; width: ' + selectWidth70 + 'px; opacity: 0; z-index: 5; }</style>');
document.write('<style type="text/css">select.drop-down-80 { position: relative; width: ' + selectWidth80 + 'px; opacity: 0; z-index: 5; }</style>');
document.write('<style type="text/css">select.drop-down-83 { position: relative; width: ' + selectWidth83 + 'px; opacity: 0; z-index: 5; }</style>');
document.write('<style type="text/css">select.drop-down-125 { position: relative; width: ' + selectWidth125 + 'px; opacity: 0; z-index: 5; }</style>');
document.write('<style type="text/css">select.drop-down-170 { position: relative; width: ' + selectWidth170 + 'px; opacity: 0; z-index: 5; }</style>');
document.write('<style type="text/css">select.drop-down-210 { position: relative; width: ' + selectWidth210 + 'px; opacity: 0; z-index: 5; }</style>');
document.write('<style type="text/css">select.drop-down-230 { position: relative; width: ' + selectWidth230 + 'px; opacity: 0; z-index: 5; }</style>');
document.write('<style type="text/css">select.drop-down-263 { position: relative; width: ' + selectWidth263 + 'px; opacity: 0; z-index: 5; }</style>');


var Custom = {
    classes: {
        select: [
            'drop-down',
            'drop-down-2',
            'drop-down-3',
            'drop-down-4',
            'drop-down-50',
            'drop-down-60',
            'drop-down-70',
            'drop-down-80',
            'drop-down-83',
            'drop-down-125',
            'drop-down-170',
            'drop-down-210',
            'drop-down-230',
            'drop-down-263'
        ]
    },
	init: function() {
        $('select').each(function()
        {
            var self = $(this);
            if ($.inArray(self.attr('class'), Custom.classes.select) > -1)
            {
                if (self.data('init') === 'init')
                {
                    return true;
                }

                /**
                 * Assign a random ID if none given
                 */
                if (!self.attr('id'))
                {
                    self.attr('id', 'custom-select-' + Math.floor(Math.random() * 1000000));
                }

                $('<span></span>')
                    .addClass('select')
                    .addClass(self.attr('class'))
                    .attr('id', 'select' + self.attr('id'))
                    .text(self.find(':selected').text())
                    .insertBefore(self);

                self.css('opacity', 0)
                    .data('init', 'init')
                    .change(function(e)
                    {
                        Custom.choose(self);
                    });
            }
            return true;
        });
	},
	choose: function($el)
	{
        $('#select' + $el.attr('id')).text(
            $el.find(':selected').text()
        );
	}
};