//namespace
var Timeline = {};
var Utils = {};
Utils.Path = " ";
Utils.mobileDeviceFlag = false;
var resId = 0, questionId = 0, startTime = 0, scoredMarks = 0, totalMarks = 10, label =null, level = 1, scoreFlag = false;
var canvas  ;
$(document).ready(function () {
    $(".se-pre-con").fadeOut("slow");
    if ((navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i))&& !(window.location.href.includes('http')))
        Utils.mobileDeviceFlag = true;
    /* if (Utils.mobileDeviceFlag)
        Utils.Path = Android.getMediaPath("Timeline Equivalent"); */
    setTimeout(function () { Timeline.Initilize(); }, 200);
});
 Timeline.Initilize = function () {
	document.title =Timeline.hardcodedData.gameName;
    Timeline.setImages(); //function that set all the images 
    Timeline.variableInitilization();
    document.getElementById("gamePage").style.display = "none";
    //document.body.style.backgroundImage = "url('image/skin/BG1.jpg')";
    $("#playImage").addClass("pulse");
}
Timeline.setImages = function () {
    document.getElementById("logoImg").src = Utils.Path + "image/skin/logo.png";
    document.getElementById("playImage").src = Utils.Path + "image/skin/Play.png";
    document.getElementById("year").style.backgroundImage = Utils.Path+"url('image/skin/clock.png')";
    $("#instrDiv").text(Timeline.hardcodedData.instr);
}
Timeline.variableInitilization = function(){
    Timeline.ctx;
    Timeline.xCord;
     Timeline.yCord;
     Timeline.indexNo;
     Timeline.firstWidthDiff;
     Timeline.secondWidthDiff;
     Timeline.height;  
     Timeline.firstWidth;
     Timeline.midDiff
     Timeline.secondWidth;
     Timeline.canvas;
     Timeline.clickFlag = false ; 
}
Timeline.startGame = function () {
    document.getElementById("coverPage").style.display = "none";
    document.getElementById("gamePage").style.display = "block";
    document.getElementById("eventImg").src=Utils.Path+"image/skin/event.jpg";
    $("#outerDiv").css("top","22vh");
    Timeline.createCanvas();
}
Timeline.createCanvas = function(){
    $("#backID").hide();
  var startWidth = 30 , midDiff,smallLine = 0;
    var canvasDivElement = document.getElementById("outerDiv");
     Timeline.firstWidth = canvasDivElement.offsetWidth;
     Timeline.height = canvasDivElement.offsetHeight;
     Timeline.firstWidthDiff = (Timeline.firstWidth-40)/3;
     midDiff = Timeline.firstWidthDiff/40;
     smallLine = midDiff;
     console.log(Timeline.firstWidthDiff);
     $("#outerDiv").css({ "overflow-x":"hidden"});
    canvasTag = document.createElement("canvas");
     canvasTag.setAttribute("id", "canvasID");
     canvasTag.setAttribute("width",Timeline.firstWidth);
     canvasTag.setAttribute("height", Timeline.height );
     document.getElementById("canvasDiv").appendChild(canvasTag);
     var canvasElement = document.getElementById("canvasID");
     Timeline.ctx = canvasElement.getContext('2d');
     Timeline.ctx.beginPath();
     Timeline.ctx.moveTo(30, Timeline.height /3);
     Timeline.ctx.lineTo(Timeline.firstWidth-45, Timeline.height /3);
     Timeline.ctx.strokeStyle = "black";
     Timeline.ctx.lineWidth = "1";
     Timeline.ctx.stroke();
   

     for(var i=0;i<4;i++){
         $("#year").css("visibility","hidden");

         Timeline.ctx.beginPath();
          Timeline.ctx.arc(startWidth,Timeline.height/3 , 8 , 0 , 2*Math.PI);
           Timeline.ctx.font = " bold 2vw Georgia, serif";
            Timeline.ctx.fillStyle = "#0000FF";
            Timeline.ctx.fill();
           Timeline.ctx.fillText(Timeline.hardcodedData.yearsArray[i], startWidth-20 , Timeline.height/1.7);
           if(i==2){
            Timeline.firstWidthDiff = Timeline.firstWidthDiff - 45;
        }
          smallLine = startWidth + midDiff ; 
          if(i < 3){
           for(var j=0;j<39;j++){
              Timeline.ctx.moveTo(smallLine,Timeline.height/3);
              Timeline.ctx.lineTo(smallLine,Timeline.height/2.2);
              smallLine = smallLine+midDiff;
              Timeline.ctx.strokeStyle = "black";
            if(i == 2){
                if(j<35)
                  Timeline.ctx.stroke();
            }
            else
               Timeline.ctx.stroke();
            }
        }
            startWidth = startWidth + Timeline.firstWidthDiff;
    }
    canvas = document.getElementById("canvasID");
     canvas.addEventListener('dblclick',function(e){
        
         const rect = canvas.getBoundingClientRect() //get clicked pos cordinate
         Timeline.xCord  = e.clientX - rect.left
         Timeline.yCord  = e.clientY - rect.top  
         console.log("x: " +  Timeline.xCord   + " y: " + Timeline.yCord);
       if(Timeline.height/3.4 <= Timeline.yCord && Timeline.yCord <= Timeline.height/2.2){
           if(!Timeline.clickFlag)
              Timeline.zoomPosition(canvas, e)
       }
     });
}

