var img_file = "";
var canvas;
var screenwidth = window.innerWidth;
var screenheight = window.innerHeight;

var imgData;
var ext;

var hexcolor1 = "#000000";
var redcolor1 = 0;
var greencolor1 = 0;
var bluecolor1 = 0;

var hexcolor2 = "#ffffff";
var redcolor2 = 0;
var greencolor2 = 0;
var bluecolor2 = 0;
var flag = false;

var clickcounter = 0;

//localStorage.monoclickcounter = 0;

$(document).ready(function() {
	$("#vserv_advt_slide, #vserv_advt_slide_popup").click(function(event) {
		localStorage.monoclickcounter = 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() {
	$("#effect_btn").click('pageshow', function(event) {
		var file = $("#user_img").val();
		if(file == "" || file == null)
		{
			alert("Plz select image.");
			$("#user_img").focus();
		}
		else
		{
			clickcounter = Number(localStorage.monoclickcounter);

			if(isNaN(clickcounter))
				clickcounter = 0;

			if(clickcounter >= 5)
			{
				alert("Buy me a beer. Kindly click and visit above offers. You will get 5 chances for monochromatic effect.");
				$.mobile.changePage("#advt_page", { transition: "slide", changeHash: true});
			}
			else
			{
				if(localStorage.monoclickcounter)
					localStorage.monoclickcounter = Number(localStorage.monoclickcounter) + 1;
				else
					localStorage.monoclickcounter = 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();

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

						var image = new Image();

						image.src = img_file;

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

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

						imgData = ctx.getImageData(0, 0, image.width, image.height);
						var pix = imgData.data;
						var threshold = $("#threshold_slider").val();

						var red1 = $("#red1_slider").val();
						var green1 = $("#green1_slider").val();
						var blue1 = $("#blue1_slider").val();

						var red2 = $("#red2_slider").val();
						var green2 = $("#green2_slider").val();
						var blue2 = $("#blue2_slider").val();

						for(var i=0,n=pix.length;i<n;i+=4)
						{
							if(pix[i] > threshold)
							{
								pix[i] = red1;
								pix[i+1] = green1;
								pix[i+2] = blue1;
							}
							else
							{
								pix[i] = red2;
								pix[i+1] = green2;
								pix[i+2] = blue2;
							}
						}

						ctx.clearRect(0, 0, image.width, image.height);
						ctx.putImageData(imgData,0,0);


						$("#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;
	});
});

function colorupdate()
{
	redcolor1 = $("#red1_slider").val();
	greencolor1 = $("#green1_slider").val();
	bluecolor1 = $("#blue1_slider").val();

		redcolor2 = $("#red2_slider").val();
		greencolor2 = $("#green2_slider").val();
		bluecolor2 = $("#blue2_slider").val();

		var hexred1 = "";
		var hexgreen1 = "";
		var hexblue1 = "";

		var hexred2 = "";
		var hexgreen2 = "";
		var hexblue2 = "";

		if(redcolor1 < 15)
			hexred1 = "0" + Number(redcolor1).toString(16);
		else
			hexred1 = Number(redcolor1).toString(16);

		if(greencolor1 < 15)
			hexgreen1 = "0" + Number(greencolor1).toString(16);
		else
			hexgreen1 = Number(greencolor1).toString(16);

		if(bluecolor1 < 15)
			hexblue1 = "0" + Number(bluecolor1).toString(16);
		else
			hexblue1 = Number(bluecolor1).toString(16);


		hexcolor1 = "#" + hexred1 + hexgreen1 + hexblue1;


		if(redcolor2 < 15)
			hexred2 = "0" + Number(redcolor2).toString(16);
		else
			hexred2 = Number(redcolor2).toString(16);

		if(greencolor2 < 15)
			hexgreen2 = "0" + Number(greencolor2).toString(16);
		else
			hexgreen2 = Number(greencolor2).toString(16);

		if(bluecolor2 < 15)
			hexblue2 = "0" + Number(bluecolor2).toString(16);
		else
			hexblue2 = Number(bluecolor2).toString(16);


		hexcolor2 = "#" + hexred2 + hexgreen2 + hexblue2;


		document.getElementById("displaycolor1").style.backgroundColor = hexcolor1;
		document.getElementById("displaycolor2").style.backgroundColor = hexcolor2;
}

$(document).ready(function() {
	colorupdate();
});

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