var Picture={};
	Picture.sketchObj;
	Picture.myCanvas;
	Picture.selectedColor;
	Picture.jsonData=[];
	Picture.imgCnt=0;
	Picture.actionsHere=[];
	Picture.actionsForRedo=[];
	Picture.allactions=[];
	Picture.recentAction;
	Picture.pickerAsset;
	Picture.opacity=0.7;

var Utils ={},startTime,somethingDone=false,scoredMarks,totalMarks=0;
Utils.mobileDeviceFlag=false;
Utils.Path='';
$(document).ready(function() {
	// check whether it is Tablet or Desktop
	if(navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i))
		Utils.mobileDeviceFlag=true;
	/* if(Utils.mobileDeviceFlag)
 		Utils.Path=Android.getMediaPath("Coloring"); */ 

    $(".se-pre-con").fadeOut("slow");
	$("#gamePage").hide();
	Picture.setImages();
	Picture.myCanvas=document.querySelector('#myCanvas');
	Picture.jsonData=imgMapping;
	Picture.setCanvasForSketch();
	Picture.setScroll();
	Picture.setSVG();
	Picture.registerEventListeners();
});

Picture.setImages=function() {
	$("#start").attr('src',Utils.Path+'images/start.png');
    $("#coverPage").css("background-image",'url("'+Utils.Path+'images/cover.png")');
	$('body').css('backgroundImage','url("'+Utils.Path+'images/background.jpg")');
	$("#selectedBrush").attr('src',Utils.Path+'images/Brush.png');
	$("#selectedDropper").attr('src',Utils.Path+'images/Dropper.png');
	$("#brush").css("background-image",'url("'+Utils.Path+'images/Brush.png")');
	$("#undo").css("background-image",'url("'+Utils.Path+'images/undo.png")');
	$("#redo").css("background-image",'url("'+Utils.Path+'images/redo.png")');
	$("#clear").css("background-image",'url("'+Utils.Path+'images/clear.png")');
	$("#next").css("background-image",'url("'+Utils.Path+'images/next.png")');
	$("#home").css("background-image",'url("'+Utils.Path+'images/Home.png")');
	$("#logo").css("background-image",'url("'+Utils.Path+'images/logo.png")');
	$("#dropper").css("background-image",'url("'+Utils.Path+'images/Dropper.png")');
	$("#eraser").css("background-image",'url("'+Utils.Path+'images/Eraser.png")');
};

Picture.fitCanvasToContainer=function(canvas) {
	$("#myCanvas").prop('height',$("#pictureCanvas").height());
    $("#myCanvas").prop('width',$("#pictureCanvas").width());
};

Picture.setCanvasForSketch=function(){
	$("#myCanvas").sketch({defaultColor: "rgba(0, 0, 0,"+Picture.opacity+")",defaultSize: "10"});
	Picture.sketchObj=$("#myCanvas").sketch();
};

Picture.registerEventListeners=function() {
	$("#home").on("click", function() {
  		window.location.reload();
    });
	$("#start").on("click",function(){
		$("#home").css("visibility","visible");
		$("#coverPage").hide();
		$("#gamePage").show();
		$("#container").hide();
	});
	$(".tool").on("click", function() {
		$(this).addClass("animated flipInX");
		var Type=$(this).attr("id");
		setTimeout(function(){
			$("#tools").css("display","none");
			$("#scroll").css("visibility","visible");
			$("#container").show();
			Picture.fitCanvasToContainer(Picture.myCanvas);
	  		if(Type=="selectedBrush"){
				$("#brush").css("display","block");
				Picture.opacity=0.7;
				$("#myCanvas").show();
				Picture.currentLevel=1;
			}else{
				$("#dropper").css("display","block");
     			$("#dropper").css("visibility","hidden");
				$("#undo,#redo").css("display","none");
				$("#clear").css("margin-top","50%");
				$("#next").css("top","60%");
				Picture.opacity=1;
				Picture.sketchObj.color="rgba(0,0,0,1)";
				$("#myCanvas").hide();
				Picture.currentLevel=2;
			}
		}, 500);
    });
	$(".operationHeight").on("click",function() {
		$(".operationHeight").removeClass("animated flipInX");
		var currentId = $(this).attr('id');
		$('#' + currentId +'').addClass("animated flipInX");
	});
	$("#brush").on("click", function() {
		$("#brushSize").toggle();
    });
	$(".sizeDivs").on("click", function() {
		Picture.sketchObj.size=$(this).attr("value");
    });
	$("#eraser").on("click", function() {
		Picture.sketchObj.color="rgba(256,256,256,1)";
    });
	$("#undo").on("click",function() {
		Picture.undo();
	});
	$("#redo").on("click",function() {
		Picture.redo();
	});
	$("#clear").on("click",function() {
		Picture.clearCanvas();
		$("svg > * , svg > g > *").css("fill","rgba(255,255,255,0)");
	});
	$(".colorHeight").on("click",function() {
		Picture.setMarker(this.style.backgroundColor);
	});
	$("#next").on("click",function() {
		Picture.clearCanvas();
		Picture.setSVG();
	});
	$(document).mouseup(function (e) {
    var containersizeBtn = $("#brush");
    if (!containersizeBtn.is(e.target) // if the target of the click isn't the container...
        && containersizeBtn.has(e.target).length === 0) // ... nor a descendant of the container
    {
        $("#brushSize").css("display","none");
    }
	});
};

