;(function($){

  var classes = { panel: 'or-popup-panel', itemselect: 'or-popup-select' };

  $.fn.popupSelector = function(settings){
  
    var options = $.extend({}, $.fn.popupSelector.defaultOptions, settings);
    
    var elem = $(this);
    var panel = createPopup(); //create popup panel
    
    $.get(options.sourceUrl, {}, function(data,status){
      console.log(status);
      $.each(data, function(i, val){
        var item = $("<div></div>")
            .css('width', '100%')
            .click(function(){ 
                options.onItemSelected(item, val[options.objectName]); 
                hide.apply(item, [panel]);
             })
             .mouseover(function(){
                item.css('background', "#ccc");
             })
             .mouseout(function(){
                item.css('background', 'transparent');
             })
            .text(val[options.objectName].name); 
            
        panel.find('.' + classes.itemselect).append(item);
      });
      
    }, options.dataType);
    
    panel
      .css('background', '#fff')
      .css('color', '#000')
      .css('border', 'solid thin black')
      .css('position', 'absolute')
      .css('z-index', '5')
      .hide()
      .insertAfter(this);
    
    $(this).toggle(function(){ show.apply(elem, [panel]); }, function(){ hide(panel); });
    
  };
  
  function show(panel){
    
    console.log($(this).offset().top + ' ' + $(this).offset().left + ' -- ' + $(this).outerHeight());
    
    $(panel)
      .css('min-width', '100px')
      .css('min-height', '10px')
      .css('top', $(this).position().top + $(this).outerHeight())
      .css('left', $(this).position().left - panel.width() + $(this).width())
      .slideDown();
  }
  
  function hide(panel){
    $(panel).slideUp();
  }
  
  function createPopup() {
    var panel = $("<div></div>").addClass(classes.panel);
    
    panel.append( $("<div></div>").addClass(classes.itemselect) );
    return panel;
  }
  
  $.fn.popupSelector.defaultOptions = 
  {
    dataType: 'json',
    sourceUrl: "/",
    objectName: "",
    onItemSelected: function(selectedItem, jsonData)
    {
      console.log(jsonData);
      alert(selectedItem);
    }
  };
  
})(jQuery);