/*

   Copyright (c) 2011 Koen Ekelschot

   ---

   Version 1.0.1 - Jan. 30, 2011

   A jQuery plugin which replaces <select> elements with a fancy dropdown menu

   Usage:

   - $jq(selector).fancyDropdown(); //returns jQuery chainable object
   
   Prerequisites:
   
   - jQuery hasEventListener plugin by sebastien-p: https://github.com/sebastien-p/jquery.hasEventListener

*/

(function($jq) {
    $jq.fn.fancyDropdown = function() {
        return this.each(function() {
            var style="";
            var el = $jq(this);
            var id = $jq(this).attr('id');
            var width=$jq(this).css('width');
            if (width==null) {width="100px"}
            el.hide();
            //create needed HTML
            var html = '<div class="dropdown" style="width:'+width+'" id="'+id+'_dropdown"></div><ul class="dropdownlist" id="'+id+'_dropdownlist" style="width:'+width+'">';
            $jq('option', el).each(function() {
                var realvalue = $jq(this).attr("value");
                var img = $jq(this).attr("data-img");
                if (img==null||img.length==0) {img="/images/transparent.gif"; style="style='height:16px; width:16px'"}
                var info = $jq(this).attr("data-info");
                if (info == null) {
                    html += '<li data-realvalue="'+realvalue+'"><div class="imgholder"><img src="'+img+'" "+style+"/></div><p class="no-info"><strong>'+$jq(this).text()+'</strong></p><div class="clearfix"></div>';
                } else {
                    html += '<li data-realvalue="'+realvalue+'"><div class="imgholder"><img src="'+img+'" "+style+"/></div><p><strong>'+$jq(this).text()+'</strong><br />'+info+'</p><div class="clearfix"></div>';
                }
            });
            html += '</ul>';
            el.after(html);
            //set initial values
            var initoption = $jq('li[data-realvalue="'+el.val()+'"]', $jq('#'+id+'_dropdownlist'));
            initoption.attr('class', 'active');
            $jq('#'+id+'_dropdown').attr('data-realvalue', initoption.attr('data-realvalue')).html(initoption.html());
            //bind click event
            if ($jq('body').hasEventListener("click.customdropdown").length == 0) {
                //bind the click event only once
                $jq('body').bind('click.customdropdown', function(e) {
                    var elements = $jq(e.target).parents().andSelf();
                    var dropdown = elements.filter('.dropdown');
                    var dropdownlist = elements.filter('.dropdownlist');
                    if (dropdown.length == 0 && dropdownlist.length == 0) {
                        //not clicked on .dropdown or .dropdownlist, hide .dropdownlist
                        $jq(".dropdownlist").fadeOut('fast');
                        $jq(".dropdown").removeClass('active_dropdown');
                    } else {
                        if (dropdown.length != 0) {
                            //clicked on .dropdown
                            var dropdownid = $jq(dropdown[0]).attr('id');
                            if ($jq("#"+dropdownid).hasClass('active_dropdown')) {
                                //close all .dropdownlist
                                $jq(".dropdownlist").fadeOut('fast');
                                $jq(".dropdown").removeClass('active_dropdown');
                            } else {
                                //close all .dropdownlist
                                $jq(".dropdownlist").fadeOut('fast');
                                $jq(".dropdown").removeClass('active_dropdown');
                                //and open the clicked one
                                $jq("#"+dropdownid).addClass('active_dropdown');
                                $jq("#"+dropdownid+"list li.active").addClass('hover').siblings().removeClass('hover');
                                var pos = $jq(dropdown[0]).position();
                                //alert(pos.top+"\n"+$jq(dropdown[0]).outerHeight()+"\n")
                                $jq("#"+dropdownid+"list").css("top",(pos.top+$jq(dropdown[0]).outerHeight())+'px');
                                $jq("#"+dropdownid+"list").css("left", pos.left+'px');
                                $jq("#"+dropdownid+"list").slideDown(150);
                            }
                        } else {
                            //clicked on .dropdownlist
                            var dropdownid = $jq(dropdownlist[0]).attr('id').slice(0, -4);
                            var li = $jq(elements.filter('li')[0]);
                            $jq('#'+dropdownid).removeClass('active_dropdown').attr('data-realvalue', li.attr('data-realvalue')).html(li.html());
                            li.addClass('active').siblings().removeClass('active');
                            $jq(dropdownlist[0]).fadeOut('fast');
                            //reflect change to original <select> element
                            $jq("#"+dropdownid.slice(0, -9)).val(li.attr('data-realvalue'));
                        }
                    }
                });
            }
            //add hover states
            $jq(".dropdownlist li").live('mouseover', function() {
                $jq(this).addClass("hover").siblings().removeClass("hover");
            });
            $jq(".dropdown").live('mouseover', function() {
                $jq(this).addClass('hover_dropdown');
            }).live('mouseout', function() {
                $jq(this).removeClass('hover_dropdown');
            });
        });
    };
})(jQuery);