(function($, undefined) {

  $.fn.monthpicker = function(options) {

    var months = options.months || ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],

      monthpicker = function(el) {
        this._el = $(el);
        this._init();
        this._render();
        this._renderyears();
        this._rendermonths();
        this._bind();
      };

    monthpicker.prototype = {
      destroy: function() {
        this._el.off('click');
        this._yearsselect.off('click');
        this._container.off('click');
        $(document).off('click', $.proxy(this._hide, this));
        this._container.remove();
      },

      _init: function() {
        this._el.html(options.years[0]+'-'+months[0]);
        this._el.data('monthpicker', this);
      },

      _bind: function() {
        this._el.on('click', $.proxy(this._show, this));
        $(document).on('click', $.proxy(this._hide, this));
        this._yearsselect.on('click', function(e) { e.stoppropagation(); });
        this._container.on('click', 'button', $.proxy(this._selectmonth, this));
      },

      _show: function(e) {
        e.preventdefault();
        e.stoppropagation();
        this._container.css('display', 'inline-block');
      },

      _hide: function() {
        this._container.css('display', 'none');
      },

      _selectmonth: function(e) {
        var monthindex = $(e.target).data('value'),
          month = months[monthindex],
          year = this._yearsselect.val();
		  if(this._el.attr('type')=="text"){
			  this._el.attr("value",year+'-'+month);
		  }else{
			  this._el.html(year+'-'+month);
		  }
       
        if (options.onmonthselect) {
          options.onmonthselect(monthindex, year);
        }
      },

      _render: function() {
        var linkposition = this._el.position(),
          cssoptions = {
            display:  'none',
            position: 'absolute',
            top:      linkposition.top + this._el.height() + (options.topoffset || 0),
            left:     linkposition.left
          };
        this._id = (new date).valueof();
        this._container = $('<div class="monthpicker" id="monthpicker-' + this._id +'">')
          .css(cssoptions)
          .appendto($('body'));
      },

      _renderyears: function() {
        var markup = $.map(options.years, function(year) {
          return '<option>' + year + '</option>';
        });
        var yearswrap     = $('<div class="years">').appendto(this._container);
        this._yearsselect = $('<select>').html(markup.join('')).appendto(yearswrap);
      },

      _rendermonths: function() {
        var markup = ['<table>', '<tr>'];
        $.each(months, function(i, month) {
          if (i > 0 && i % 4 === 0) {
            markup.push('</tr>');
            markup.push('<tr>');
          }
          markup.push('<td><button data-value="' + i + '">' + month +'</button></td>');
        });
        markup.push('</tr>');
        markup.push('</table>');
        this._container.append(markup.join(''));
      }
    };

    var methods = {
      destroy: function() {
        var monthpicker = this.data('monthpicker');
        if (monthpicker) monthpicker.destroy();
        return this;
      }
    }

    if ( methods[options] ) {
        return methods[ options ].apply( this, array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof options === 'object' || ! options ) {
      return this.each(function() {
        return new monthpicker(this);
      });
    } else {
      $.error( 'method ' +  options + ' does not exist on monthpicker' );
    }

  };

}(jquery));