// setup display area details
var viewMaxWidth = 400;
var viewMaxHeight =  278;
var viewWidthRatio =  0;
var viewHeightRatio =  0;
var viewRatio =  0;
var viewMovieWidth = 0;
var viewMovieHeight = 0;
var viewMovieX = 0;
var viewMovieY = 0;

var railHeight = 50;

var bladeAngle = 0.65;
var bladeEnd = 0.3;
var bladeOverLap = 0.0;

var bladeCount = 0;
var bladeSize = 0;

var tapeWidth = 40;
var tapeinset = 150;
var tapemax = 600;

var tiltPosition = 30;
var pullPosition = 60;

var blindCanvas;

var callDrawCanvas = woodenblindsDrawCanvas;

function woodenblindsDrawCanvas(blindWidth,blindHeight,size,colour,tapeColour,options) {

	blindCanvas = $('drawblind').getContext('2d');

	blindCanvas.save();
	blindCanvas.clearRect(0,0,400,280);

	var tapemax = 600;

	var colourValue = "#" + colour;
	var tapeColourValue = '';
	if(tapeColour == 'Strings'){
		tapeColourValue = tapeColour;
	}
	else {
		tapeColourValue = "#" + tapeColour;
	}
	setupViewWB(blindWidth,blindHeight,colourValue);

	bladeSize = size;

// OPTIONS
	var pullCord,tilt;
	var optionsArray = options.evalJSON();
	for (var key in optionsArray) {
		if(optionsArray[key].option == 'pullcord') {
			pullCord = optionsArray[key].value;
		}
		if(optionsArray[key].option == 'tiltcontrol') {
			tilt = optionsArray[key].value;
		}
	}


	bladeCount = Math.floor((blindHeight - railHeight) / (bladeSize -(bladeSize * bladeOverLap)));

	var pullPos;

	for(var count = 0; count < bladeCount; count++){
		drawBladeWB(count,1,colourValue);
	}

	if(blindWidth < 450){
		tapeinset = 112.5;
	}
	else {
		tapeinset = 150;
	}

	drawstringTapesWB(tapeinset,colourValue,tapeColourValue);
	drawstringTapesWB(blindWidth - tapeinset,colourValue,tapeColourValue);

	var tapeCount = Math.floor((blindWidth - (tapeinset * 2)) / tapemax);

	var tapeGap = (blindWidth - (tapeinset * 2)) / (tapeCount +1);

	for(count = 0; count <= tapeCount; count++){

		drawstringTapesWB(tapeinset + (tapeGap * count),colourValue,tapeColourValue);
	}

	if(pullCord == "left"){
		pullPos = pullPosition * viewRatio;
		drawPullCordWB(pullPos,colourValue);	
	}
	else {
		pullPos = (blindWidth - pullPosition) * viewRatio;
		drawPullCordWB(pullPos,colourValue);
	}

	switch (tilt){
		case "cordleft":
			pullPos = tiltPosition * viewRatio;
			drawTiltCordWB(pullPos,colourValue);
			break;
		case "cordright":
		default:
			pullPos = (blindWidth - tiltPosition) * viewRatio;
			drawTiltCordWB(pullPos,colourValue);
			break;
		case "rodleft":
			pullPos = tiltPosition * viewRatio;
			drawTiltWandWB(pullPos,colourValue);
			break;
		case "rodright":
			pullPos = (blindWidth - tiltPosition) * viewRatio;
			drawTiltWandWB(pullPos,colourValue);
			break;
		case "remote":
	}

	blindCanvas.restore();
	return;
}

function setupViewWB(width,height,cValue) {

	viewWidthRatio = viewMaxWidth / width;
	viewHeightRatio = viewMaxHeight / height;

	if(viewWidthRatio < viewHeightRatio) {
		viewRatio = viewWidthRatio;
	}
	else {
		viewRatio = viewHeightRatio;
	}

	viewMovieWidth = width * viewRatio;
	viewMovieHeight = height * viewRatio;

	viewMovieX = (viewMaxWidth - viewMovieWidth) / 2;
	viewMovieY = (viewMaxHeight - viewMovieHeight) / 2;

	blindCanvas.translate(viewMovieX,viewMovieY);

	blindCanvas.strokeStyle = '#FFFFFF';
	blindCanvas.lineWeight = 0.5;
	blindCanvas.fillStyle = '#FFFFFF';

	blindCanvas.fillRect(0, 0, viewMovieWidth, viewMovieHeight);
	blindCanvas.strokeRect(0, 0, viewMovieWidth, viewMovieHeight);

	blindCanvas.strokeStyle = '#333333';
	blindCanvas.fillStyle = cValue;
	blindCanvas.fillRect(0, 0, viewMovieWidth, (railHeight * viewRatio));
	blindCanvas.strokeRect(0, 0, viewMovieWidth, (railHeight * viewRatio));

	return;

}

