/***********************************
*
* Create.js
* Function of the 2.0 vinyl lettering
* designer.
* Author: Not you
*
************************************/


var canvasSizeWidth = 800;
var canvasSizeHeight = 250;

var previewWidth = 0;
var previewHeight = 0;



$(function() {
	$("#draggable").draggable();
});

$(document).ready(function(){ 
	window.onload=showTip;
	
	$("#backgroundOptionDiv").hide();
	$("#backgroundOptionCmd").click(function(){
		$("#backgroundOptionDiv").animate({height: "toggle"}, 500);
	});
	
	$("#text").bind('focus', function(){
		$("#size").val(-1);
		$("#createTooltip").fadeOut(400);
	});
	
	$("#createTooltip").bind('click', function(){
		$("#createTooltip").fadeOut(400);
	});
});



/********************************************************
*
* Get image by an ajax call
*
*********************************************************/

function getImage(){
	
	showLoading('previewContainer');
	
	
	//prepare var
	var paramText = document.getElementById('text');
	var paramFont = document.getElementById('font');
	var paramColor = document.getElementById('color');
	var paramSize = document.getElementById('fsize');
	var paramPosChanged = document.getElementById('positionChanged');
	var paramPosX = document.getElementById('positionX');
	var paramPosY = document.getElementById('positionY');
	
	var paramUrl =  "?text="+urlencode(paramText.value)+
					"&font="+paramFont.value+
					"&color="+paramColor.value+
					"&fsize="+paramSize.value+
					"&pc="+paramPosChanged.value+
					"&px="+paramPosX.value+
					"&py="+paramPosY.value;
			
					
	//call the preview generator
	$.ajax({
		type: "GET",
		url: "preview.php" + paramUrl,
		success: function(html){
			$("#previewContainer").html(html);
			$("#draggable").draggable(); //set the image as draggable
		}
	});
	
	getIcons(); //update link to the design
	showNewTip(2);
}




