JQuery Plugin - Context Div

/**

 * Context2 jQuery Plug-in

 * @author leeejong@neowiz.com

 */

(function( $ ){

  //divContainer는 Array로, 각 level별 jQuery Div 객체들을 담아둔다.

  //이 변수는 클로저와 함께 유지된다.

  var divContainer = [];

  $.fn.context2 = function( options ){

    //옵션 Default를 설정해준다. 유저는 Data, 최대길이, 사용될 함수를 옵션으로 사용할 수 있다.

    var options = $.extend({ contextData:[], maxHeight:100, usrFn:function(){}  },options);

    var contextData = options.contextData;

    var maxHeight = options.maxHeight;

    var usrFn = options.usrFn;

    //플러그인 요소 가 아닌 다른영역(document)이 클릭되었을때 divContainer가 담고있는 모든 div들을 지워준다.

    $(document).on('click', function(){

      for( var i in divContainer )

        divContainer[i].remove();

    });

    //플러그인이 클릭되면 drawContext를 호출한다.

    return this.on( "click", function(e){

      drawContext.call( this, 0, contextData );

      return false;

    });

    //drawContext

    function drawContext( level, nodeData ){

      var $this = $(this),

          $body = $('BODY');

      var styles = {

        overflow : "auto",

        position : "absolute",

        border : "2px outset white",

        minwidth : "160px",

        liststyletype : "none",

        backgroundColor : "lightgray",

        width : "100px",

        maxHeight : options.maxHeight +"px"

      };

      var $div = $('<div />').css( styles ).appendTo( $body ),

          $ul  = $('<ul />').appendTo( $div );

      //클릭이벤트가 발생했으므로 현재레벨 및 하위레벨의 div들은 모두 삭제해준다.

      for( var i=level; i<divContainer.length; i++ )

        divContainer[i].remove();

      //그리고 방금 생성한 div를 현재level에 추가해준다.

      divContainer[level] = $div;

      //위치선정 알고리즘

      var offset     = $this.offset(),

          left       = offset.left + (level ? $this.outerWidth() : 0),

          top        = offset.top + (!level ? $this.outerHeight() : 0),

          bodyWidth  = $body.width() + $body.scrollLeft(),

          bodyHeight = $body.height() + $body.scrollTop();

      if( level && ($this.width() + left) > bodyWidth )

        left = offset.left - $this.width();

      $div.css({

        left: left,

        top: top

      });

      nodeData.forEach( function(child){

        var $child = $('<li style="font-family:consolas; font-size: 10px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(212, 212, 212); text-align: left; margin: 0px; padding: 4px 10px 4px 4px; height: auto; float: none;" />')

                       .appendTo( $ul );

        if(child.children === undefined){

          $child.text(child.text).click( function(e) {

            usrFn(child);

            return false;

          });

        }

        else{

          $child.text(child.text+' ★').click( function(e){

            drawContext.call( this, level+1, child.children );

            return false;

          });

        }

      });

    }

  }

}( jQuery ));