///////////////////////////////////////////////////////////////////////////////////////////
//
// This code is copyrighted by Like Sew Websites.  Unauthorized use is strictly prohibited. 
//
///////////////////////////////////////////////////////////////////////////////////////////

var squares = [];
var borderFabric = 0;
var quilt = '';
var numBlocks = 1;
var rows = 3;
var cols = 3;
var blockWidth = 12;
var borderWidth = 4;
var squareWidth = 30;
var borderPixelWidth = Math.floor((borderWidth/blockWidth)*(4*squareWidth));
var quiltCanvas = null;
var blockCanvas = null;
var top = 0;
var left = 0;
var direction = 0;
var rotation = 0;
var squareIndex = 0;
var squareNum = 0;
var rotationOffset = 0;
var rotationOffsetDirection = 1;
var bg1Offset = 0;
var bg2Offset = 0;
var bg1Url = '';
var bg2Url = '';


function rand( n ) {
	return ( Math.floor ( Math.random ( ) * n ) );
}

function chooseManufacturer(in_manufacturerId) {
	$("#chooseFabricBody").load('manufacturer-fabrics.php?manufacturerId=' + in_manufacturerId);
}

function showManufacturers() {
	$("#chooseFabricBody").load('manufacturers.php');
}

function handleQuiltCanvasClick(x,y) {

	var blockCanvas = $("#blockCanvas");
	var quiltCanvas = $("#quiltCanvas");
	
	if (x < blockCanvas.offset().left - quiltCanvas.offset().left || 
		x > blockCanvas.offset().left - quiltCanvas.offset().left + blockCanvas.width() ||
		y < blockCanvas.offset().top - quiltCanvas.offset().top || 
		y > blockCanvas.offset().top - quiltCanvas.offset().top + blockCanvas.height() ) {
		
		if ($("#newFabric").val() != 'Rotate') {
			borderFabric = $("#newFabric").val();
			drawCanvas(30);
		}
	}
	else {
		x = x - (blockCanvas.offset().left - quiltCanvas.offset().left - 1);
		y = y - (blockCanvas.offset().top - quiltCanvas.offset().top - 1);
		handleBlockCanvasClick(x,y);
	}

}

function selectNewFabric(fabricIndex) {
	$(".newFabric").css({'border-left': '1px solid #fff', 'border-right': '1px solid #fff', 'border-top': '1px solid #fff', 'border-bottom': '1px solid #fff'});
	$("#newFabric" + fabricIndex).css({'border-left': '1px solid #f00', 'border-right': '1px solid #f00', 'border-top': '1px solid #f00', 'border-bottom': '1px solid #f00'});
	$("#newFabric").val(fabricIndex);
}

function handleBlockCanvasClick(x,y) {
	var blockWidth = squareWidth * 4;
	
	var blockCol = Math.floor(x / blockWidth);
	var blockRow = Math.floor(y / blockWidth);
	
	var blockIndex = (blockCol + (blockRow % 2)) % 2;
	if ($("#numBlocks").val() == 1) blockIndex = 0;
	
	// reduce x and y to values within the block that was clicked
	x = x % blockWidth;
	y = y % blockWidth;
	
	// rotate x and y to the upper left quadrant of the block
	if (x > blockWidth / 2 && y <= blockWidth / 2) { // Upper-right quadrant
		var tempX = x;
		x = y;
		y = blockWidth - tempX;
	}
	else if (x <= blockWidth / 2 && y > blockWidth / 2) { // Lower-left quadrant
		var tempX = x;
		x = blockWidth - y;
		y = tempX;
	}
	else if (x > blockWidth / 2 && y > blockWidth / 2) { // Lower-right quadrant
		x = blockWidth - x;
		y = blockWidth - y;
	}
	
	// figure out which patch it is in
	patchCol = Math.floor(x / squareWidth);
	patchRow = Math.floor(y / squareWidth);
	var squareIndex = patchCol + (patchRow*2);
	
	if ($("#newFabric").val() == 'Rotate') {
		squares[blockIndex][squareIndex]['direction'] = (parseInt(squares[blockIndex][squareIndex]['direction']) + 1) % 2;
		if (squares[blockIndex][squareIndex]['direction'] == 0) {
			var tempColor = squares[blockIndex][squareIndex]['color1'];
			squares[blockIndex][squareIndex]['color1'] = squares[blockIndex][squareIndex]['color2'];
			squares[blockIndex][squareIndex]['color2'] = tempColor;
		}
	}
	else {
		// get the slant of the patch and figure out which triangle it is in
		x = x % squareWidth;
		y = y % squareWidth;
		if (squares[blockIndex][squareIndex]['direction'] == 1) {
			if (x+y <= squareWidth) {
				squares[blockIndex][squareIndex]['color1'] = $("#newFabric").val();
			}
			else {
				squares[blockIndex][squareIndex]['color2'] = $("#newFabric").val();
			}
		}
		else {
			if (x+(squareWidth-y) <= squareWidth) {
				squares[blockIndex][squareIndex]['color1'] = $("#newFabric").val();
			}
			else {
				squares[blockIndex][squareIndex]['color2'] = $("#newFabric").val();
			}
		}
	}
	drawCanvas(30);
	
	//alert(x + ', ' + y);
	//alert(patchCol + ', ' + patchRow);
}