function drawBladeWB(pos,holes,cValue) {

	var bladeSizeArea = (bladeSize -(bladeSize * bladeOverLap)) * viewRatio;
	var bladeSizeView = ((bladeSize -(bladeSize * bladeOverLap)) * bladeAngle) * viewRatio;
	var bladeOffset = ((bladeSize * (1 - bladeAngle)) / 2) * viewRatio;
	var bladeEndView = (bladeSize * bladeEnd) * viewRatio;

	var bladex = (railHeight * viewRatio) + (pos * bladeSizeArea);

	blindCanvas.strokeStyle = '#333333';
	blindCanvas.fillStyle = cValue;

	blindCanvas.beginPath();
	blindCanvas.moveTo(0, bladex + bladeOffset);
	blindCanvas.lineTo(0 + bladeEndView, bladex + bladeSizeView + bladeOffset);
	blindCanvas.lineTo(viewMovieWidth - bladeEndView, bladex + bladeSizeView + bladeOffset);
	blindCanvas.lineTo(viewMovieWidth, bladex + bladeOffset);
	blindCanvas.fill();

	blindCanvas.beginPath();
	blindCanvas.moveTo(0 + bladeEndView, bladex + bladeSizeView + bladeOffset);
	blindCanvas.lineTo(0, bladex + bladeOffset);
	blindCanvas.lineTo(viewMovieWidth, bladex + bladeOffset);
	blindCanvas.lineTo(viewMovieWidth - bladeEndView, bladex + bladeSizeView + bladeOffset);
	blindCanvas.stroke();

	blindCanvas.strokeStyle = '#555555';
	blindCanvas.beginPath();
	blindCanvas.moveTo(0, bladex + bladeOffset);
	blindCanvas.lineTo(viewMovieWidth, bladex + bladeOffset);
	blindCanvas.stroke();

}

function drawstringTapesWB(pos,cValue,tValue) {

	var toppoint = railHeight * viewRatio;
	var bottompoint = toppoint + (((bladeCount * (bladeSize - (bladeSize * bladeOverLap))) - (bladeSize * bladeOverLap)) * viewRatio) - 2;
	var centrepoint = pos * viewRatio;

	if(tValue == "Strings"){

		blindCanvas.strokeStyle = cValue;
		blindCanvas.beginPath();
		blindCanvas.moveTo(centrepoint, toppoint);
		blindCanvas.lineTo(centrepoint, bottompoint);
		blindCanvas.stroke();
	}
	else {

		var tapeoffset = (tapeWidth * viewRatio) / 2;

		blindCanvas.strokeStyle = '#333333';
		blindCanvas.fillStyle = tValue;

		blindCanvas.beginPath();
		blindCanvas.moveTo(centrepoint - tapeoffset,toppoint);
		blindCanvas.lineTo(centrepoint - tapeoffset,bottompoint);
		blindCanvas.lineTo(centrepoint + tapeoffset,bottompoint);
		blindCanvas.lineTo(centrepoint + tapeoffset,toppoint);
		blindCanvas.fill();

	}
}

function drawPullCordWB(pos,cValue) {

	var toppoint = railHeight * viewRatio;
	var bottompoint = toppoint + (((bladeCount * (bladeSize - (bladeSize * bladeOverLap))) * viewRatio) * 0.6);

	blindCanvas.strokeStyle = cValue;
	blindCanvas.fillStyle = '#FFFFFF';
	blindCanvas.beginPath();
	blindCanvas.moveTo(pos, toppoint);
	blindCanvas.lineTo(pos, bottompoint);
	blindCanvas.stroke();
	blindCanvas.beginPath();
	blindCanvas.moveTo(pos, bottompoint);
	blindCanvas.lineTo(pos - (8 * viewRatio), bottompoint);
	blindCanvas.lineTo(pos - (12 * viewRatio), bottompoint + (30 *  viewRatio));
	blindCanvas.lineTo(pos + (12 * viewRatio), bottompoint + (30 *  viewRatio));
	blindCanvas.lineTo(pos + (8 * viewRatio), bottompoint);
	blindCanvas.lineTo(pos, bottompoint);
	blindCanvas.fill();

	blindCanvas.strokeStyle = '#000000';
	blindCanvas.beginPath();
	blindCanvas.moveTo(pos, bottompoint);
	blindCanvas.lineTo(pos - (8 * viewRatio), bottompoint);
	blindCanvas.lineTo(pos - (12 * viewRatio), bottompoint + (30 *  viewRatio));
	blindCanvas.lineTo(pos + (12 * viewRatio), bottompoint + (30 *  viewRatio));
	blindCanvas.lineTo(pos + (8 * viewRatio), bottompoint);
	blindCanvas.lineTo(pos, bottompoint);
	blindCanvas.stroke();
}

