/*
  select box
  .select_box_wrap {position:relative;clear:both;}
  .select_box_wrap * {vertical-align:middle;margin:0;padding:0;font-size:12px;}
  .select_box_wrap .select_com {height:18px; line-height:100%; border:1px solid #DCDCDC; color:#9D9D9D}
  .select_box_wrap .select_com span {vertical-align:middle;}
  .select_box_wrap .select_com img {border:0px;}
  .select_box_wrap .select_com .text_tit {float:left;padding:3px 0 0 2px;}
  .select_box_wrap .select_com .btn {height:18px;width:18px;float:right;background:url("http://festivals.cs21.kr/image/img/select_arr.gif") no-repeat left top}
  .select_box_wrap .select_com .btnover {background-position:0 -18px;}
  .select_box_wrap .boxover {border:1px solid #D01C35}
  .select_box_wrap .select_list {position:absolute;top:20px; left:0; border-left:1px solid #DCDCDC; border-right:1px solid #DCDCDC; background:#f5f5f5; z-index:2;}
  .select_box_wrap .select_list div {padding:2px 0; border-bottom:1px solid #DCDCDC; font-size:11px; padding-left:5px;}

  .select_box_wrap .select_list a,.select_list a:visited {text-decoration:none;color:#949494;}
  .select_box_wrap .select_list a:hover {color:#D01C35; cursor:pointer;}

  <div class="select_box_wrap">
    <div class="select_com">
    	<span class="text_tit">전체분류</span>
    	<span class="btn"><a href="#"></a></span>
    </div>
    <div class="select_list">
      <div><a href="#">sdfs</a></div>
      <div><a href="#">sdfs</a></div>
      <div><a href="#">sdfs</a></div>
      <div><a href="#">sdfs</a></div>
      <div><a href="#">sdfs</a></div>
    </div>
  </div>
*/
(function($) {
  // Component
  jQuery.cssDropDown = function(zEle, zConfig) {
    var _this = this;

    _this.container = zEle;
    _this.$container = $(zEle);
    _this.config  = $.extend(false, $.cssDropDown.config, zConfig);
    _this.warp    = $.extend(false, $.cssDropDown.config.warp, _this.config.warp);
    _this.action  = $.extend(false, $.cssDropDown.config.action, _this.config.action);

    _this.$container.data("cssDropDown", _this);

    _this.warp.boxWarp        = $('<div class="select_box_wrap" id="' + _this.$container.attr("id") + '_cssDropDown" ></div>').insertAfter(_this.$container);
    _this.warp.TextSourceWarp = $('<div class="select_com" id="' + _this.$container.attr("id") + '_TextWrap_cssDropDown"></div>').appendTo(_this.warp.boxWarp);
    _this.warp.ListWarp       = $('<div class="select_list hidden"></div>').appendTo(_this.warp.boxWarp);

    _this.warp.TextWarp       = $('<div class="text_tit"><span>' + _this.$container.find("option:selected").text() + '</span></div>').appendTo(_this.warp.TextSourceWarp);
    _this.warp.TextButtonWarp = $('<div class="btn"><a href="#"></a></div>').appendTo(_this.warp.TextSourceWarp);

    _this.warp.boxWarp.css("width", _this.$container.width() + 5 + "px");
    _this.warp.ListWarp.css("width", _this.$container.width() + 3 + "px");
    _this.warp.SourceWarp = (_this.$container).wrap('<div class="hidden"></div>');


    _this.warp.ListItem = [];
    var objList = _this.$container.find("*");
    for (var i=0;i<objList.length;i++) {
      _this.warp.ListItem.push( $('<div value="' + $(objList[i]).val() + '"><a href="#">' + $(objList[i]).text() + '</a></div>') );
      _this.warp.ListItem[ _this.warp.ListItem.length - 1 ].click(function() {
        $this = $(this);

        _this.warp.TextWarp.children("span").text( $this.text() );

        _this.$container.find("option[value=" + $this.attr("value") + "]").attr("selected", "true");

        _this.warp.TextSourceWarp.removeClass("boxover");
        _this.warp.TextSourceWarp.find("div.btn").removeClass("btnover");
        _this.warp.TextSourceWarp.next().addClass("hidden");

        _this.action.isOver = false;
        _this.action.isDelay = false;

        if (_this.config.callback.onSelect) _this.config.callback.onSelect(_this.container, _this.$container);

        return false;
      });

      _this.warp.ListItem[ _this.warp.ListItem.length - 1 ].appendTo( _this.warp.ListWarp );
    };


    _this.warp.TextSourceWarp.hover(fnOver, fnOut);
    _this.warp.ListWarp.hover(fnOver, fnOut);

    function fnOver() {
      $this = _this.warp.TextSourceWarp;
      _this.action.isOver = true;

      $this.addClass("boxover");
      $this.find("div.btn").addClass("btnover");
    };

    function fnOut() {
      $this = _this.warp.TextSourceWarp;
      _this.action.isOver = false;

      if (_this.action.isDelay) return false;

      _this.action.isDelay = true;
      $this.delay(300).queue(function() {
        $this = $(this);
        _this.action.isDelay = false;

        if (_this.action.isOver) {
          $this.dequeue();
          return false;
        }
        $this.removeClass("boxover");
        $this.find("div.btn").removeClass("btnover");
        $this.next().addClass("hidden");

    	  $this.dequeue();
      });
    };

    $(_this.warp.TextSourceWarp).click(function() {
      $(this).parents("div.select_box_wrap").children("div.select_list").removeClass("hidden");
    });

  }

  // Config
  jQuery.cssDropDown.config = {
    action : {
      isOver : false,
      isDelay : false
    },
    warp : {
      SourceWarp : "",
      boxWarp : "",
      TextSourceWarp : "",
      TextWarp   : "",
      TextButtonWarp : "",
      ListWarp : ""
    },
    selected : "",
    callback : {
      onSelect : function() {} // function(Element, $Element)
    }
  }

  // component jQuery init
  jQuery.fn.cssDropDown = function(zOptions) {
		return this.each(function() {
      var isInit = true;
      if (!jQuery.ctSoft.isInit(this)) {
        jQuery.ctSoft.init(this);
        isInit = false;
      }

		  if (!this.id) this.id = UniqueString();

      if (!isInit) (new jQuery.cssDropDown( this, zOptions ));
		});
  };

})(jQuery);