/********************************************************
*
* return a url php-friendly
*
*********************************************************/
function urlencode(str) {
    str = (str+'').toString();

    return encodeURIComponent(str).replace(/!/g, '%21').
									replace(/'/g, '%27').
									replace(/\(/g, '%28').
                                    replace(/\)/g, '%29').
									replace(/\*/g, '%2A').
									replace(/~/g, '%7E').
									replace(/%20/g, '+');
}


/********************************************************
*
* show a loading image in the a_target id
*
*********************************************************/
function showLoading(a_target){
	
	var loadingContent = "<table width=\"100%\" height=\"100%\" border=\"0\">"+
						 "<tr valign=\"center\"> <td align=\"center\">"+
						 "<img src=\"images/loading2.gif\" />"+
						 "</td> </tr>"+
						 "</table>";
						 
	document.getElementById(a_target).innerHTML = loadingContent;
}



/********************************************************
*
* verif enter key
*
*********************************************************/
function checkEnterKey(e) {
	if (e.keyCode == 13) {

		getImage();
		return false;
	}else{
		
		return true;	
	}
}

/********************************************************
*
* change the previews background
*
*********************************************************/
function changeBg(a_bg, a_hideBg) {
	
	switch(a_bg){
		case 0:
			document.getElementById('previewBackground').value = 0;
			changeBlankBg();
			
			if(a_hideBg)
				hideBgSelector();
		break;
		
		case 1:
			document.getElementById('previewBackground').value = 1;
			document.getElementById('previewContainer').style.background = "url(images/create/bg_boat.jpg)";
			
			if(a_hideBg)
				hideBgSelector();
		break;
		
		case 2:
			document.getElementById('previewBackground').value = 2;
			document.getElementById('previewContainer').style.background = "url(images/create/bg_side_car.jpg)";
			
			if(a_hideBg)
				hideBgSelector();
		break;
		
		case 3:
			document.getElementById('previewBackground').value = 3;
			document.getElementById('previewContainer').style.background = "url(images/create/bg_windshield.jpg)";
			
			if(a_hideBg)
				hideBgSelector();
		break;
		
		case 4:
			document.getElementById('previewBackground').value = 4;
			document.getElementById('previewContainer').style.background = "#" + document.getElementById('previewColor').color;
		break;
	}
	
	getIcons(); //update link to the design.
	showNewTip(1);

	
}

/********************************************************
*
* change blank background
*
*********************************************************/
function changeBlankBg() {

	if(document.getElementById('previewBackground').value == 0){
		
		var colorId = document.getElementById('color');
		
		if(colorId.value == 101 || colorId.value == 95 || colorId.value == 93){
			
			document.getElementById('previewContainer').style.background = "url(images/create/bg_blank_black.jpg)";
		}else{
			
			document.getElementById('previewContainer').style.background = "url(images/create/bg_blank_white.jpg)";	
		}
	}
}

/********************************************************
*
* will hide the background selector
*
*********************************************************/
function hideBgSelector() {
	$("#backgroundOptionDiv").animate({height: "toggle"}, 500);	
}



/********************************************************
*
* Get social sharing icons
*
*********************************************************/
function getIcons(){
		
	var paramText = document.getElementById('text');
	var paramFont = document.getElementById('font');
	var paramColor = document.getElementById('color');
	var paramSize = document.getElementById('fsize');
	var paramBgSelected = document.getElementById('previewBackground');
	var paramBgValue = document.getElementById('previewColor').color;
	var paramPosChanged = document.getElementById('positionChanged');
	var paramPosX = document.getElementById('positionX');
	var paramPosY = document.getElementById('positionY');
	
	
	var paramUrl =  "&text="+urlencode(paramText.value)+
					"&font="+paramFont.value+
					"&color="+paramColor.value+
					"&fsize="+paramSize.value+
					"&bgs="+paramBgSelected.value+
					"&bgv="+paramBgValue+
					"&pc="+paramPosChanged.value+
					"&px="+paramPosX.value+
					"&py="+paramPosY.value;

	
	$.ajax({
		type: "GET",
		url: "tools.php?tool=social"+paramUrl,
		success: function(html){
			$("#socialSharing").html(html);
		}
	});
	
}


/********************************************************
*
* Center image
*
*********************************************************/
function centerImage(){

	$("#positionChanged").val(0);

	var centerX = Math.round((canvasSizeWidth/2) - (previewWidth/2));
	var centerY = Math.round((canvasSizeHeight/2) - (previewHeight/2));
	
	$("#draggable").css({left: centerX, top: centerY});
	
	//alert("SIZE is "+ previewWidth +" X " + previewHeight);
}


/********************************************************
*
* Set image position
*
*********************************************************/
function setPosition(a_x, a_y){
	$("#draggable").css({left: a_x, top: a_y});
}


/********************************************************
*
* Set image position
*
*********************************************************/
function updatePositions(){
	var previewPosition = $("#draggable").position();
	var previewLeft = previewPosition.left;
	var previewTop = previewPosition.top;
	
	$("#positionChanged").val(1);
	$("#positionX").val(previewLeft);
	$("#positionY").val(previewTop);	
	
	getIcons();
}


/********************************************************
*
* Update decal sizes
*
*********************************************************/
function updateDecalSizes(){
	var textLength = $("#text").val().length;
	
	$.ajax({
		type: "GET",
		url: "tools.php?tool=changeSize&length=" + textLength,
		success: function(html){
			$("#decalSizes").html(html);
		}
	});
}



/********************************************************
*
* Validate create section
*
*********************************************************/
function validateCreate(){
	
	var sizeValue = document.getElementById('size').value;;
	var qtyValue = $("#qty").val();
	var error = "";

	
	if(qtyValue < 1 || !numberOnly(qtyValue)) {
		error += "-Quantity must be at least 1.\n";
		$("#qty").val(1);
	}
	
	if(sizeValue == -1){
		error += "-Please select a size.\n";	
		$("#sizeText").css('color', '#FF0000');
		$("#sizeText").css('fontWeight', 'bold');
	}
	
	if(error != ""){
		alert(error);
		return false;
	}else{
		return true;
	}
	
}


/********************************************************
*
* Update font size
* a_type can be plus or minus
*
*********************************************************/
function updateSize(a_type){
	
	var currentSize = parseInt($("#fsize").val());
	
	if(a_type == 'plus'){
		if((currentSize+5) <= 100)
			$("#fsize").val(currentSize+5);
	}
	
	if(a_type == 'minus'){
		if((currentSize-5) >= 5)
			$("#fsize").val(currentSize-5);
	}
	
	getImage();
}



/********************************************************
*
* Show enter your text tip tool 
*
*********************************************************/
function showTip(){
	var decalText = $("#text").offset();
	var tooltipLeft = decalText.left + 100;
	var tooltipTop = decalText.top - 74;
	
	$("#createTooltip").fadeIn(400);
	
	$("#createTooltip").css({left: tooltipLeft, top: tooltipTop});
}


/********************************************************
*
* Show a new tip
*
*********************************************************/
function showNewTip(a_id){
	
	var text = "";
	
	switch(a_id){
		case 1:
			text = "Only the text will come as a decal. The background is only for the preview.";
		break;
		
		case 2:
			text = "You can move your text! Hold the mouse left button over your text.";
		break;
	}
	
	$("#tips").html(text);
}