function generateSquares() {

	borderFabric = rand(3);

	squares[0] = [];

	squares[0][0] = [];
	squares[0][0]['direction'] = rand(2);
	squares[0][0]['color1'] = rand(3);
	squares[0][0]['color2'] = rand(3);
	
	squares[0][1] = [];
	squares[0][1]['direction'] = rand(2);
	squares[0][1]['color1'] = rand(3);
	squares[0][1]['color2'] = rand(3);
	
	squares[0][2] = [];
	squares[0][2]['direction'] = rand(2);
	squares[0][2]['color1'] = rand(3);
	squares[0][2]['color2'] = rand(3);
	
	squares[0][3] = [];
	squares[0][3]['direction'] = rand(2);
	squares[0][3]['color1'] = rand(3);
	squares[0][3]['color2'] = rand(3);

	// Make sure we don't leave out any fabric	
	fabricUses = [0,0,0];
	for (var i=0; i<4; i++) {
		fabricUses[squares[0][i]['color1']]++;
		fabricUses[squares[0][i]['color2']]++;
	}
	for (i=0; i<3; i++) {
		if (fabricUses[i] == 0) {
			squares[0][2]['color2'] = 0;
			squares[0][3]['color1'] = 1;
			squares[0][3]['color2'] = 2;
		}
	}

	squares[1] = [];
	
	squares[1][0] = [];
	squares[1][0]['direction'] = rand(2);
	squares[1][0]['color1'] = rand(3);
	squares[1][0]['color2'] = rand(3);
	
	squares[1][1] = [];
	squares[1][1]['direction'] = rand(2);
	squares[1][1]['color1'] = rand(3);
	squares[1][1]['color2'] = rand(3);
	
	squares[1][2] = [];
	squares[1][2]['direction'] = rand(2);
	squares[1][2]['color1'] = rand(3);
	squares[1][2]['color2'] = rand(3);
	
	squares[1][3] = [];
	squares[1][3]['direction'] = rand(2);
	squares[1][3]['color1'] = rand(3);
	squares[1][3]['color2'] = rand(3);
	
	drawCanvas(30);
}

function createSquare(in_squareIndex, in_slant_1, in_slant_2, in_slant_3, in_slant_4, in_color_1_1, in_color_1_2, in_color_2_1, in_color_2_2, in_color_3_1, in_color_3_2, in_color_4_1, in_color_4_2) {

	squares[in_squareIndex] = [];
	
	squares[in_squareIndex][0] = [];
	squares[in_squareIndex][0]['direction'] = in_slant_1;
	squares[in_squareIndex][0]['color1'] = in_color_1_1;
	squares[in_squareIndex][0]['color2'] = in_color_1_2;
	
	squares[in_squareIndex][1] = [];
	squares[in_squareIndex][1]['direction'] = in_slant_2;
	squares[in_squareIndex][1]['color1'] = in_color_2_1;
	squares[in_squareIndex][1]['color2'] = in_color_2_2;
	
	squares[in_squareIndex][2] = [];
	squares[in_squareIndex][2]['direction'] = in_slant_3;
	squares[in_squareIndex][2]['color1'] = in_color_3_1;
	squares[in_squareIndex][2]['color2'] = in_color_3_2;
	
	squares[in_squareIndex][3] = [];
	squares[in_squareIndex][3]['direction'] = in_slant_4;
	squares[in_squareIndex][3]['color1'] = in_color_4_1;
	squares[in_squareIndex][3]['color2'] = in_color_4_2;
	
}


