var img_file = "";

var canvas;
var ctx;

var screenwidth = window.innerWidth;
var screenheight = window.innerHeight;

var imgData;

var ext;

var flag = false;

var newimgData;

var pix;
var edgeimg;
var pencil_width_slider;

var clickcounter = 0;
//localStorage.clickcounter = 0;


$(document).ready(function() {
	$("#vserv_advt_slide, #vserv_advt_slide_popup").click(function(event) {
		localStorage.clickcounter = 0;
	});
});


$(document).ready(function() {
	var height = parseInt(($(document).innerHeight() * 2)/3);


	$("#vserv_advt_slide li").each(function(){
		$(this).find("img").css("width","100%");
		$(this).find("img").css("height",height-50);
	});
	
	$("#vserv_advt_slide_popup li").each(function(){
		$(this).find("img").css("width","100%");
		$(this).find("img").css("height",height-50);
	});
	
	$("#clickbank_advt_popup li").each(function(){
		$(this).find("img").css("width","100%");
		$(this).find("img").css("height",height-50);
	});
});

$(document).ready(function() {
	$("#about_btn").click('pageshow', function(event) {
		$.mobile.changePage("#about_page", { transition: "slide", changeHash: true});
	});
});

$(document).ready(function() {
	$("#help_btn").click('pageshow', function(event) {
		$.mobile.changePage("#help_page", { transition: "slide", changeHash: true});
	});
});

var advttimer = setInterval(function(){
	$.mobile.changePage('#popup_advt_page', {
		transition : 'pop',
                role       : 'dialog'
	});
}, 180000);

$(function() {
	$("#user_img").on("change", function(index, element)
	{
		
		var id_img = "#user_img_prev";

		var files = !!this.files ? this.files : [];

		if (!files.length || !window.FileReader)
		{
			$(id_img).attr("src", "");
			return; // no file selected, or no FileReader support
		}

//		if (/^image/.test( files[0].type)){ // only image file		
		ext = $(this).val().split('.').pop().toLowerCase();
		
		if(!($.inArray(ext, ['jpg','jpeg','png']) == -1)){ // only image file
			var reader = new FileReader(); // instance of the FileReader
			reader.readAsDataURL(files[0]); // read the local file

			reader.onloadend = function(){ // set image data as background of div
				$(id_img).parent().toggle().toggle();
				$(id_img).attr("src", this.result);

				img_file = this.result;
				
				$(id_img).load(function(){
					height_img = $(this).height() + "px";
					$(id_img).parent().css("height", height_img);
				});
			}

		}
		else
		{
			alert("Plz select image file with jpg/jpeg/png.gif extension.");
			$(this).val("");
			$(id_img).attr("src", "");
			$(id_img).parent().toggle().toggle();
			$(id_img).parent().css("height", "90px");
		}
	});
});

