var urlCapta = "/en/account/SlideVerificationCode"
//var url = "http://localhost:65317/VerificationCode/";
var IdCapta = "";
/*
 * drag 1.1
 * date 2017-02-10
 * 获取滑块验证码
 * JavaScript工具推荐：
 * http://tool.lu/js
 */
(function($) {
  var __imgx = 0, //图片宽度
    __imgy = 0, //图片高度
    __spec = "", //图片尺寸
    __executename, //校验通过后执行的函数
    __codediv; //验证码区域的div
  $.fn.captaSlide = function(imgspec, exename) {
    //校验参数
    if (imgspec == null) {
      imgspec = "300*300";
    }
    else if (typeof imgspec !== "string") {
      imgspec = "300*300";
    }

    var div = this;
    __codediv = div.attr("id");
    __spec = imgspec;
    __executename = exename;
    if (__codediv === undefined) {
      throw div.selector + ' does not exist';
    }
    __init();
    this.off("refresh").on("refresh", __init);
  };
  //载入
  function __init() {
    if (__spec === "")
      __spec = "300*300";
    var _spec = __spec.split('*');
    __imgx = _spec[0];
    __imgy = _spec[1];
    CreadeCodeDiv();
    $("#" + __codediv).css("width", __imgx);
    $("#" + __codediv).css("height", parseInt(__imgy) + $('#drag').height()+10);
    $('#drag').drag(__executename, __imgx, __imgy, __codediv);
    $.ajax({ //获取验证码
      type: "POST",
      url: urlCapta + "?action=getcode",
      dataType: "JSON",
      async: true,
      data: { spec: __spec },
      success: function(result) {
        IdCapta = result['Id'];
        if (result['state'] === -1) {
          return;
        }
        var errcode = result['errcode'];
        if (errcode !== 0) {
          document.getElementById(__codediv).innerHTML =
            "<span style='color:red'>" + $("#slidecodefailure").val() + result['errmsg'] + "</span>";
        }
        var yvalue = result['y'],
          small = result['small'],
          array = result['array'],
          normal = result['normal'];
        __imgx = result['imgx'];
        __imgy = result['imgy'];
        $(".cut_bg").css("background-image", "url(" + normal + ")");
        $("#xy_img").css("background-image", "url(" + small + ")");
        $("#xy_img").css("top", yvalue);
        $("#drag").css("width", __imgx);
        $("#drag .drag_text").css("width", __imgx);
        $(".cut_bg").css("width", __imgx / 10);
        $(".cut_bg").css("height", __imgy / 2);
        $(".refesh_bg").show();
        // $(".refesh_bg").css("left", __imgx - 25);
        var bgarray = array.split(',');
        //还原图片
        var _cutX = __imgx / 10;
        var _cutY = __imgy / 2;
        for (var i = 0; i < bgarray.length; i++) {
          var num = indexOf(bgarray, i.toString()); //第i张图相对于混淆图片的位置为num
          var x = 0,
            y = 0;
          //还原前偏移
          y = i > 9 ? -_cutY : 0;
          x = i > 9 ? (i - 10) * -_cutX : i * -_cutX;
          //当前y轴偏移量
          if (num > 9 && i < 10) y = y - _cutY;
          if (i > 9 && num < 10) y = y + _cutY;
          //当前x轴偏移量
          x = x + (num - i) * -_cutX;
          //显示第i张图片
          $("#bb" + i).css("background-position", x + "px " + y + "px");
        }
        //完成,移除提示
        $(".vcode-hints").remove();
      },
      beforeSend: function() {}
    });
  }

  function indexOf(arr, str) {
    if (arr && arr.indexOf) return arr.indexOf(str);
    var len = arr.length;
    for (var i = 0; i < len; i++) { if (arr[i] === str) return i; }
    return -1;
  }
  //绘制验证码结构
  function CreadeCodeDiv() {
    var __codeDIV = document.getElementById(__codediv);
    __codeDIV.innerHTML = '';
    var __codeHTML = "<div class='splitImgWrap' style='width:" + __imgx + "px;height:" + __imgy + "px;'>";
    //正在载入提示文字
    __codeHTML += "<div class='vcode-hints'style='width:" + __imgx + "px;line-height:" + (__imgy / 100) * 7 + ";'>" + $("#slidecodeload").val() + "...</div>";
    for (var i = 0; i < 20; i++) {
      //20张小图组成完整的验证码图片
      __codeHTML += "<div id='bb" + i + "'class='cut_bg'></div>";
    }
    __codeHTML += "<div id='xy_img'class='xy_img_bord'></div><div class='errorTips'>"+$("#slidedragerrortips").val()+"</div></div><div id='drag'></div>";
    __codeDIV.innerHTML = __codeHTML;
  }
})(jQuery);
/*
 *
 * date 2017-02-10
 * 滑块验证码校验
 */