function drawCanvas(in_squareWidth, in_editable) {

	in_editable = (typeof(in_editable) != 'undefined' ? in_editable : true);

	var quilt = '';
	var numBlocks = $("#numBlocks").val();
	var rows = $("#numRows").val();
	var cols = $("#numCols").val();
	var blockWidth = $("#blockWidth").val();
	var borderWidth = $("#borderWidth").val();
	var squareWidth = in_squareWidth;
	var borderPixelWidth = Math.floor((borderWidth/blockWidth)*(4*squareWidth));
	var quiltCanvas = $("#quiltCanvas");
	var top = 0;
	var left = 0;
	var direction = 0;
	var rotation = 0;
	var squareIndex = 0;
	var squareNum = 0;
	var rotationOffset = 0;
	var rotationOffsetDirection = 1;
	var bg1Offset = 0;
	var bg2Offset = 0;
	var bg1Url = '';
	var bg2Url = '';
	
	//var fabrics = [];
	
	//fabrics[0] = '/custom/quilt-pattern-playground/fabric-1';
	//fabrics[1] = '/custom/quilt-pattern-playground/fabric-2';
	//fabrics[2] = '/custom/quilt-pattern-playground/fabric-3';
	
	for (var i=0; i<rows; i++) {
		for (var j=0; j<cols; j++) {
			
			squareNum = 0;
			if (numBlocks == 2 && ((i%2==0 && j%2==1) || (i%2==1 && j%2==0))) squareNum = 1;
			
			for (var m=0; m<2; m++) {
				for (var n=0; n<2; n++) {

					if (m==0 && n==0) {
						rotation = 0;
					}
					else if (m==0 && n==1) {
						rotation = 90;
					}
					else if (m==1 && n==0) {
						rotation = 270;
					}
					else if (m==1 && n==1) {
						rotation = 180;
					}
					
					for (var p=0; p<2; p++) {
						for (var q=0; q<2; q++) {
					
							top = (i*squareWidth*4) + (m*squareWidth*2) + (p*squareWidth);
							left = (j*squareWidth*4) + (n*squareWidth*2) + (q*squareWidth);
							
							if (p==0 && q==0) { // Upper Left
								squareIndex = 0;
								if (rotation == 90 || rotation == 180) left += squareWidth;
								if (rotation == 180 || rotation == 270) top += squareWidth;
							}
							else if (p==0 && q==1) { // Upper Right
								squareIndex = 1;
								if (rotation == 180 || rotation == 270) left -= squareWidth;
								if (rotation == 90 || rotation == 180) top += squareWidth;
							}
							else if (p==1 && q==0) { // Lower Left
								squareIndex = 2;
								if (rotation == 180 || rotation == 270) left += squareWidth;
								if (rotation == 90 || rotation == 180) top -= squareWidth;
							}
							else if (p==1 && q==1) { // Lower Right
								squareIndex = 3;
								if (rotation == 90 || rotation == 180) left -= squareWidth;
								if (rotation == 180 || rotation == 270) top -= squareWidth;
							}
							
							direction = squares[squareNum][squareIndex]['direction'];
							rotationOffsetDirection = 0;
							if (rotation == 90 || rotation == 270) {
								if (direction == 1 && rotation == 90) rotationOffsetDirection = squareWidth;
								if (direction == 1 && rotation == 270) rotationOffsetDirection = -squareWidth;
								direction += 1;
							}
							
							if (squares[squareNum][squareIndex]['color1'] <= squares[squareNum][squareIndex]['color2']) {
								rotationOffset = 0;
								if (rotation == 90 || rotation == 270) rotationOffset += rotationOffsetDirection;
								if (rotation >= 180) rotationOffset += squareWidth;
								bg1Offset = 0;
								bg2Offset = squareWidth + rotationOffset + ((direction % 2) * squareWidth * 2);
								bg1Url = fabrics[squares[squareNum][squareIndex]['color1']]['img'] + (squareWidth == 15 ? '-small' : '');
								bg2Url = fabrics[squares[squareNum][squareIndex]['color2']]['img'] + (squareWidth == 15 ? '-small' : '');
							}
							else {
								rotationOffset = 0;
								if (rotation == 90 || rotation == 270) rotationOffset += rotationOffsetDirection;
								if (rotation >= 180) rotationOffset += squareWidth;
								bg1Offset = 0;
								bg2Offset = (squareWidth * 2) - rotationOffset + ((direction % 2) * squareWidth * 2);
								bg1Url = fabrics[squares[squareNum][squareIndex]['color2']]['img'] + (squareWidth == 15 ? '-small' : '');
								bg2Url = fabrics[squares[squareNum][squareIndex]['color1']]['img'] + (squareWidth == 15 ? '-small' : '');
							}

							if (in_editable) {
								quilt += '<div ' + (in_editable == true ? 'class=mouseOverBorder' : '') + ' style="position:absolute; top:' + top + 'px; left:' + left + 'px; width:' + squareWidth + 'px; height:' + squareWidth + 'px; background:url(' + bg1Url + '.png); background-position: -' + bg1Offset + 'px 0px;"></div>';
								quilt += '<div ' + (in_editable == true ? 'class=mouseOverBorder' : '') + ' style="position:absolute; top:' + top + 'px; left:' + left + 'px; width:' + squareWidth + 'px; height:' + squareWidth + 'px; background:url(' + bg2Url + '.png); background-position: -' + bg2Offset + 'px 0px;"></div>';
							}
							else {
								quilt += '<div ' + (in_editable == true ? 'class=mouseOverBorder' : '') + ' style="position:absolute; top:' + top + 'px; left:' + left + 'px; width:' + squareWidth + 'px; height:' + squareWidth + 'px;">';
								quilt += 	'<div style="position:relative; width:' + squareWidth + 'px; height:' + squareWidth + 'px; left:0px;"><img height="' + squareWidth + '" width="' + (5 * squareWidth) + '" border="0" src="' + bg1Url + '.png" style="position:absolute; left:-' + bg1Offset + 'px; clip: rect(0px ' + (bg1Offset + squareWidth) + 'px 30px ' + bg1Offset + 'px);"></div>';
								quilt += '</div>';
								quilt += '<div ' + (in_editable == true ? 'class=mouseOverBorder' : '') + ' style="position:absolute; top:' + top + 'px; left:' + left + 'px; width:' + squareWidth + 'px; height:' + squareWidth + 'px;">';
								quilt += 	'<div style="position:relative; width:' + squareWidth + 'px; height:' + squareWidth + 'px; left:0px;"><img height="' + squareWidth + '" width="' + (5 * squareWidth) + '" border="0" src="' + bg2Url + '.png" style="position:absolute; left:-' + bg2Offset + 'px; clip: rect(0px ' + (bg2Offset + squareWidth) + 'px 30px ' + bg2Offset + 'px);"></div>';
								quilt += '</div>';
							}

						}
					}
				}
			}
		}
	}
	
	var quiltCanvasWidth = (squareWidth*cols*4)+(2*borderPixelWidth);
	var quiltCanvasHeight = (squareWidth*rows*4)+(2*borderPixelWidth);
	var quiltCanvasUrl = fabrics[borderFabric]['img'] + '-bg.png';
	
	quiltCanvas.width(quiltCanvasWidth);
	quiltCanvas.height(quiltCanvasHeight);
	
	if (in_editable == true) {
		quiltCanvas.css("background", 'url(' + quiltCanvasUrl + ')');
	}
	else { // for printing
		var canvasHTML = '';
		var canvasCols = Math.ceil(quiltCanvasWidth / squareWidth);
		var canvasRows = Math.ceil(quiltCanvasHeight / squareWidth);
		
		for (var i=0; i<canvasCols; i++) {
			for (var j=0; j<canvasRows; j++) {
				canvasHTML += '<img width="' + squareWidth + '" height="' + squareWidth + '" border="0" src="' + quiltCanvasUrl + '" style="position:absolute; top:' + (squareWidth * j) + 'px; left:' + (squareWidth * i) + 'px;">';
			}
		}
		
		canvasHTML += '<div id=blockCanvas style="position:absolute; width:0px; height:0px;"></div>';
		canvasHTML += '<div id=loadingMessage style="display:none; position:absolute; z-index:2500; width:100px; height:100px; border: 1px solid red; background:white;"></div>';
		
		quiltCanvas.html(canvasHTML);
		quiltCanvas.css("overflow", "hidden");
	}

	var blockCanvas = $("#blockCanvas");
	blockCanvas.css("left", borderPixelWidth);
	blockCanvas.css("top", borderPixelWidth);
	blockCanvas.width(squareWidth*cols*4);
	blockCanvas.height(squareWidth*rows*4);
	blockCanvas.html(quilt);
	
	$("#quiltSize").html(((blockWidth*rows)+(2*borderWidth)) + '" x ' + ((blockWidth*cols)+(2*borderWidth)) + '"');
	
	$(".mouseOverBorder").mouseover(function() {
		$(this).css({'width': '28px', 'height': '28px', 'border-left': '1px solid #f00', 'border-right': '1px solid #f00', 'border-top': '1px solid #f00', 'border-bottom': '1px solid #f00'});
	});

	$(".mouseOverBorder").mouseout(function() {
		$(this).css({'width': '30px', 'height': '30px', 'border-left': '0px', 'border-right': '0px', 'border-top': '0px', 'border-bottom': '0px'});
	});

}

