require(["jquery", "ipu-stomp"], function($, IpuStomp,) {
  //	var baseUrl = "ws://localhost:7100/stomp";
    var baseUrl = "ws://47.105.160.21:7100/stomp";
    var login = "empty_account1";
    var passcode = "123456";
    var host = "";
  
    var client;
    //为发送者input绑定onchange事件
    $("#userId").on("change", function(e) {
      $("#userId").val(e.target.value);
    })
    
    var callbacks = {};
    callbacks.onConnected = function(msg){
      console.log("连接成功：" + msg);
      alert("连接成功：" + msg);
      $("#connBtn").val("断开连接");
      $("#connBtn").attr("id", "disconnBtn");
      $("#userId").attr("disabled", "disabled");
    }
      callbacks.onFailure = function(msg){
      console.log("连接失败：" + msg);
      alert("连接失败：" + msg);
    }
  
    $("#connBtn").on("click", function(e) {
      if (typeof (WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
      } else {
        console.log("您的浏览器支持WebSocket");
        //实例化WebSocket对象，指定要连接的服务器地址与端口  建立连接
        //等同于socket = new WebSocket("ws://localhost:8888/xxxx/im/25");
        if (!client || !client.connected()) {
          //检查用户ID
          if (!$("#userId").val()) {
            alert("请填写用户名")
            return;
          }
          client = IpuStomp.connect({url:baseUrl,name:login,passcode:passcode,host:host}, callbacks);
          client.setTopicPath("topic");
          
        } else {
          client.disconnect();
          subscription && subscription.unsubscribe();
          $("#disconnBtn").val("连接服务器");
          $("#disconnBtn").attr("id", "connBtn");
          $("#userId").removeAttr("disabled");
        }
      }
    });
   var path = []
    $("#login").on(
        "click",
        function(e) {
          //校验连接状态
          if (!client || !client.connected()) {
            alert("服务未连接")
            return;
          }
          //校验发布频道
          if (!$("#topic").val()) {
            alert("请填写发送频道")
            return;
          }
          chalkboard();
      })
      
      function chalkboard(){
        $('#chalkboard').remove();
        $('.chalk').remove();
        // $('#canvas').prepend('<div class="panel"><a class="link" target="_blank">Save</a></div>');
        $('#canvas').prepend('<img src="img/bg.png" id="pattern" width=50 height=50>');
        $('#canvas').prepend('<canvas id="chalkboard"></canvas>');
        $('#canvas').prepend('<div class="chalk"></div>');
        
        var canvas = document.getElementById("chalkboard");
        $('#chalkboard').css('width','200px');
        $('#chalkboard').css('height','400px');
        canvas.width = 200;
        canvas.height = 400;
        
        var ctx = canvas.getContext("2d");
        
        var width = canvas.width;
        var height = canvas.height;
        var mouseX = 0;
        var mouseY = 0;
        var mouseD = false;
        var eraser = false;
        var xLast = 0;
        var yLast = 0;
        var brushDiameter = 7;
        var eraserWidth = 50;
        var eraserHeight = 100;
        
        $('#chalkboard').css('cursor','none');
        document.onselectstart = function(){ return false; };
        ctx.fillStyle = 'rgba(255,255,255,0.5)';	
        ctx.strokeStyle = 'rgba(255,255,255,0.5)';	
          ctx.lineWidth = brushDiameter;
        ctx.lineCap = 'round';
      
        var patImg = document.getElementById('pattern');
      
        document.addEventListener('touchmove', function(evt) {
              var touch = evt.touches[0];
              mouseX = touch.pageX;
              mouseY = touch.pageY;
              if (mouseY < height && mouseX < width) {
                  evt.preventDefault();
                  $('.chalk').css('left', mouseX + 'px');
                  $('.chalk').css('top', mouseY + 'px');
                  //$('.chalk').css('display', 'none');
                  if (mouseD) {
                      draw(mouseX, mouseY);
                  }
              }
          }, false);
          document.addEventListener('touchstart', function(evt) {
              //evt.preventDefault();
              var touch = evt.touches[0];
              mouseD = true;
              mouseX = touch.pageX;
              mouseY = touch.pageY;
              xLast = mouseX;
              yLast = mouseY;
              draw(mouseX + 1, mouseY + 1);
          }, false);
          document.addEventListener('touchend', function(evt) {
              mouseD = false;
          }, false);
          $('#chalkboard').css('cursor','none');
        ctx.fillStyle = 'rgba(255,255,255,0.5)';	
        ctx.strokeStyle = 'rgba(255,255,255,0.5)';	
          ctx.lineWidth = brushDiameter;
        ctx.lineCap = 'round';
        
        $(document).mousemove(function(evt){
          mouseX = evt.pageX;
          mouseY = evt.pageY;
          if(mouseY<height && mouseX<width){
            $('.chalk').css('left',(mouseX-0.5*brushDiameter)+'px');
            $('.chalk').css('top',(mouseY-0.5*brushDiameter)+'px');
            if(mouseD){
              if(eraser){
                erase(mouseX,mouseY);
              }else{
                draw(mouseX,mouseY);
                }
              }
          }else{
            $('.chalk').css('top',height-10);
            }
          });
        $(document).mousedown(function(evt){ 
          mouseD = true;
          xLast = mouseX;
          yLast = mouseY;
          if(evt.button == 2){
            erase(mouseX,mouseY);
            eraser = true;
            $('.chalk').addClass('eraser');
          }else{
            if(!$('.panel').is(':hover')){
              draw(mouseX+1,mouseY+1);
            }		
          }
        });
      
        $(document).mouseup(function(evt){ 
          mouseD = false;
          if(evt.button == 2){
            eraser = false;
            $('.chalk').removeClass('eraser');
          }
        });
      
        $(document).keyup(function(evt){
          if(evt.keyCode == 32){
            ctx.clearRect(0,0,width,height);
            layPattern();
          }
        });
      
        $(document).keyup(function(evt){
          if(evt.keyCode == 83){
            changeLink();
          }
        });
      
        document.oncontextmenu = function() {return false;};
               
        function draw(x,y){
          ctx.strokeStyle = 'rgba(255,255,255,'+(0.4+Math.random()*0.2)+')';
          ctx.beginPath();
            ctx.moveTo(xLast, yLast);		
            ctx.lineTo(x, y);
            ctx.stroke();
                
            // Chalk Effect
          var length = Math.round(Math.sqrt(Math.pow(x-xLast,2)+Math.pow(y-yLast,2))/(5/brushDiameter));
          var xUnit = (x-xLast)/length;
          var yUnit = (y-yLast)/length;
          for(var i=0; i<length; i++ ){
            var xCurrent = xLast+(i*xUnit);	
            var yCurrent = yLast+(i*yUnit);
            var xRandom = xCurrent+(Math.random()-0.5)*brushDiameter*1.2;			
            var yRandom = yCurrent+(Math.random()-0.5)*brushDiameter*1.2;
              ctx.clearRect( xRandom, yRandom, Math.random()*2+2, Math.random()+1);
            }
      
          xLast = x;
          yLast = y;
          var sendText = '{"userId":"' + $("#userId").val()
            + '","topic":"' + $("#topic").val()
            + '","contentText":"' + canvas.toDataURL("image/png",0.5).toString() + '"}'
          client.publish($("#topic").val(), sendText);
        }
      
        function erase(x,y){
          ctx.clearRect (x-0.5*eraserWidth,y-0.5*eraserHeight,eraserWidth,eraserHeight);
          var sendText = '{"userId":"' + $("#userId").val()
          + '","topic":"' + $("#topic").val()
          + '","contentText":"' + canvas.toDataURL("image/png",0.5).toString() + '"}'
          client.publish($("#topic").val(), sendText);
        }
      
        $('.link').click(function(evt){
      
          $('.download').remove();
      
          var imgCanvas = document.createElement('canvas');
          var imgCtx = imgCanvas.getContext("2d");
          var pattern = imgCtx.createPattern(patImg,'repeat');
      
          imgCanvas.width = width;
          imgCanvas.height = height;
      
          imgCtx.fillStyle = pattern;
          imgCtx.rect(0,0,width,height);
          imgCtx.fill();
      
      
          var layimage = new Image;
          layimage.src = canvas.toDataURL("image/png");
      
          setTimeout(function(){
      
            imgCtx.drawImage(layimage,0,0);
      
            var compimage = imgCanvas.toDataURL("image/png");//.replace('image/png','image/octet-stream');
      
            $('.panel').append('<a href="'+compimage+'" download="chalkboard.png" class="download">Download</a>');
            $('.download').click(function(){
              IEsave(compimage);
            });
          
          }, 500);
      
      
        });
      
        function IEsave(ctximage){
          setTimeout(function(){
            var win = window.open();
            $(win.document.body).html('<img src="'+ctximage+'" name="chalkboard.png">');
          },500);
        }
      
        $(window).resize(function(){
           chalkboard();
        });
      
      } 
  });