/**
 * virtualPlaceHolder
 *
 * @version : 1.0
 * @modified : 2014-03-31
 */
;

(function($) {

   $.fn.virtualPlaceHolder = function(options) {

      var $this = this,
         prefix = 'virtualPlaceHolder';


      // default Property
      var defaults = {
            addPlaceHolder: false,
            addPlaceHolderText: "",
            defaultAction: false, //placeholder属性を持つブラウザは既存機能を使用
            fucusRemove: false, //true
            removeTime: 25,
            fontColor: $this.css('color') || '#999',
            fontSize: $this.css('fontSize') || '100%',
            textAlign: $this.css('textAlign') || 'left',
            fontFamily: $this.css('fontFamily') || '',
            fucusFn : function() {},
            blurFn : function() {},
            loadedFn : function(){}
         },

         selecters = {
            wrapClass: prefix + 'Wrapper',
            targetClass: prefix + 'Text',
            showClass: prefix + 'Show',
            hideClass: prefix + 'Hide'
         },
         settings = $.extend(true, {}, defaults, options, selecters);


      //属性確認
      var supportsAttribute = function(attr, tag) {
         return attr in document.createElement(tag || 'div');
      };


      //属性確認
      var supportsPlaceHolder = function() {

         if (settings.defaultAction && (!$this.attr('placeholder') || supportsAttribute('placeholder', 'input'))) {
            return false;
         }

         return true;

      };

      //スタイル設定
      var inlineStyles = function(keyClass) {

         //if ( !((keyClass === settings.wrapClass) || (keyClass === settings.targetClass))) return;

         var iWidth = this.innerWidth(),
            iHeight = this.innerHeight();


         switch (keyClass) {

            //span.virtualPlaceHolderWrapper inline Style
            case settings.wrapClass:

               var styles = {
                  "textAlign": 'left',
                  "display": 'inline-block',
                  "position": 'relative'
               };

               break;

               //span.virtualPlaceHolderText inline Style
            case settings.targetClass:
                
               var left = parseInt(this.css('border-left-width') === "medium" ? "0" : this.css('border-left-width'), 10) + parseInt(this.css('padding-left'), 10),
                  top = parseInt(this.css('border-top-width') === "medium" ? "0" : this.css('border-top-width'), 10) + parseInt(this.css('padding-top'), 10) - parseInt(this.css('padding-bottom'), 10) ;

               var styles = {
                  "height": iHeight + 'px', //120%
                  "width": iWidth + 'px',
                  "textAlign": 'left',
                  "lineHeight": iHeight + 'px',
                  "overflow": 'hidden',
                  "position": 'absolute',
                  "wordWrap": 'break-word',
                  "wordBreak": 'break-all',
                  "left": (typeof parseInt(left) === 'number' ? parseInt(left, 10) : '0') + 'px',
                  "top": (typeof parseInt(top) === 'number' ? parseInt(top, 10) : '0') + 'px',
                  "zIndex": '99'
               };

               //console.log(styles);
               if (settings.fontFamily) styles["fontFamily"] = settings.fontFamily;
               if (settings.fontSize) styles["fontSize"] = settings.fontSize;
               if (settings.fontColor) styles["color"] = settings.fontColor;
               if (settings.lineHeight) styles["lineHeight"] = settings.lineHeight;

               break;


               //input Item
            default:

               var h = this.parent().innerHeight() - (parseInt(this.css('marginTop'), 10));

               var styles = {
                  "height": typeof h !== NaN ? h + "px" : "auto"
               };
               break;

         }

         return styles;

      };



      //キーを取得
      var keyCatch = (function() {

         if (document.all) {
            return function(e) {
               return e.keyCode;
            };

         } else if (document.getElementById) {
            return function(e) {
               return (e.keyCode) ? e.keyCode : e.charCode;
            };

         } else if (document.layers) {
            return function(e) {
               return e.which;
            };
         }
      })();



      //Fucus
      var fucusEvent = function(e) {

         if (!settings.fucusRemove) {

            if (this.value !== '') {
               $.data(this, 'target').removeClass(settings.showClass).addClass(settings.hideClass);
            }


         } else {
            $.data(this, 'target').removeClass(settings.showClass).addClass(settings.hideClass);
         }

         settings.fucusFn.call(this);
      };



      //Blur
      var blurEvent = function(e) {

         if (this.value === '') {
            $.data(this, 'target').removeClass(settings.hideClass).addClass(settings.showClass);
         }
         settings.blurFn.call(this);
      };



      //keyup
      var keyTimer,
         keyEvent = function(e) {
             
            var key = keyCatch(e);

            if (keyTimer) return;
    
            var self = this;
            keyTimer = setTimeout(function() {

               if (self.value !== '') {
                  $.data(self, 'target').removeClass(settings.showClass).addClass(settings.hideClass);

               } else {
                  $.data(self, 'target').removeClass(settings.hideClass).addClass(settings.showClass);
               }

               clearTimeout(keyTimer);
               keyTimer = null;

            }, settings.removeTime);
         };


      //setup
      var init = function() {

         var self = this,
            $self = $(this),
            $wrap,
            $target;


         //使用条件判定
         if (!supportsPlaceHolder) return false;

         if (settings.addPlaceHolder) {
            $self.attr('placeholder', settings.addPlaceHolderText);
         }

         //スタイル設定
         $('head').append($("<style type=\"text/css\">\n" + "." +
            selecters.hideClass +
            " { display :none; }\n" + "." + selecters.showClass +
            " { display :bloack;}\n<\/style>"));

         //自身のスタイル
         $self.css(inlineStyles.call($self));
         

         //タグ生成
         $wrap = $self.wrapAll('<span />').parents('span').eq(0).addClass(settings.wrapClass).css(inlineStyles.call($self, settings.wrapClass));

         
         $target = $self.after('<span />').next('span').addClass(settings.targetClass).css(inlineStyles.call($self, settings.targetClass));

         
         //$wrap.addClass(selecters.hideClass);
         $self.data('target', $target).data('string', $self.attr('placeholder'));
         $self.removeAttr('placeholder').show();
         $target.html($self.data('string'));


         //event追加
         $self.on('focus', fucusEvent);
         $self.on('blur', blurEvent);
         $self.on('keyup, keydown', keyEvent);
         
         $target.on('click', function() {
            $self.trigger('focus');
         });
         
         
         //loaded Call
         if ( settings.loadedFn ) {
            settings.loadedFn.call($self, $wrap, $target);
         }

         return this;

      };

      this.each(function() {
         init.call(this);
      });

      return this;

   };

})(jQuery);