// http://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/

function DropDown(el) {
    this.dd = el;
    this.placeholder = this.dd.children('span');
    this.opts = this.dd.find('ul.dropdown > li');
    this.val = '';
    this.index = -1;
    this.initEvents();
}
DropDown.prototype = {
    initEvents : function() {
        var obj = this;

        obj.dd.on('click', function(event){
            $(this).toggleClass('active');
            return false;
        });

        obj.opts.on('click',function(){
            var opt = $(this);
            obj.val = opt.text();
            obj.index = opt.index();
            obj.placeholder.text(obj.val);
            obj.placeholder.css('background-color', opt.find('div').css('background-color'));
			//if(jQuery().color)
            obj.placeholder.css('background-color', $.Color(obj.placeholder, 'background-color').saturation(.59).toRgbaString());
			obj.dd.css('background-color', $.Color(obj.placeholder, 'background-color').alpha(0.6).toRgbaString());
        });
    },
    getValue : function() {
        return this.val;
    },
    getIndex : function() {
        return this.index;
    }
}

function loadDropdowns() {
	$('.wrapper-dropdown').each(function(){ new DropDown(jQuery(this)); });

	$(document).click(function() {
		// clear all dropdowns
		$('.wrapper-dropdown').removeClass('active');
	});
}

// does not work....
//$(document).ready(function() {loadDropdowns();});