function drawTiltCordWB(posValue,cValue) {

	var toppoint = railHeight * viewRatio;
	var bottompoint = toppoint + (((bladeCount * (bladeSize - (bladeSize * bladeOverLap))) * viewRatio) * 0.6);

	blindCanvas.strokeStyle = cValue;

	blindCanvas.beginPath();
	blindCanvas.moveTo(posValue - (8 * viewRatio), toppoint);
	blindCanvas.lineTo(posValue - (8 * viewRatio), bottompoint);
	blindCanvas.stroke();

	blindCanvas.beginPath();
	blindCanvas.moveTo(posValue + (8 * viewRatio), toppoint);
	blindCanvas.lineTo(posValue + (8 * viewRatio), bottompoint);
	blindCanvas.stroke();

	blindCanvas.fillStyle = '#FFFFFF';
	blindCanvas.strokeStyle = '#000000';
	blindCanvas.beginPath();
	blindCanvas.moveTo(posValue - (12 * viewRatio), bottompoint);
	blindCanvas.lineTo(posValue - (12 * viewRatio), bottompoint + (60 *  viewRatio));
	blindCanvas.lineTo(posValue + (12 * viewRatio), bottompoint + (60 *  viewRatio));
	blindCanvas.lineTo(posValue + (12 * viewRatio), bottompoint);
	blindCanvas.lineTo(posValue - (12 * viewRatio), bottompoint);
	blindCanvas.fill();

	blindCanvas.beginPath();
	blindCanvas.moveTo(posValue - (12 * viewRatio), bottompoint);
	blindCanvas.lineTo(posValue - (12 * viewRatio), bottompoint + (60 *  viewRatio));
	blindCanvas.lineTo(posValue + (12 * viewRatio), bottompoint + (60 *  viewRatio));
	blindCanvas.lineTo(posValue + (12 * viewRatio), bottompoint);
	blindCanvas.lineTo(posValue - (12 * viewRatio), bottompoint);
	blindCanvas.stroke();
}

function drawTiltWandWB(posValue) {

	var toppoint = railHeight * viewRatio;
	var bottompoint = toppoint + (((bladeCount * (bladeSize - (bladeSize * bladeOverLap))) * viewRatio) * 0.6);

	blindCanvas.strokeStyle = '#000000';
	blindCanvas.fillStyle = '#FFFFFF';

	blindCanvas.beginPath();
	blindCanvas.moveTo(posValue - (8 * viewRatio), toppoint);
	blindCanvas.lineTo(posValue - (8 * viewRatio), bottompoint);
	blindCanvas.lineTo(posValue + (8 * viewRatio), bottompoint);
	blindCanvas.lineTo(posValue + (8 * viewRatio), toppoint);
	blindCanvas.lineTo(posValue - (8 * viewRatio), toppoint);
	blindCanvas.fill();

	blindCanvas.beginPath();
	blindCanvas.moveTo(posValue - (8 * viewRatio), toppoint);
	blindCanvas.lineTo(posValue - (8 * viewRatio), bottompoint);
	blindCanvas.lineTo(posValue + (8 * viewRatio), bottompoint);
	blindCanvas.lineTo(posValue + (8 * viewRatio), toppoint);
	blindCanvas.lineTo(posValue - (8 * viewRatio), toppoint);
	blindCanvas.stroke();

	blindCanvas.beginPath();
	blindCanvas.moveTo(posValue - (12 * viewRatio), bottompoint);
	blindCanvas.lineTo(posValue - (12 * viewRatio), bottompoint + (60 *  viewRatio));
	blindCanvas.lineTo(posValue + (12 * viewRatio), bottompoint + (60 *  viewRatio));
	blindCanvas.lineTo(posValue + (12 * viewRatio), bottompoint);
	blindCanvas.lineTo(posValue - (12 * viewRatio), bottompoint);
	blindCanvas.fill();

	blindCanvas.beginPath();
	blindCanvas.moveTo(posValue - (8 * viewRatio), toppoint);
	blindCanvas.lineTo(posValue - (8 * viewRatio), bottompoint);
	blindCanvas.lineTo(posValue + (8 * viewRatio), bottompoint);
	blindCanvas.lineTo(posValue + (8 * viewRatio), toppoint);
	blindCanvas.lineTo(posValue - (8 * viewRatio), toppoint);
	blindCanvas.stroke();

}
if(dynamicLoad) {
	typeDisplayPhase2();
}