$(document).ready(function() {
	$("#pencil_btn").click('pageshow', function(event) {
		var file = $("#user_img").val();
		pencil_width_slider = $("#pencil_width_slider").val();

		canvas = document.getElementById("img_canvas");
		ctx = canvas.getContext("2d");

		canvas.width = 0;
		canvas.height = 0;
		ctx.clear(true);

		if(file == "" || file == null)
		{
			alert("Plz select image.");
			$("#user_img").focus();
		}
		else
		{
			clickcounter = Number(localStorage.clickcounter);

			if(isNaN(clickcounter))
				clickcounter = 0;

			if(clickcounter >= 5)
			{
				alert("Time to buy me a beer. Kindly click and visit above offers. You will get 5 chances for water color effect. (If advt.not shown plz check your internet connection and reload apss.)");
				$.mobile.changePage("#advt_page", { transition: "slide", changeHash: true});
			}
			else
			{
				if(localStorage.clickcounter)
					localStorage.clickcounter = Number(localStorage.clickcounter) + 1;
				else
					localStorage.clickcounter = 1;

				var counter = 0;
				flag = true;

				$.mobile.changePage("#result_page", { transition: "slide", changeHash: true});

				$("#result_img").attr("src", "img/wait.gif");

				$("#result_page").on("pageshow", function(){
					if(flag == true)
					{
						counter++;
						console.log("processing start.....: " + counter);
						var starttime = Date.now();

						var image = new Image();

						image.src = img_file;

						canvas.width = image.width;
						canvas.height = image.height;

						//ctx.clearRect(0, 0,
						//image.width, image.height);
						ctx.clear(true);
						ctx.drawImage(image, 0, 0, image.width, image.height);

						imgData = ctx.getImageData(0, 0, image.width, image.height);

						newimgData = Sobel.toImageData(Sobel(imgData, pencil_width_slider), image.width, image.height);
						pix = newimgData.data;

						for(var i=0,n=pix.length;i<n;i+=4)
						{
							pix[i] = 255 - pix[i];

							pix[i+1] = 255 - pix[i+1];

							pix[i+2] = 255 - pix[i+2];
						}

						//ctx.clearRect(0, 0,
						//image.width, image.height);
						ctx.clear(true);
						ctx.putImageData(newimgData, 0, 0);

						edgeimg = new Image();
						edgeimg.src = canvas.toDataURL();

						//ctx.clearRect(0, 0,
						//image.width, image.height);
						ctx.clear(true);
						ctx.drawImage(image, 0, 0, image.width, image.height);
						ctx.globalCompositeOperation = "overlay";
						ctx.drawImage(edgeimg, 0, 0, image.width, image.height);

						
						$("#result_img").attr("src", "");
						$("#result_img").attr("src", canvas.toDataURL());


						console.log("processing end.....");
						var endtime = Date.now();
						var totaltime = endtime - starttime;
						console.log("Total Time: " + (totaltime/1000) + "sec");
						flag = false;
					}
				});
			}
		}
	});
});



$(document).ready(function() {
	$("#save_btn").click(function(event) {
		if(ext == "jpg")
			ext = "jpeg";

		var filename = Date.now();
		var fileandext = filename + "." + ext;

		var link = document.getElementById("save_btn");
		link.href = canvas.toDataURL("image/" + ext);
		link.download = fileandext;
	});
});

CanvasRenderingContext2D.prototype.clear = CanvasRenderingContext2D.prototype.clear || function (preserveTransform){
	if(preserveTransform){
		this.save();
		this.setTransform(1,0,0,1,0,0);
	}

	this.clearRect(0, 0, this.canvas.width, this.canvas.height);

	if(preserveTransform){
		this.restore();
	}
};


$(window).load(function(){
	$("#vserv_advt_slide").responsiveSlides({
		"auto": true,
		"pause": false,
		"pauseControls": false,
		"namespace": "rslides",
		"nav": true,
		"maxwidth": 300,
		"maxheight": 300,
		"prevText": "< ",   // String: Text for the "previous" button
		"nextText": " >",       // String: Text for the "next" button
	});	
});

$(window).load(function(){
	$("#vserv_advt_slide_popup").responsiveSlides({
		"auto": true,
		"pause": false,
		"pauseControls": false,
		"namespace": "rslides",
		"nav": true,
		"maxwidth": 300,
		"maxheight": 300,
		"prevText": "< ",   // String: Text for the "previous" button
		"nextText": " >",       // String: Text for the "next" button
	});	
});

$(window).load(function(){
	$("#clickbank_advt_popup").responsiveSlides({
		"auto": true,
		"pause": false,
		"pauseControls": false,
		"namespace": "rslides",
		"nav": true,
		"maxwidth": 300,
		"maxheight": 300,
		"prevText": "< ",   // String: Text for the "previous" button
		"nextText": " >",       // String: Text for the "next" button
	});	
});


$(window).load(function(){
	$("#clickbank_advt1").responsiveSlides({
		"auto": true,
		"pause": false,
		"pauseControls": false,
		"namespace": "rslides",
		"nav": true,
		"maxwidth": 300,
		"maxheight": 300,
		"prevText": "< ",   // String: Text for the "previous" button
		"nextText": " >",       // String: Text for the "next" button
		
	});
});

$(window).load(function(){
	$("#vserv_advt_slide_extra").responsiveSlides({
		"auto": true,
		"pause": false,
		"pauseControls": false,
		"namespace": "rslides",
		"nav": true,
		"maxwidth": 300,
		"maxheight": 300,
		"prevText": "< ",   // String: Text for the "previous" button
		"nextText": " >",       // String: Text for the "next" button
	});	
});

