var CanvasRenderingTool = function(config, target){
	var events = new EventManager,
		context = target.getContext('2d'),
		adBrand = undefined,
		adWidth = undefined,
		adHeight = undefined,
		status = false,
		maxTextWidth = 188,
		clickItems = undefined,
		hoverItems = undefined,
		activeHover = [],
		dragFocus = undefined,
		dragStart = undefined,
		dragEnd = undefined,
		dragState = false,
		dragStateTypes = {
			'background' : true
		},
		fileInput = undefined,
		fileInputData = undefined,
		fileInputCallback = undefined,
		proxyURL = '//panda.meteora.us/proxy?url=',
		viewFrame = config.viewFrame,
		dataArray = undefined,
		frameActions = undefined;
	
	if(config) init();
	else console.error('Error, no config');
	
	this.getData = function(){
		return dataArray;
	};
	this.getImage = function(view){
		if(!view) return target.toDataURL('image/png');
		else {
			var currentViewframe = viewFrame,
				imageData = undefined;
				
			viewFrame = view;
			imageData = cycle(true);
			viewFrame = currentViewframe;
			return imageData;
		}
	};
	this.run = function(data){ if(status == true) run(data); else return false; };
	this.setView = function(view){ viewFrame = view; cycle(); };
	this.updateData = updateData;
	
	this.exit = exit;
	
	function init(){
		adWidth = target.width = config.width;
		adHeight = target.height = config.height;
		bindCanvas();
		fileInput = createFileInput();
		fileInput.onchange = function(e){ new FileToImageData(fileInput, fileInputCallback); };
		status = true;
	}
	
	function run(data, update){
		var imageCount = 0,
			loadCount = 0;
		
		for(var i=0, l=data.length; i<l; i++){
			var obj = data[i],
				type = obj.type;
			
			switch (type){
				case 'image':
					processImage(obj)
					break;
				case 'rect':
					processRect(obj)
					break;
				case 'roundedRect':
					processRoundedRect(obj)
					break;
				case 'fillPath':
					processPath(obj);
					break;
				case 'text':
					processText(obj)
					break;
				case 'postText':
					processPostContent(obj)
					break;
			}
			
		}
		
		if(!update){
			dataArray = data;
		}
		
		if(imageCount == 0) cycle();
		function processImage(obj){ 
			if(!obj.key){
				createCanvasImage(obj, callback, obj.scale); 
				imageCount++;
			}
			else checkKey(obj.key)
			
			function checkKey(key){
				switch (key){
					case 'background':
						processBackground(obj);
						break;
					case 'social':
						processSocial(obj);
						break;
				}
			}
		}
		function processPostContent(obj){ createPostContent(obj); }
		function processText(obj){ createText(obj); }
		function processRect(obj){ createRect(obj); }
		function processRoundedRect(obj){ createRoundedRect(obj); }
		function processPath(obj){ createPath(obj); }
		function processSocial(obj){ createSocialIcon(obj, callback); imageCount++; }
		function callback(){ loadCount++; if(imageCount == loadCount) setTimeout(cycle, 1); }		
	}
	
	function cycle(noPublish){
		var offStage = createOffstage(),
			offStageContext = offStage.getContext('2d'),
			cycleFrameActions = [];
			hoverItems = [];

		clearFrameActions();
		
		for(var i=0, l=dataArray.length; i<l; i++){
			var obj = dataArray[i],
				views = obj.views,
				frame = views[viewFrame];
			
			if(frame != undefined && isDefined(obj.img)){
				offStageContext.drawImage(obj.img, obj.x, obj.y);
				initFrameActions(frame, i);
			}
		}
		
		if(!noPublish){
			clearStage();
			updateStage(offStage);
		}
		else return offStage.toDataURL('image/png');
	}
	
	function initFrameActions(frame, i){
		var array = [];
		
		for(var key in frame){
			if(validateAction(key, i)) array.push(key, frame[key]);
		}
		
		function validateAction(key, i){
			if(key == 'adjustPosition'){
				dragFocus = dataArray[i];
				if(dragFocus.offsetX == undefined) dragFocus.offsetX = 0;
				if(dragFocus.offsetY == undefined) dragFocus.offsetY = 0;
			}
			else if (key == 'clickItem'){
				if(clickItems == undefined) clickItems = [];
				clickItems.push(dataArray[i]);
			}
			else if (key == 'hoverItem'){
				if(hoverItems == undefined) hoverItems = [];
				hoverItems.push(dataArray[i]);
			}
			return false; 
		}
	}
	
	function updateData(obj){
		var a = [];
		
		for(var k in obj){
			if(dataArray[k]){ 
				dataArray[k] = obj[k];	
				a.push(obj[k]);
			}
		}
		
		if(a.length > 0) run(a, true);	
	}
	function clearFrameActions(){ dragFocus = undefined; clickItems = undefined; }
	function clearStage(){ context.clearRect(0, 0, adWidth, adHeight); }
	function updateStage(img){ context.drawImage(img, 0, 0, adWidth, adHeight); }
	
	function createOffstage(){
		var offStage = document.createElement('canvas');
		
		offStage.width = adWidth;
		offStage.height = adHeight;

		return offStage;
	}	

	function createRect(obj){
		var rectCanvas = document.createElement('canvas'),
			rectContext = rectCanvas.getContext('2d'),
			width = obj.width,
			height = obj.height,
			padding = obj.padding ? obj.padding : [0,0,0,0],
			shadow = obj.shadow;
			
		rectCanvas.width = width + padding[1] + padding[3];
		rectCanvas.height = height + padding[0] + padding[2];
		
		if(shadow){
			rectContext.shadowOffsetX = shadow.offsetX;
			rectContext.shadowOffsetY = shadow.offsetY;
			rectContext.shadowBlur = shadow.blur;
			rectContext.shadowColor = shadow.color;
		}
		
		rectContext.fillStyle = obj.fill;
		rectContext.fillRect(padding[0], padding[3], width, height);
		obj.img = rectCanvas;
	}
	
	function createRoundedRect(obj){
		var rectCanvas = document.createElement('canvas'),
			rectContext = rectCanvas.getContext('2d'),
			width = obj.width,
			height = obj.height,
			padding = obj.padding ? obj.padding : [0,0,0,0],
			shadow = obj.shadow,
			stroke = obj.stroke,
			radius = obj.radius,
			fill = obj.fill;
			
		if(stroke == undefined) stroke = true;
		if(radius == undefined) radius = 6;	
		
		rectCanvas.width = width + padding[1] + padding[3];
		rectCanvas.height = height + padding[0] + padding[2];
		
		if(shadow){
			rectContext.shadowOffsetX = shadow.offsetX;
			rectContext.shadowOffsetY = shadow.offsetY;
			rectContext.shadowBlur = shadow.blur;
			rectContext.shadowColor = shadow.color;
		}
		
		var x = padding[3],
			y = padding[0];
		
		rectContext.beginPath();
		rectContext.moveTo(x + radius, y);
		rectContext.lineTo(x + width - radius, y);
		rectContext.quadraticCurveTo(x + width, y, x + width, y + radius);
		rectContext.lineTo(x + width, y + height - radius);
		rectContext.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
		rectContext.lineTo(x + radius, y + height);
		rectContext.quadraticCurveTo(x, y + height, x, y + height - radius);
		rectContext.lineTo(x, y + radius);
		rectContext.quadraticCurveTo(x, y, x + radius, y);
		rectContext.closePath();
		
		if(stroke) rectContext.stroke();
		if(fill){
			rectContext.fillStyle = fill;
			rectContext.fill();
		}
		obj.img = rectCanvas;	
	}
	
	function roundRect(ctx, x, y, width, height, radius, fill, stroke) {
		ctx.beginPath();
		ctx.moveTo(x + radius, y);
		ctx.lineTo(x + width - radius, y);
		ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
		ctx.lineTo(x + width, y + height - radius);
		ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
		ctx.lineTo(x + radius, y + height);
		ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
		ctx.lineTo(x, y + radius);
		ctx.quadraticCurveTo(x, y, x + radius, y);
		ctx.closePath();
		if(stroke) ctx.stroke();
		if(fill) ctx.fill();
	}
	
	function createPath(obj){
		var pathCanvas = document.createElement('canvas'),
			pathContext = pathCanvas.getContext('2d');
			
		pathCanvas.width = obj.width;
		pathCanvas.height = obj.height;
		pathContext.fillStyle = obj.fill;
		pathContext.beginPath();
		
		for(var i=0, l=obj.path.length; i<l; i++){
			var point = obj.path[i];
			if(i == 0) pathContext.moveTo(point[0], point[1]); 
			else pathContext.lineTo(point[0], point[1]);
		}
		
		pathContext.closePath();
		pathContext.fill();
		obj.img = pathCanvas;
	}
	
	function createText(obj){
		var textCanvas = document.createElement('canvas'),
			textContext = textCanvas.getContext('2d'),
			content = obj.content,
			fontFamily = obj.fontFamily,
			fontWeight = obj.fontWeight,
			fontSize = obj.fontSize,
			fontColor = obj.fontColor,
			strokeWidth = '0px',
			fontString = fontWeight + ' ' + fontSize + 'px ' + fontFamily,
			textWidth = getTextWidth(textContext, fontString, content),
			lineHeight = obj.lineHeight || 1;
		
		textCanvas.width = textWidth + 6;
		textCanvas.height = fontSize * lineHeight;
		
		textContext.font = fontString;
		textContext.fillStyle = fontColor;
		textContext.fillText(content, 0, fontSize);
		obj.img = textCanvas;
	}
	
	function createPostContent(obj){
		var postContentText = obj.content,
			postContentTextLength = postContentText.length,
			postContentCanvas = document.createElement('canvas'),
			postContentContext = postContentCanvas.getContext('2d'),
			fontFamily = obj.fontFamily,
			fontWeight = obj.fontWeight,
			fontSize = obj.fontSize,
			lineHeight = obj.lineHeight,
			fontColor = obj.fontColor,
			strokeWidth = '0px',
			fontString = fontWeight + ' ' + fontSize + 'px ' + fontFamily,
			highlightFontString = 'bold' + ' ' + fontSize + 'px ' + fontFamily,
			highlightFillColor = obj.highlightFontColor,
			textWidth = getTextWidth(postContentContext, fontString, postContentText),
			maxWidth = obj.maxWidth != undefined ? obj.maxWidth : maxTextWidth,
			lines = textWidth <= maxWidth ? 1 : Math.ceil(textWidth / maxWidth),
			maxLines = obj.maxLines,
			padding = obj.padding ? obj.padding : [0,0,0,0],
			highlightMatch = obj.highlightMatch,
			lcMatch = highlightMatch ? highlightMatch.toLowerCase() : null;
		
		setLines(textWidth, maxWidth, textWidth / postContentText.length);
		
		postContentCanvas.width = maxWidth + padding[1] + padding[3]; // Extra padding for overflow
		postContentCanvas.height = (fontSize * lineHeight) * lines;
		
		render();
		obj.img = postContentCanvas;
		
		function setLines(t, m, a){ lines = Math.ceil(postContentTextLength / Math.floor(m / a)); }
		
		function render(){
			var charIndex = 0,
				avgWidth = textWidth / postContentText.length;
	
			postContentContext.font = fontString;
			postContentContext.fillStyle = fontColor;
			
			for(var i=0; i<lines; i++){
				charIndex = processRender(charIndex, maxWidth, avgWidth, i);
		
				if(i + 1 == lines && charIndex < postContentTextLength){
					processRender(charIndex, maxWidth, avgWidth, i + 1);
					//renderHighlight(i, lineWidth + padding[3], ' [...]'); //Accomodate for lineWidth + padding
				}
			}
			
			function processRender(charIndex, maxTextWidth, avgWidth, i){
				var endPos = getEndPos(charIndex + Math.floor(maxTextWidth / avgWidth)),
					lineString = getLineString(charIndex),
					highlights = findHighlights(lineString);
				
				renderSections(lineString, highlights, i);
				return endPos + 1;
				
				function getEndPos(eP){ if(eP > postContentTextLength) return postContentTextLength; else return postContentText.lastIndexOf(' ', eP); }
				function getLineString(charIndex){
					var ls = postContentText.substring(charIndex, endPos);
					if(maxTextWidth < postContentContext.measureText(ls).width){
						endPos = getEndPos(endPos - 1)
						ls = postContentText.substring(charIndex, endPos);
					}
					return ls;
				}
			}
						
			function renderSections(lineString, highlights, lineIndex){
				var pos = padding[3],
					charIndex = 0,
					lineStringLength = lineString.length;
								
				if(highlights.length == 0) pos += renderNormal(lineIndex, pos, lineString);
				
				for(var i=0, l=highlights.length; i<l; i++){
					var highlight = highlights[i],
						text = undefined,
						width = 0;
					
					if(highlight.start > charIndex){
						text = lineString.substring(charIndex, highlight.start);
						width = renderNormal(lineIndex, pos, text);
						pos += width;
						charIndex = highlight.start;
					}
					
					text = lineString.substring(highlight.start, highlight.end);
					width = renderHighlight(lineIndex, pos, text);
					pos += width;
					charIndex = highlight.end;
					
					if(i + 1 == l && highlight.end < lineStringLength){
						text = lineString.substring(highlight.end, lineStringLength);
						width = renderNormal(lineIndex, pos, text);
						pos += width;
						charIndex = lineStringLength;
					}
				}
				
				return pos;
			}
			
			function renderNormal(lineIndex, pos, text){
				var width = getTextWidth(postContentContext, fontString, text)
				postContentContext.fillText(text, pos, getFontPositioning(fontSize, lineHeight, lineIndex));
				return width;
			}
			
			function getFontPositioning(fontSize, lineHeight, lineIndex){
				var fs = fontSize,
					lhSize = fs * lineHeight;
				return (lhSize - ((lhSize - fs)/2)) * (1 + lineIndex);
			}
			
			function renderHighlight(lineIndex, pos, text){
				postContentContext.save();
				
				postContentContext.font = highlightFontString;
				postContentContext.fillStyle = highlightFillColor;
				postContentContext.fillText(text, pos, fontSize * (1 + lineIndex));
				
				var width = getTextWidth(postContentContext, highlightFontString, text);
				
				postContentContext.restore();
				return width;
			}
			
			function findHighlights(string){
				var lcStr = string.toLowerCase(),
					startHighlight = undefined, 
					endHighlight =  undefined,
					matches = findMatches();
				
				return matches;
				
				function findMatches(){
					var array = [];
					
					for(var i=0, l=lcStr.length; i<l; i++){
						var currentChar = lcStr.charAt(i),
							lastItem = i == (lcStr.length - 1)
						if(currentChar == '#' || currentChar == '@') startHighlight = i;
						else if(startHighlight != undefined && (currentChar == ' ' || lastItem)){
							if(!lastItem) endHighlight = i;
							else endHighlight = lcStr.length;
							
							var str = lcStr.substring(startHighlight, endHighlight),
								obj = {
									'string' : str,
									'start' : startHighlight,
									'end' : endHighlight
								};
							
							array.push(obj);
							startHighlight = undefined; 
							endHighlight =  undefined;
						}
					}
					
					return array;
				}
				
				function validateMatches(matches){
					var array = [];
					
					for(var i=0, l=matches.length; i<l; i++){
						var obj = matches[i],
							str = obj.string,
							valid = str.indexOf(lcMatch, 0);
						
							if(valid > -1) array.push(obj);
					}
					
					return array;
				}
			}
		}
	}
	
	function createSocialIcon(obj, cb){
		var src = obj.src,
			socialIconCanvas = document.createElement('canvas'),
			socialIconContext = socialIconCanvas.getContext('2d'),
			img = document.createElement('img'),
			width = 16,
			height = 16;
			
		socialIconCanvas.width = width;
		socialIconCanvasheight = height;
		
		obj.img = socialIconCanvas;
		img.onload = function(){ setTimeout(integrateImage, 1); };
		img.onerror = function(){ cb(); };
		img.src = '/public/images/adBuilder/social/' + src + '.png';
		
		function integrateImage(){
			socialIconContext.drawImage(img, 0, 0, width, height);
			cb();
		}
	}
	
	function getProxySource(src){
		var obj = {
			'url' : src
		};
		
		return proxyURL + encodeURIComponent(src);
	}
	
	function createCanvasImage(obj, cb, maintainScale){
		var img = document.createElement('img'),
			backgroundCanvas = document.createElement('canvas'),
			backgroundContext = backgroundCanvas.getContext('2d'),
			src = obj.src,
			srcDefined = isDefined(src),
			domainMatch = srcDefined ? src.match(/[panda.meteora.us]{14}/) : null,
			dataMatch = srcDefined ? src.match(/[data:image]{10}/) : null;
		if(srcDefined){
			if(domainMatch == null && dataMatch == null) src = getProxySource(src);
			events.add(img, 'load', imageReady);
			events.add(img, 'error', cb);
			img.src = src;
		}
		else if (!srcDefined) cb();
	
		function imageReady(){ setTimeout(process, 1); }
		
		function process(){
			var width = img.naturalWidth,
				height = img.naturalHeight,
				targetWidth = obj.width || adWidth,
				targetHeight = obj.height || adHeight,
				widthDelta = width / targetWidth,
				heightDelta = height / targetHeight,
				focusDelta = undefined,
				focusType = undefined,
				focusWidth = undefined,
				focusHeight = undefined,
				offsetX = 0,
				offsetY = 0;
				
			if(obj.movementX === undefined) obj.movementX = 0;
			if(obj.movementY === undefined) obj.movementY = 0;
			obj.update = cycle;
			
			if(maintainScale){
				setFocusType();
				setFocusRects();
				setOffset();
			}
			else {
				focusWidth = targetWidth;
				focusHeight = targetHeight;
			}

			setCanvasSizing();
			updateObject();
			cycle();
			cb();
			
			function setFocusType(){
				if(widthDelta < heightDelta){ focusDelta = widthDelta; focusType = 'width'; }
				else { focusDelta = heightDelta; focusType = 'height'; }
			}
			function setFocusRects(){
				if(focusDelta > 1) { focusWidth = width / focusDelta; focusHeight = height / focusDelta; }
				else { focusWidth = width; focusHeight = height; }
			}
			function setOffset(){ if(focusWidth < targetWidth) offsetX = (targetWidth - focusWidth) / 2; if(focusHeight < targetHeight) offsetY = (targetHeight - focusHeight) / 2; }
			function setCanvasSizing(){ backgroundCanvas.width = targetWidth; backgroundCanvas.height = targetHeight; }
			function updateObject(){
				if(maintainScale){
					obj.focusWidth = focusWidth;
					obj.focusHeight = focusHeight;
					obj.focusType = focusType;
				}
				
				obj.width = targetWidth;
				obj.height = targetHeight;
				obj.img = backgroundCanvas;
			}
			function cycle(){ backgroundContext.drawImage(img, offsetX + obj.movementX, offsetY + obj.movementY, focusWidth, focusHeight); }
		}
		
		
	}
	
	function createFileInput(){
		var input = document.createElement('input');
		input.type = 'file';
		return input;
	}
	
	function getTextWidth(ctx, fontStyle, text){
		ctx.font = fontStyle;
		return ctx.measureText(text).width;
	}
	
	function getImageURL(data){
		var images = data.media.images;
		for(var i=0, l=images.length; i<l; i++){
			var item = images[i];
			if(item['type'] == 'original') return item.url;
		}
		return false;
	}
	
	function bindCanvas(){
		events.add(target, 'mousedown', canvasMouseDown);
		events.add(target, 'mouseup', canvasMouseUp);
		events.add(target, 'mousemove', canvasMouseMove);
		events.add(target, 'mouseout', canvasMouseUp);
	}
	
	function canvasMouseDown(e){ if(dragFocus) startDrag(e); }
	function canvasMouseUp(e){
		if(dragFocus) endDrag(e);
		if(clickItems) checkClickItems(e);
		if(hoverItems) checkHoverItems(e);
	}
	function canvasMouseMove(e){
		if(dragState == true) updateDragFocus(e);
		if(hoverItems) checkHoverItems(e);
	}
	
	function preventDefault(e){ e.preventDefault(); }
	
	function viewTwoMouseUp(e){
		var eX = e.layerX,
			eY = e.layerY;
		
		if((eX >= itemAreaObj.x && eX <= itemAreaObj.x + itemAreaObj.width) && (eY >= itemAreaObj.y && eY <= itemAreaObj.y + itemAreaObj.height)) itemAreaClick();
		else if((eX >= logoAreaObj.x && eX <= logoAreaObj.x + logoAreaObj.width) && (eY >= logoAreaObj.y && eY <= logoAreaObj.y + logoAreaObj.height)) logoAreaClick();
	}
	
	function checkClickItems(e){
		var eX = e.layerX,
			eY = e.layerY;
		
		for(var i=0, l=clickItems.length; i<l; i++){
			var item = clickItems[i],
				x = item.x,
				y = item.y,
				width = item.width,
				height = item.height;
				
			if((eX >= x && eX <= x + width) && (eY >= y && eY <= y + height)) fireItem(item);
		}
		
		function fireItem(item){
			var clickAction = item.views[viewFrame].clickItem.action;
			if(clickAction == 'fileSelect') {
				fileSelectAction(item);
			}
		}
	}
	
	function checkHoverItems(e){
		var eX = e.layerX,
			eY = e.layerY,
			change = [];
		
		for(var i=0, l=hoverItems.length; i<l; i++){
			var item = hoverItems[i],
				x = item.x,
				y = item.y,
				width = item.width,
				height = item.height;
				
			if((eX >= x && eX <= x + width) && (eY >= y && eY <= y + height)) fireItem(item);
			else if (item.activeHover == true) {
				var __storedValue = item.__storedValue,
					__storedKey = item.__storedKey;
					
				delete item.__storedValue;
				delete item.__storedKey;

				item[__storedKey] = __storedValue;
				item.activeHover = false;
				change.push(item);
			}
		}
		
		if(change.length > 0) run(change, true);
		
		function fireItem(item){
			var updateKey = item.views[viewFrame].hoverItem['updateKey'] || 'src';
			
			if(!item['__storedValue']){
				var __storedValue = item[updateKey];
				delete item[updateKey];
				
				item['__storedValue'] = __storedValue;
				item['__storedKey'] = updateKey;
				item[updateKey] = item.views[viewFrame].hoverItem[updateKey];
				item.activeHover = true;
				change.push(item);
			}
			
		}
	}
	
	function fileSelectAction(obj){
		fileInputCallback = cb;
		fileInput.click();
		
		function cb(e){
			var d = e[0];
			obj.type = 'image';
			obj.src = d.result;
			if(obj.fileSelectDeleteItems) {
				deleteFileSelectItems(obj.fileSelectDeleteItems);
				delete obj.fileSelectDeleteItems;
			}
			createCanvasImage(obj, cycle);
			if(obj.views[viewFrame].hoverItem) delete obj.views[viewFrame].hoverItem;
			
			
		}
	}
	
	function deleteFileSelectItems(array){
		for(var i=array.length - 1; i >= 0; i--){
			var item = array[i];
			dataArray.splice(item, 1);
		}
	}
	
	function startDrag(e){ dragStart = [e.layerX, e.layerY]; dragState = true; dragFocus.currentMovementX = dragFocus.movementX; dragFocus.currentMovementY = dragFocus.movementY; }
	function endDrag(e){ dragEnd = [e.layerX, e.layerY]; dragState = false; delete dragFocus.currentMovementX; delete dragFocus.currentMovementX; }
	function updateDragFocus(e){
		run();

		function run(){
			var layerX = e.layerX,
				layerY = e.layerY;
			
			if(dragFocus != undefined){
				
				if(dragFocus.focusType == 'width') dragFocus.movementY = checkDragY(layerY, dragStart[1]);
				else if(dragFocus.focusType == 'height') dragFocus.movementX = checkDragX(layerX, dragStart[0]);
				
				dragFocus.update();
				
				cycle();
			}
		}
	}
	function checkDragY(layerY, startY){
		var addValue = dragFocus.currentMovementY + (layerY - startY),
			sumValue = dragFocus.height + addValue,
			movementDelta = dragFocus.height - dragFocus.focusHeight;

		if(addValue < movementDelta) return movementDelta;
		else if(addValue <= 0) return addValue;
		else return 0;
	}
	function checkDragX(layerX, startX){
		var addValue = dragFocus.currentMovementX + (layerX - startX),
			sumValue = dragFocus.width + addValue,
			movementDelta = dragFocus.width - dragFocus.focusWidth;
		if(addValue < movementDelta) return movementDelta;
		else if(addValue <= 0) return addValue;
		else return 0;
	}
	
	function exit(){
		if(events) events.reset();
		events = null;
	}
}