/* $Id: jquery.popup.js 67 2008-01-22 08:54:37Z Bolik@xjgc.com $ */

(function($) {
  function Popup(el,codeInput, data,fn) {
    this.input = $(el);
    this.data = data;
    this.codeInput = $(codeInput);
    this.input.attr("readonly", "readonly");
    if(fn)
    {
    	this.otherDeal = fn;
    }
    this.bindMethodsToObj("show", "hide", "hideIfClickOutside", "selectItem");
    this.build();
    //this.selectItem();
    this.hide();
  };
  
  function target(event) {
		var element = event.target;
		while(element && element.tagName != "LI")
			element = element.parentNode;
		// more fun with IE, sometimes event.target is empty, just ignore it then
		if(!element)
			return [];
		return element;
  }//end target

  Popup.prototype = {
    build: function() {
      this.ClearController = $('<a href="#">清除</a>').click(this.bindToObj(function(event) {
        this.input.val("");
        this.codeInput.val("");
        this.hide();
        return false;
      })); 
      var controlContent = $("<table class='controloptable'><tr><td class='tdtitle'>请选择</td><td class='tdopbutton'></td></tr></table>");
      controlContent.find(".tdopbutton").append(this.ClearController);
      this.popupController = $('<div class="popupController"></div>').append(controlContent);
      //处理选项
      var list = $("<ul/>").addClass("popupul");
      list.mouseover( function(event) {
			if(target(event).nodeName && target(event).nodeName.toUpperCase() == 'LI') {
	            active = $("li", list).removeClass("ac_over_pop").index(target(event));
			    $(target(event)).addClass("ac_over_pop");            
	        }
		}).click(function(event) {
			$(target(event)).addClass("ac_over_pop");
	  		var selectedData = $.data($(target(event))[0], "ac_data");
	  		var inputItem = $.data($(target(event))[0], "input");
	  		var codeInputItem = $.data($(target(event))[0], "codeInput");
	  		$(inputItem).val(selectedData.city);
	  		$(codeInputItem).val(selectedData.code);
	  		$.data($(target(event))[0], "showPanel").hide();
	  		$.data($(target(event))[0], "showPanel").otherDeal();
		});
      for (var i=0; i < this.data.length; i++) {
			if (!this.data[i])
				continue;
			//创建一个li项，放至到ul下
			var li = $("<li/>").html(this.data[i].city).addClass(i%2 == 0 ? "ac_even" : "ac_odd").appendTo(list)[0];
			$.data(li, "ac_data", this.data[i]);//在li上绑定数据
			$.data(li, "input", this.input);//在li上绑定数据
			$.data(li, "codeInput", this.codeInput);//在li上绑定数据
			$.data(li, "showPanel", this);//在li上绑定数据
		}
      this.popupContent = $('<div class="popupContent"></div>').append(list); 
     
      this.popupPanel = this.rootLayers = $('<div class="popupPanel"></div>')
        .css({ display: "none", position: "absolute", zIndex: 100 })
        .append(this.popupController, this.popupContent)
        .appendTo(document.body);
      
      if ($.browser.msie && $.browser.version < 7) {
        this.ieframe = $('<iframe class="popupPanel_ieframe" frameborder="0" src="#"></iframe>')
          .css({ position: "absolute", display: "none", zIndex: 99 })
          .insertBefore(this.popupPanel);
        this.rootLayers = this.rootLayers.add(this.ieframe);
      };
      
//      $("a", this.popupContent).click(this.bindToObj(function(event) {
//        this.selectItem($(event.target).attr("id"), $(event.target).attr("innerHTML"));
//        this.hide();
//        return false;
//      }));

      //this.input.change(this.bindToObj(function() { this.selectItem(); }));
    }, 
    otherDeal:function()
    {
    },
    show: function() {
      this.setPosition();
      this.rootLayers.css("display", "block");
      this.input.unbind("focus", this.show);
      $(document.body).click(this.hideIfClickOutside);
    },
    
    hide: function() {
      this.rootLayers.css("display", "none");
      $(document.body).unbind("click", this.hideIfClickOutside);
      this.input.focus(this.show);
    },
    
    hideIfClickOutside: function(event) {
      if (event.target != this.input[0] && !this.insideSelector(event)) {
        this.hide();
      };
    }, 
     
    setPosition: function() {
      var offset = this.input.offset();
      this.rootLayers.css({
        top: offset.top + this.input.outerHeight(),
        left: offset.left
      });
      
      if (this.ieframe) {
        this.ieframe.css({
          width: this.popupPanel.outerWidth(),
          height: this.popupPanel.outerHeight()
        });
      };
    },  
     
    insideSelector: function(event) {
      var offset = this.popupPanel.offset();
      offset.right = offset.left + this.popupPanel.outerWidth();
      offset.bottom = offset.top + this.popupPanel.outerHeight();
      
      return event.pageY < offset.bottom &&
             event.pageY > offset.top &&
             event.pageX < offset.right &&
             event.pageX > offset.left;
    },
    
    bindToObj: function(fn) {
      var self = this;
      return function() { return fn.apply(self, arguments) };
    },
    
    bindMethodsToObj: function() {
      for (var i = 0; i < arguments.length; i++) {
        this[arguments[i]] = this.bindToObj(this[arguments[i]]);
      };
    } 
    
  };

  $.fn.popup = function(codeInput,data,fn) {
    return this.each(function() { 
      new Popup(this,codeInput, data,fn); 
    });
  };
})(jQuery);