function buildQuiltPatternId() {
	//alert('a');
	var str = '';
	
	str += '01'; // ID Type
	
	str += '-';
	
	str += (parseInt($("#numRows").val()) + 10);
	str += (parseInt($("#numCols").val()) + 10);
	str += (parseInt($("#borderWidth").val()) + 10);
	str += (parseInt($("#blockWidth").val()) + 10);
	str += (parseInt($("#numBlocks").val()) + 10);
	
	str += '-';

	// Block 0
	str += 'b';
	
	str += (parseInt(squares[0][0]['direction']) + 4); 
	str += (parseInt(squares[0][1]['direction']) + 7); 
	str += (parseInt(squares[0][2]['direction']) + 0); 
	str += (parseInt(squares[0][3]['direction']) + 3); 
	
	str += (parseInt(squares[0][0]['color1']) + 14); 
	str += (parseInt(squares[0][0]['color2']) + 55); 
	str += (parseInt(squares[0][1]['color1']) + 27); 
	str += (parseInt(squares[0][1]['color2']) + 31); 
	str += (parseInt(squares[0][2]['color1']) + 16); 
	str += (parseInt(squares[0][2]['color2']) + 12); 
	str += (parseInt(squares[0][3]['color1']) + 26); 
	str += (parseInt(squares[0][3]['color2']) + 36);

	// Block 1 
	str += 'b';

	str += (parseInt(squares[1][0]['direction']) + 4); 
	str += (parseInt(squares[1][1]['direction']) + 7); 
	str += (parseInt(squares[1][2]['direction']) + 0); 
	str += (parseInt(squares[1][3]['direction']) + 3); 
	
	str += (parseInt(squares[1][0]['color1']) + 14); 
	str += (parseInt(squares[1][0]['color2']) + 55); 
	str += (parseInt(squares[1][1]['color1']) + 27); 
	str += (parseInt(squares[1][1]['color2']) + 31); 
	str += (parseInt(squares[1][2]['color1']) + 16); 
	str += (parseInt(squares[1][2]['color2']) + 12); 
	str += (parseInt(squares[1][3]['color1']) + 26); 
	str += (parseInt(squares[1][3]['color2']) + 36); 

	str += '-';
	
	// Border Fabric
	str += 'b' + (parseInt(borderFabric) + 18);

	str += '-';
	
	// Fabric IDs
	str += 'f' + fabrics[0]['id'];
	str += 'f' + fabrics[1]['id'];
	str += 'f' + fabrics[2]['id'];
	
	//alert(str);
	return str;
}

function printPattern() {
	window.location = '/custom/quilt-pattern-playground/print-quilt-pattern.php?id=' + buildQuiltPatternId();
};