(function($) {
  $.fn.drag = function(executename, imgx, imgy, __codediv) {
    var x, $dragBar = this,
      isMove = false;
    //添加背景，文字，滑块
    var html = '<div class="drag_bg"></div><div class="drag_text" onselectstart="return false;"' + 'unselectable="on">' + $("#slidecodedrag").val() + '</div>' +
      '<div class="handler handler_bg"><em class="iconfont icon-arrowhead-top"></em><em class="iconfont icon-close"></em> <img class="loadImg" src="/Assets/enp/img/loading.gif"></div><a' +
      ' title="' + $("#slidecoderefresh").val() + '"' +
      'style="width:16px;height:16px;"><div class="refesh_bg"><em class="iconfont icon-refresh"></em></div></a>';

    $dragBar.append(html);

    var $refeshBg = $dragBar.find(".refesh_bg")
    var handler = $dragBar.find('.handler'),
      // $dragBar = $("#drag"),
      $splitImgWrap = $(".splitImgWrap"),
      drag_bg = $dragBar.find('.drag_bg'),
      $dragText = $dragBar.find('.drag_text'),
      maxHandleWidth = imgx- handler.width(),  //能滑动的最大间距
      maxPicWidth =   imgx-$("#xy_img").width(),//图片跟随的间距
      picwidthRate = maxPicWidth/maxHandleWidth,
      errerTimer,
      t1 = new Date(), //开始滑动时间
      t2 = new Date(); //结束滑动时间

    var $xy_img = $("#xy_img");
    var arrayDate = new Array(); //鼠标/手指移动轨迹

    $refeshBg.on("click", function() {
      $dragBar.trigger("refresh");
    })
    $dragText.css("width", imgx);

    /*
     *鼠标/手指在上下文移动时，
     *移动距离大于0小于最大间距
     *滑块x轴位置等于鼠标移动距离
     *绑定document防止鼠标/手指
     *离开滑块时监听停止
     */
    handler.mousedown(function(e) {
      dragstart(e.pageX);
    }); //鼠标按下
    $(document).mousemove(function(e) {
      dragmoving(e.pageX);
    }); //移动鼠标
    $(document).mouseup(function(e) {
      dragmovend(e.pageX);
    }); //松开鼠标
    handler.mouseout(function(e) {}); //鼠标移出元素
    handler.on("touchstart", function(e) {
      dragstart(e.originalEvent.touches[0].pageX);
      //阻止页面的滑动默认事件
      document.addEventListener("touchmove", defaultEvent,  { passive: false });
    }); //手指按下
    $(document).on("touchmove", function(e) {
      dragmoving(e.originalEvent.touches[0].pageX);
    }); //手指移动
    $(document).on("touchend", function(e) {
      dragmovend(e.originalEvent.changedTouches[0].pageX);
      //阻止页面的滑动默认事件
      document.removeEventListener("touchmove", defaultEvent,  { passive: false });
    }); //手指松开
    //鼠标/手指开始滑动
    function dragstart(thisx) {
      //if (thisx >= maxWidth) {
      //    return;
      //}
      $xy_img.show();
      $refeshBg.hide();
      $dragText.hide();
      isMove = true;
      x = thisx - parseInt(handler.css('left'), 10);
      t1 = new Date();
    }
    //鼠标/手指移动过程
    function dragmoving(thisx) {
      var _x = thisx - x;
      if (isMove) {
        if (_x > -2 && _x <= maxHandleWidth) {
          $xy_img.css({ 'left': _x*picwidthRate });
          handler.css({ 'left': _x });
          drag_bg.css({ 'width': _x });
          arrayDate.push([_x, new Date().getTime()]);
        }else if (_x > maxHandleWidth) { //鼠标指针移动距离达到最大时清空事件
          $xy_img.css({ 'left': maxHandleWidth*picwidthRate });
          handler.css({ 'left': maxHandleWidth });
          drag_bg.css({ 'width': maxHandleWidth });
        }else{
          $xy_img.css({ 'left':0});
          handler.css({ 'left': -2 });
          drag_bg.css({ 'width': 0 });
        }
      }
    }
    //取消事件的默认动作 
    //防止一些Android浏览器页面跟随滑动的情况
    function defaultEvent(e) {
      e.preventDefault();
    }
    //鼠标/手指移动结束
    function dragmovend(thisx) {
      if (!isMove) { //没有滑动过程 直接返回
        return;
      }
      isMove = false;
      if (isNaN(x) || x === undefined) {
        return;
      }
      var _x = Math.round(thisx - x); //取整
      if (_x < 10) {
        dragBack()
        return;
      }
      t2 = new Date();
      $dragBar.addClass("loading");
      $splitImgWrap.addClass("loading");
      $.ajax({ //校验
        type: "POST",
        url: urlCapta + "?action=check",
        dataType: "json",
        // async: true,
        data:
        {
          Id: IdCapta,
          point: Math.floor(_x*picwidthRate),
          timespan: t2 - t1,
          datelist: arrayDate.join("|")
        },
        success: function(result) {
          $dragBar.removeClass("loading");
          $splitImgWrap.removeClass("loading");
          if (result['state'] === 0) { //成功
            dragOk();
            var token = result['token']; //用于后台验证
            if (typeof executename == "function") {
                executename("&vcodeid=" + IdCapta + "&vtoken=" + token)
            }
          } else { //失败
            dragError(result);
          }
        },
        error: function(xhr, response, text) {
          $dragBar.removeClass("loading");
          $splitImgWrap.removeClass("loading");
          dragError(text);
        }
      });
    }

    function dragError(result) {
      $dragBar.addClass("dragError");
      $splitImgWrap.addClass("dragError");
      clearTimeout(errerTimer);
      if (result && result['state'] == -10014) {
        //超过最大错误次数限制 刷新验证码
        $dragBar.trigger("refresh");
      }
      errerTimer = setTimeout(function(){
            $dragBar.removeClass("dragError");
            $splitImgWrap.removeClass("dragError");
            dragBack();
        },1000)
    }
    function dragBack(){
      $refeshBg.show();
      $dragText.show();
      $xy_img.css({ 'left': 0 });
      handler.css({ 'left': -2 });
      drag_bg.css({ 'width': 0 });
    }


    //清空事件
    function dragOk() {
      //抖动效果
      // for (var i = 1; 4 >= i; i++) {
      //    $xy_img.animate({ left: _x - (40 - 10 * i) }, 50);
      //    $xy_img.animate({ left: _x + 2 * (40 - 10 * i) }, 50, function () {
      //        $xy_img.css({ 'left': result['data'] });
      //    });
      // }

      $dragBar.addClass("dragSuccess");
      $splitImgWrap.addClass("dragSuccess");
      handler.css({ 'left': maxHandleWidth });
      drag_bg.css({ 'width': imgx });
      
      $xy_img.removeClass('xy_img_bord');
      $dragText.show().text($("#slidecodesuccess").val()); //验证通过
      handler.unbind('mousedown');
      $(document).unbind('mousemove');
      $(document).unbind('mouseup');
    }
  };
})(jQuery);