/*
* jQuery ZD cities bar
* 
* Depends:
*  jquery.ui.widget.js
*/
;(function($, undefined){
    
    var NAME = 'citiesbar',
        C = '-' + NAME,
        C_WRAPPER = C + '-wrapper',
        C_MESSAGE = C + '-message',
        C_OVERLAY = C + '-overlay',
        C_NOSHADOW = C + '-noshadow';


    $.widget('zd.' + NAME, {

        options: {
            message: "Find Doctors and Make Appointments in",
            host: null
        },

        _create: function() {
        
            var self = this,
                $el = self.element;

            self.$wrapper = $('<div />');

            self.$message = $('<span>' + self.options.message + '</span>');
            self.$message
                .addClass(C_MESSAGE);

            self.$wrapper
                .addClass(C_WRAPPER)
                .append(self.$message)

            if( self.options.host ) 
            {
                self._makedrop(self.$wrapper);
            } 
            
            $el
                .addClass(C)
                .append(self.$wrapper);

            if( !self.options.host ) 
            {
                $el.find("ul")
                   .removeClass('city-set')
                   .appendTo(self.$wrapper)
                   .droplist();
            }

            if (Modernizr && !Modernizr.textshadow)
            {
                self.$overlay = $('<div class="' + C_OVERLAY + '">' + self.options.message + '</div>');

                self.$message
                    .addClass(C_NOSHADOW)
                    .prepend(self.$overlay)
                    ;
            }

        },

        _makedrop: function($dropContainer) {

            var self = this,
                $el = self.element,
                $ul = $('<ul />');

            $.getJSON(self.options.host + "/remote/LaunchedCitiesList.ashx?callback=?", function(msg) {
                    var data = msg.d;
                    for (var i in data) {
                        var city = data[i];
                        var $li = $('<li><a href="' + city.Url + '">' + city.Name + "</a></li>");
                        if( city.IsClosest ) 
                        {
                            $ul.prepend($li);
                        }
                        else
                        {
                            $ul.append($li);
                        }
                    }
                    $dropContainer.append($ul);
                    $ul.droplist();
                }
            );

            return;
        }
    });

})(jQuery);