Hanover Project

by mquickel

HTML

<!DOCTYPE html>
<head>
<title>Hanover Architectural Products - Patio Builder</title>
<link rel="stylesheet" type="text/css" href="HanoverCSS.css">
<script type="text/javascript" src="Hanover.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    	<script>
    		$(document).bind ("mobileinit", function ()
    		{
        	// alert ("mobileinit");
    		});
  	</script>  
	<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>

<body>
<div id="page-wrapper">

    <h1>Hanover Architectural Products</h1>
    <div>
      Choose an image to begin your build. 
      <input type="file" id="fileInput">
    </div>
    <div id="container" data-role="page">
		<div id="sketch" data-role="content">
			<canvas id="paint" style="z-index: 1; position:absolute;" height="768px" width="1024px"></canvas> 
			<div id="image" style="z-index: 0; position:absolute;" height="768px" width="1024px"></div> 
		</div>
	
	</div>
</div>

  <script src="Hanover.js"></script>
</body>
</html>

CSS

#image {
	width:500px;
	height:500px;

}
#container {
	height:768px;
	display:block
	float:left;
	background-color:white;
	position:relative;
	cursor:pointer;
	}
#paint {
	border: 10px solid black;
	}

JavaScript

// File Loader for Background Image
window.onload = function() {
    var fileInput = document.getElementById('fileInput');
    var fileDisplayArea = document.getElementById('image');

    fileInput.addEventListener('change', function(e) {
      var file = fileInput.files[0];
	  var imageType = /image.*/;

	if (file.type.match(imageType)) {
  		var reader = new FileReader();

  		reader.onload = function(e) {
    	fileDisplayArea.innerHTML = "";

    	// Create a new image.
    	var img = new Image();
    	// Set the img src property using the data URL.
    	img.src = reader.result;

    	// Add the image to the page.
    	fileDisplayArea.appendChild(img);
  		}

  		reader.readAsDataURL(file); 
		} 
	
	else {
  	fileDisplayArea.innerHTML = "File not supported!";
	}
    });
}

	document.getElementById( "container" ).onmousedown = function(event){
    event.preventDefault();
	}
	
		
// Paint Program
    var canvas = document.getElementById('paint'),
    ctx = canvas.getContext('2d'),
	rect = {},
	drag = false;
	
	function init() {
	canvas.addEventListener('mousedown', mouseDown, false);
	canvas.addEventListener('mouseup', mouseUp, false);
	canvas.addEventListener('mousemove', mouseMove, false);
	}
	
	function mouseDown(e) {
	rect.startX = e.pageX - this.offsetLeft;
	rect.startY = e.pageY - this.offsetTop;
	drag = true;
	}
	
	function mouseUp() {
	drag = false;
	}
	
	function mouseMove(e) {
	if (drag) {
    rect.w = (e.pageX - this.offsetLeft) - rect.startX;
    rect.h = (e.pageY - this.offsetTop) - rect.startY ;
    ctx.clearRect(0,0,canvas.width,canvas.height);
    draw();
	}}
	
	function draw() {
	ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
	var img = document.createElement('img')
	img.src = "http://cgtextures.com/thumbnails/textures/brick/Blocks/BrickLargeBlocks0026_1_thumbhuge.jpg"
	var pat=ctx.createPattern(img,"repeat")
	ctx.fillStyle=pat;
	}

	init();