Timeline.zoomPosition = function(canvas, event){ //explorer the year on doubleclick;
    Timeline.clickFlag = true;
    var count = 0;
    Timeline.indexNo = Math.floor(Timeline.xCord / Timeline.firstWidthDiff);
    console.log(Timeline.indexNo );
    $("#backID").show();
    $("#list1").text(Timeline.finalYear[Timeline.indexNo].eventArray[0].info);
    $("#yearSpan").text(Timeline.finalYear[Timeline.indexNo].eventArray[0].year);
    $("#outerDiv").css("top","0vh");
     $("#instrDiv").hide();
     $("#year").show();
     $("#year").css("visibility","visible");
     $("#infoDiv").show();
     $("#list1").addClass('animated zoomIn');
    Timeline.ctx.clearRect(0,0,Timeline.firstWidth,Timeline.height); //clear canvas

    var startWidth = 40 ,smallLine = 0;
    $("#canvasDiv").css("width","5000px");
    $("#outerDiv").css({ "overflow-x":"scroll"});
    var canvasDivElement = document.getElementById("canvasDiv");
     Timeline.secondWidth = canvasDivElement.offsetWidth;
     Timeline.height = canvasDivElement.offsetHeight;
     canvas.setAttribute("width" , "unset");
     canvas.setAttribute("width" , Timeline.secondWidth);
     canvas.setAttribute("height",Timeline.height)
    Timeline.secondWidthDiff = (Timeline.secondWidth-40)/7;
     Timeline.midDiff = Timeline.secondWidthDiff/5;
     smallLine = Timeline.midDiff;
     console.log(Timeline.secondWidthDiff);
     Timeline.ctx.beginPath();
     Timeline.ctx.moveTo(startWidth, Timeline.height /3);
     Timeline.ctx.lineTo(Timeline.secondWidth-40, Timeline.height /3);
     Timeline.ctx.stroke();
     
     for(var i=0;i<8;i++){
        Timeline.ctx.beginPath();
        if(i == 7)
         startWidth -= 40;
        Timeline.ctx.arc(startWidth,Timeline.height/3 , 8 , 0 , 2*Math.PI);
         Timeline.ctx.font = " bold 2vw Georgia, serif";
         Timeline.ctx.fillStyle = "#0000FF";
         Timeline.ctx.fill();
         Timeline.ctx.fillText(Timeline.finalYear[Timeline.indexNo].eventArray[count].year , startWidth-30 , Timeline.height/1.7);
        smallLine = startWidth + Timeline.midDiff ; 
        count += 5 ;
         for(var j=0;j<4;j++){
            Timeline.ctx.moveTo(smallLine,Timeline.height/3);
            Timeline.ctx.lineTo(smallLine,Timeline.height/2.2);
            Timeline.ctx.strokeStyle = "black";
            Timeline.ctx.stroke();
           smallLine = smallLine+Timeline.midDiff;
        }
          startWidth = startWidth + Timeline.secondWidthDiff;

   }
        canvas.addEventListener('click',function(e){
            canvas.removeEventListener('dblclick',function(){
                Timeline.zoomPosition();
            });
            const rect = canvas.getBoundingClientRect()
            Timeline.xCord  = e.clientX - rect.left
            Timeline.yCord  = e.clientY - rect.top  
            console.log("x: " +  Timeline.xCord   + " y: " + Timeline.yCord);
            if(Timeline.height/3.4 <= Timeline.yCord && Timeline.yCord <= Timeline.height/2.2)
                 Timeline. getCursorPosition(canvas, e)
        });
}
Timeline . getCursorPosition = function(canvas, event) {
    $("#list1").removeClass("zoomIn");
 
    var eventNo = Math.floor(Timeline.xCord /Timeline.midDiff);
    console.log(eventNo);
  
 /* if(!Timeline.clickFlag){
    $("#list1").text( Timeline.yearInfo[Timeline.indexNo].event);
    $("#yearSpan").text(Timeline.yearInfo[Timeline.indexNo].mainYear);
   }
    else{ */
        $("#list1").addClass('animated zoomIn');
        $("#list1").text( Timeline.finalYear[Timeline.indexNo].eventArray[eventNo].info);
        $("#yearSpan").text( Timeline.finalYear[Timeline.indexNo].eventArray[eventNo].year);
   //}
}

Timeline.goBack = function(){
    canvas.removeEventListener('onclick',function(){
        Timeline.getCursorPosition();
    });
    Timeline.clickFlag = false
    $("#outerDiv").css("top","22vh");
    $("#instrDiv").show();
    $("#year").hide();
    $("#infoDiv").hide();
    $("#list1").removeClass('animated zoomIn');
    Timeline.ctx.clearRect(0,0,Timeline.firstWidth,Timeline.height); //clear canvas
    Timeline.createCanvas();
}