//---- normal P5 code -------------------------------------------------------
//Creaed by kanish R

function setup()       
{
    var height=600, width=600; 
    createCanvas(width, height);
  background('grey');

    // Establish the root object, `window` (`self`) in the browser, 
    // or `this` in some virtual machines. We use `self`
    // instead of `window` for `WebWorker` support.
    var root = typeof self === 'object' && self.self === self && self || this;

    // Create a safe reference to the handwriting object for use below.        
    var handwriting = function(obj) {
        if (obj instanceof handwriting) return obj;
        if (!(this instanceof handwriting)) return new handwriting(obj);
        this._wrapped = obj;
    };

    root.handwriting = handwriting;

    handwriting.recognize = function(trace, options, callback) {
        if (handwriting.Canvas && this instanceof handwriting.Canvas) {
            trace = this.trace;
            options = this.options;
            callback = this.callback;
        } else if (!options) options = {};
        var data = JSON.stringify({
            "options": "enable_pre_space",
            "requests": [{
                "writing_guide": {
                    "writing_area_width": options.width || this.width || undefined,
                    "writing_area_height": options.height || this.width || undefined
                },
                "ink": trace,
                "language": options.language || "en"
            }]
        });
        var xhr = new XMLHttpRequest();
        xhr.addEventListener("readystatechange", function() {
            if (this.readyState === 4) {
                switch (this.status) {
                    case 200:
                        var response = JSON.parse(this.responseText);
                        var results;
                        if (response.length === 1) callback(undefined, new Error(response[0]));
                        else results = response[1][0][1];
                        if (!!options.numOfWords) {
                            results = results.filter(function(result) {
                                return (result.length == options.numOfWords);
                            });
                        }
                        if (!!options.numOfReturn) {
                            results = results.slice(0, options.numOfReturn);
                        }
                        callback(results, undefined);
                        break;
                    case 403:
                        callback(undefined, new Error("access denied"));
                        break;
                    case 503:
                        callback(undefined, new Error("can't connect to recognition server"));
                        break;
                }


            }
        });
        xhr.open("POST", "https://www.google.com.tw/inputtools/request?ime=handwriting&app=mobilesearch&cs=1&oe=UTF-8");
        xhr.setRequestHeader("content-type", "application/json");
        xhr.send(data);
    };
  
}


function draw()             
{

    

// handwriting.recognize(trace, options, callback)
    
   
 

 
 
 
  if ( mouseIsPressed && mouseX<width && mouseY<height )        
  {
    //   console.log ( mouseX + " " + mouseY + " " );
   stroke('black');
       strokeWeight( 10 );
      line(mouseX, mouseY, pmouseX, pmouseY);    
         xx.push(mouseX)
         yy.push(mouseY)
  }
  


 
}


    var options = {
    width : 800,         //int, width of the writing area, default: undefined
    height : 800,        //int, height of the writing area, default: undefined
    language : "en",  //string, language of input trace, default: "zh_TW"
    numOfWords : 1,      //int, number of words of input trace, default: undefined
    numOfReturn : 10,     //int, number of maximum returned results, default: undefined
};


var callback = function(result, err){
    if(err) throw err;
    // else console.log(result,result[0].charCodeAt());
    else{
  guess =' '
   
    
    switch(document.getElementById('type').value) {
  case '1':
    // code block
   
     guess=" characters Guessed "
    
     
    for(var i=0;i<result.length;i++){
        if(result[i].charCodeAt()>96 && result[i].charCodeAt()<123)
             { console.log(result[i]);
             j=i+1
              guess=guess+' <h'+ j +'>'+ result[i]+' </h'+ j +'>'
    }
        
    }
     AB.msg (guess,2);

    
    
    break;
  case '2':
      
       guess=" characters Guessed "
       
       
    for(var i=0;i<result.length;i++){
        if(result[i].charCodeAt()>64 && result[i].charCodeAt()<91)
             { console.log(result[i]);
               j=i+1
              guess=guess+' <h'+ j +'>'+ result[i]+' </h'+ j +'>'
    }
        
    }
     AB.msg (guess,2);
    break;
  case '3':
       guess=" characters Guessed "
       
        for(var i=0;i<result.length;i++){
        if(result[i].charCodeAt()>47 && result[i].charCodeAt()<58)
              { console.log(result[i]);
              j=i+1
              guess=guess+' <h'+ j +'>'+ result[i]+' </h'+ j +'>'
    }
        
    }
     AB.msg (guess,2);
    break;
  default:
     guess=" characters Guessed "
      for(var i=0;i<result.length;i++){
              console.log(result[i]);
                j=i+1
              guess=guess+' <h'+ j +'>'+ result[i]+' </h'+ j +'>'
    }
    // code block
      AB.msg (guess,2);

}
    
    
    }
};



  thehtml =   '<label for="type">Choose Type:</label><select name="type" id="type"><option value="1">lowercase</option><option value="2">Uppercase</option><option value="3">number</option><option value="4">All</option> </select><br><br><button type="button" onclick="ccc()">Clear</button><br><br>'  ;
   AB.msg ( thehtml,1);

 var trace = [];
 var xx=[],yy=[];
  function mouseReleased(event) {
      
    //   if ( ! mouseX<width && mouseY<height ) 
    //   return ;

   var temp=[xx,yy]

     xx=[],yy=[];
     trace.push(temp)
   
     
    handwriting.recognize(trace, options, callback)
}
function ccc() {
  clear();
  background('grey');
 trace = [];
}