Picture.undo=function() {
	Picture.actionsHere=Picture.sketchObj.actions;
	var arrayLength=Picture.actionsHere.length;
	if(arrayLength>0){
		Picture.recentAction=Picture.sketchObj.actions[arrayLength-1];
		Picture.actionsForRedo.push(Picture.recentAction);
		Picture.sketchObj.actions.splice(arrayLength-1,1);
		Picture.sketchObj.redraw();
	}
};

Picture.redo=function() {
	var arrayLength=Picture.actionsForRedo.length;
	if(arrayLength>0)
	Picture.sketchObj.actions.push(Picture.actionsForRedo[arrayLength-1]);
	Picture.actionsForRedo.splice(arrayLength-1,1);
	Picture.sketchObj.redraw();
};

Picture.clearCanvas=function() {
	var context=Picture.myCanvas.getContext("2d");
	context.clearRect(0, 0, Picture.myCanvas.width, Picture.myCanvas.height);
	Picture.sketchObj.actions=[];
};

Picture.setMarker=function(selectedColor) {
	$("#selectedColor").css("background-color",selectedColor);
	Picture.sketchObj.color=selectedColor;
	Picture.sketchObj.color=selectedColor.replace(')', ', '+Picture.opacity+')').replace('rgb', 'rgba');
	Picture.selectedColor=selectedColor;
};

Picture.setScroll=function() {
	var temp="";
	for(var i=0;i<Picture.jsonData.length;i++){
			temp="<div id='div"+i+"' class='scrollDivs' onclick='Picture.clickedSVG("+i+",this)'></div>";
			$("#scroll").append(temp);
			$("#div"+i).css('backgroundImage','url('+Utils.Path+Picture.jsonData[i].imgThumbnail+')');
	}
};

Picture.setSVG=function() {
	Picture.addScoreToDB(0);
	var d=new Date();
   	startTime=d.getDate()+"-"+(d.getMonth()+1)+"-"+d.getFullYear()+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
   	if(Picture.imgCnt == Picture.jsonData.length){Picture.imgCnt=0;}
	$("#forSVG").html(""+Picture.jsonData[Picture.imgCnt++].imgURL);
	Picture.setSVGListeners();
};

/*Picture.getSVGPaths=function() {
	var context=Picture.myCanvas.getContext("2d");
	var svgPathsData=$("svg > path");
	var len=svgPathsData.length;
	for(var i=0;i<len;i++){
		var p = new Path2D($(svgPathsData[i]).attr('d'));
		$(svgPathsData[i]).on("click",function(){
			console.log("chaltay ki");
		});
		context.stroke(p);
		context.fill(p);
	}
};*/

Picture.clickedSVG=function(id,obj) {
	Picture.addScoreToDB(0);
	var d=new Date();
   	startTime=d.getDate()+"-"+(d.getMonth()+1)+"-"+d.getFullYear()+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
   	
	Picture.clearCanvas();
	Picture.imgCnt=id;
	$("#forSVG").html(""+Picture.jsonData[Picture.imgCnt++].imgURL);
	Picture.setSVGListeners();
}

Picture.setSVGListeners=function() {
	$("svg > * , svg > g > *").css("fill","rgba(255,255,255,0)");
	$("svg > * , svg > g > *").click(function(){
		somethingDone=true;
		$(this).css({ fill:Picture.sketchObj.color});
    });
}


Picture.addScoreToDB=function(scoredMarks){
	if(somethingDone==true){
        console.log(Picture.imgCnt,0,totalMarks,Picture.currentLevel,startTime);
		if(Utils.mobileDeviceFlag)
       	Android.addScore(resId,Picture.imgCnt,0,totalMarks,Picture.currentLevel,startTime);
       	somethingDone=false;
    }
}