window.contentPieces = null;
window.mapCanvas = null;
window.mainCanvas = null;
window.parallaxCanvas = null;
window.genericWindow = null;
window.loadedInitItems = 0;


var MapCanvas = $.Class.create({
	
	_el: null,
	_context: null,
	_scale: 1,
	_canvasWidth: 0,
	_canvasHeight: 0,
	_eventDispatcher: null,
	_translateOffset: null,
	_contentPadding: 20,
	
	initialize: function(properties){
		
		this._el = properties.ele;
		
		this._eventDispatcher = $('<div></div>');
		this._scale = properties.scale;
		this._canvasWidth = $(window).width() * this._scale;
		this._canvasHeight = $(window).height() * this._scale;
		this._context = this._el.get(0).getContext('2d');
		
		this.updateCanvasDimensions();
		this._translateOffset = [0,0];
		
		this.translate(this._canvasWidth / 2, this._canvasHeight / 2);
		
		//this.isPixelOccupied(0,0,100,100);
	},
	
	getContext: function(){
		return this._context;
	},
	
	onWindowResize: function(){
		this.clearAll();
		
		this._canvasWidth = Math.round($(window).width() * this._scale);
		this._canvasHeight = Math.round($(window).height() * this._scale);
		
		this.updateCanvasDimensions();
		if(!$.browser.msie) this._context.translate(this._translateOffset[0], this._translateOffset[1]);
	},
	
	bind: function(event, data, fn){
		this._eventDispatcher.bind(event, data, fn);
	},
	
	unbind: function(event, fn){
		this._eventDispatcher.unbind(event, fn);
	},
	
	updateCanvasDimensions: function(){
		this._el.attr('width', this._canvasWidth);
		this._el.attr('height', this._canvasHeight);
	},
	
	translate: function(x, y)
	{	
		this._translateOffset[0] += x;
		this._translateOffset[1] += y;
		
		this._context.translate(x, y);
		this.render();
		this._eventDispatcher.trigger('translate', [x, y]);
	},
	
	clearAll: function(){
		this._context.clearRect(0-this._translateOffset[0],0-this._translateOffset[1], this._canvasWidth, this._canvasHeight);
	},
	
	render: function(){
		this.clearAll();
		
		var contentPiece;
		var diameter = 0;
		var angle = 0;
		var angleIncrement = 30;
		var diameterExceeded = false;
		
		for(var i=0; i<window.contentPieces.getCount(); i++)
		{
			contentPiece = window.contentPieces.getAtIndex(i);
			
			if(contentPiece.getIsRendered())
			{
				this.renderObject(contentPiece, contentPiece._renderedCoords[0] * this._scale, contentPiece._renderedCoords[1] * this._scale, contentPiece._width * this._scale, contentPiece._height * this._scale);
				continue;
			}
			
			var contentWidth = contentPiece._width * this._scale;
			var contentHeight = contentPiece._height * this._scale;
			
			var contentRendered = false;
			
			while(!contentRendered && !diameterExceeded)
			{	
				var immunity = (contentPiece._forcedBoxCoords != null);
				
				var left; 
				var top; 
				
				if(!immunity)
				{
					left = (Math.sin(this.degreesToRadians(angle)) * diameter) - (contentWidth / 2) - this._contentPadding;
					top = (Math.cos(this.degreesToRadians(angle)) * diameter) - (contentHeight / 2) - this._contentPadding;
				}
				else
				{
					left = contentPiece._forcedBoxCoords[0];
					top = contentPiece._forcedBoxCoords[1];
				}
				/*
				if(contentPiece._id == 'first_prompt')
				{
					left = -55;
					top = -55;
					immunity = true;
				}
				else if(contentPiece._id == 'manifesto_arrow')
				{
					left = 1;
					top = 5;
					immunity = true;
				}
				*/
				var right = left + contentWidth + this._contentPadding;
				var bottom = top + contentHeight + this._contentPadding;
				
				angle += angleIncrement;
				if(angle >= 360)
				{
					angle -= 360;
					diameter += 100 * this._scale;
					angleIncrement = angleIncrement / 1.1;
				}
				
				
				var checkX = (this._translateOffset[0] > this._canvasWidth / 2)? this._translateOffset[0] : this._canvasWidth - this._translateOffset[0];
				var checkY = (this._translateOffset[1] > this._canvasHeight / 2)? this._translateOffset[1] : this._canvasHeight - this._translateOffset[1];
				
				diameterExceeded = (diameter > checkX && diameter > checkY);
				
				if(!immunity && (left + this._translateOffset[0] < 0 
						|| right  + this._translateOffset[0] < 0
						|| left + this._translateOffset[0] > this._canvasWidth
						|| right + this._translateOffset[0] > this._canvasWidth
						|| top + this._translateOffset[1] < 0
						|| bottom + this._translateOffset[1] < 0
						|| top + this._translateOffset[1] > this._canvasHeight
						|| bottom + this._translateOffset[1] > this._canvasHeight)) continue;
				
				if(!immunity && this.isPixelOccupied(left, top, right-left, bottom-top))
				{
					continue;
				}
				else
				{
					this.renderObject(contentPiece, left, top, right-left, bottom-top);
					contentRendered = true;
					this._eventDispatcher.trigger('objectRendered', [contentPiece, (left+this._contentPadding)/this._scale, (top+this._contentPadding)/this._scale]);
				}
			}
			
			if(diameterExceeded) i = window.contentPieces.getCount();
		}
	},
	
	renderObject: function(contentPiece, x, y, contentWidth, contentHeight){
		
		//contentPiece._boxCoords = [x, y];
		
		this._context.save();
		this._context.beginPath();
		
		this._context.fillStyle = contentPiece._color;
		this._context.fillRect(x, y, contentWidth, contentHeight);
		
		this._context.closePath();
		this._context.restore();
		
		
	},
	
	isPixelOccupied: function(x,y,width,height){
		
		
		var factor = 1;
		var checkedPoints = [];
		
		for(var factor = 1; factor<8; factor ++)
		{
			for(var row=0; row<factor+1; row++)
			{
				for(var col=0; col<factor+1; col++)
				{
					var checkX = x + (col * width / factor);
					var checkY = y + (row * height / factor);
					
					if($.inArray(checkX + ',' + checkY, checkedPoints) != -1)
					{	
						continue;
					}
						
					checkedPoints.push(checkX + ',' + checkY);
					
					if(this._context.getImageData)
					{
						checkX += this._translateOffset[0];
						checkY += this._translateOffset[1];
						
						var imageData = this._context.getImageData(checkX,checkY,1,1);
						
						for(var i=0; i<imageData.data.length; i++)
						{
							if(imageData.data[i] != 0) return true;
						}
					}
					else
					{
						for(var i=0; i<window.contentPieces.getOnScreenCount(); i++)
						{
							contentPiece = window.contentPieces.getOnScreenAtIndex(i);
							if(contentPiece.getIsRendered() == false)
							{
								i=window.contentPieces.getCount();
								continue;
							}
							
							var left = (contentPiece._renderedCoords[0] * this._scale);
							var right = left + (contentPiece._width * this._scale);
							var top = (contentPiece._renderedCoords[1] * this._scale);
							var bottom = top + (contentPiece._height * this._scale);
							
							if((checkX >= left && checkX <= right && checkY >= top && checkY <= bottom)
								
							) return true;
						}
					}
					
					/*
					this._context.beginPath();
					
					this._context.rect(x + (col * width / factor), y + (row * height / factor), 3, 3);
					this._context.fill();
					this._context.closePath();
					alert('afasafs');
					*/
				}
			}
		}
		
		
		return false;
	},
	
	degreesToRadians: function(degrees)
	{
		return degrees * Math.PI / 180;
	}
});


/************************** MAIN CANVAS ************************/

var Canvas = $.Class.create(MapCanvas, {
	
	_velocity: null,
	_velocityInterval:null,
	_lastMouseDownCoords: null,
	
	_hasMovedSinceClick:false,
	
	_animatingElements: null,
	_animationTimer: null,
	
	_animationProxy:null,
	_currentHoverContentPiece:null,
	
	_bounds: null,
	_checkBounds: false,
	
	initialize: function(properties){
		this.base('initialize', properties);
		this._velocity = [];
		this._lastMouseDownCoords = [];
		this._animatingElements = [];
		
		this._animationProxy = {
			translateOffsetX: 0,
			translateOffsetY: 0
		};
		
		this._bounds = {
			top: 0,
			left: 0,
			right: 0,
			bottom: 0
		};
		
		
		this.bind('animationStart', {self:this}, function(evt){
			evt.data.self.onAnimationStart(evt.data.self);
		});
		
		this._el.bind('mousedown', {self: this}, this.startDrag);
		this._el.bind('mousemove', {self:this}, this.checkHover);
		this._el.bind('mouseup', {self:this}, this.checkClick);
	},
	
	onContentPieceRenderComplete: function(evt){
		/*
		jc({canvas: evt.data.self._id, layer:evt.data.contentPiece._layerName}).find({
			attr: {
				name: 'element_hotspot'
			}
		}).mouseover(function(){
			$('#main').addClass('hover');
		});
		
		jc({canvas: evt.data.self._id, layer:evt.data.contentPiece._layerName}).find({
			attr: {
				name: 'element_hotspot'
			}
		}).mouseout(function(){
			$('#main').removeClass('hover');
		});
		
		jc({self:this, canvas: evt.data.self._id, layer:evt.data.contentPiece._layerName}).click(function(){
			if(!evt.data.self._hasMovedSinceClick) evt.data.contentPiece.onClick();
		});
		*/
	},
	
	render: function(){
		this.clearAll();
		
		for(var i=0; i<window.contentPieces.getCount(); i++)
		{
			var contentPiece = window.contentPieces.getAtIndex(i);
			
			if(!contentPiece.getIsRendered())
			{
				return;
			}
			
			this.renderObject(contentPiece, contentPiece._renderedCoords[0], contentPiece._renderedCoords[1]);
			continue;
		}
		
		//if gotten here, that means all content rendered
		this._checkBounds = true;
	},
	
	renderObject: function(contentPiece, x, y){
		var firstRender = !(contentPiece.getIsRendered());
		contentPiece.render(x, y, this._context);
		
		if(!firstRender) return;
		contentPiece.bind('animationStart', {contentPiece:contentPiece, self:this}, function(evt){
			evt.data.self.onAnimationStart(evt.data.contentPiece);
		});
		
		contentPiece.animate({opacity:1, time:0.5, transition:'linear', onComplete: function(self, contentPiece){
			self.onAnimationComplete(contentPiece);
			contentPiece._renderFadeInComplete = true;
		}, onCompleteParams: [this, contentPiece]});
		
		if(x < this._bounds.left) this._bounds.left = x;
		else if(x + contentPiece._width > this._bounds.right) this._bounds.right = x + contentPiece._width;
		if(y < this._bounds.top) this._bounds.top = y;
		else if(y + contentPiece._height > this._bounds.bottom) this._bounds.bottom = y + contentPiece._height;
	},
	
	pushVelocity: function(x, y){
		this._velocity.push([x,y]);
		if(this._velocity.length > 10) this._velocity.shift();
	},
	
	clearVelocityInterval: function(){
		if(this._velocityInterval == null) return;
		clearInterval(this._velocityInterval);
		this._velocityInterval = null;
	},
	
	startVelocityInterval: function(){
		this.clearVelocityInterval();
		this._velocityInterval = setInterval('window.mainCanvas.onVelocityInterval()', 10);
	},
	
	onVelocityInterval: function(){
		this.pushVelocity(0,0);
	},
	
	startDrag: function(evt){
		
		evt.data.self._velocity = [];
		evt.data.self._lastMouseDownCoords = [evt.pageX, evt.pageY];
		
		evt.data.self._el.bind('mousemove', {self:evt.data.self}, evt.data.self.dragging);
		$(document).bind('mouseup', {self:evt.data.self}, evt.data.self.stopDrag);
		evt.data.self._el.unbind('mousemove', evt.data.self.checkHover);
		
		evt.data.self.startVelocityInterval();
		evt.data.self._hasMovedSinceClick = false;
	},
	
	stopDrag: function(evt){
		evt.data.self.clearVelocityInterval();
		evt.data.self._el.bind('mousemove', {self: evt.data.self}, evt.data.self.checkHover);
		$(evt.data.self._el).unbind('mousemove', evt.data.self.dragging);
		$(document).unbind('mouseup', evt.data.self.stopDrag);
		
		//inertia
		var dx = 0;
		var dy = 0;
		for(var i=0; i<evt.data.self._velocity.length; i++)
		{
			dx += evt.data.self._velocity[i][0];
			dy += evt.data.self._velocity[i][1];
		}
		
		if(evt.data.self._checkBounds)
		{
			if(dx <= 0 && -1 * (evt.data.self._translateOffset[0] + dx) + evt.data.self._canvasWidth > evt.data.self._bounds.right)
			{
				dx = (-1 * (evt.data.self._translateOffset[0] + dx) + evt.data.self._canvasWidth - evt.data.self._bounds.right) / 10;
			}	
			else if(dx >= 0 && -1 * (evt.data.self._translateOffset[0] + dx) < evt.data.self._bounds.left)
			{
				dx = (-1 * (evt.data.self._translateOffset[0] + dx) - evt.data.self._bounds.left) / 10;
			}
			
			if(dy <= 0 && -1 * (evt.data.self._translateOffset[1] + dy) + evt.data.self._canvasHeight > evt.data.self._bounds.bottom)
			{
				dy = (-1 * (evt.data.self._translateOffset[1] + dy) + evt.data.self._canvasHeight - evt.data.self._bounds.bottom) / 10;
			}
			else if(dy >= 0 && -1 * (evt.data.self._translateOffset[1] + dy) < evt.data.self._bounds.top)
			{
				dy = (-1 * (evt.data.self._translateOffset[1] + dy) - evt.data.self._bounds.top) / 10;
			}
		}
		
		evt.data.self._animationProxy.translateOffsetX = dx;
		evt.data.self._animationProxy.translateOffsetY = dy;
		
		evt.data.self.animate({translateOffsetX:0, translateOffsetY:0, onComplete: function(self){
			window.mainCanvas.onAnimationComplete(self);
			self._eventDispatcher.trigger('inertiaComplete');
		}, onCompleteParams: [evt.data.self]});
	},
	
	dragging: function(evt){
		
		var dx = evt.pageX - evt.data.self._lastMouseDownCoords[0];
		var dy = evt.pageY - evt.data.self._lastMouseDownCoords[1];
		evt.data.self.pushVelocity(dx, dy);
		evt.data.self._lastMouseDownCoords = [evt.pageX, evt.pageY];
		
		evt.data.self.translate(dx, dy);
		evt.data.self._hasMovedSinceClick = true;
	},
	
	doAnimationStep: function(){
		this.translate(Math.round(this._animationProxy.translateOffsetX), Math.round(this._animationProxy.translateOffsetY));
		//this.render();
	},
	
	animate: function(properties){
		this._eventDispatcher.trigger('animationStart');
		JSTweener.addTween(this._animationProxy, properties);
	},
	
	startAnimationTimer: function(){
		this.clearAnimationTimer();
		this._animationTimer = setInterval('window.mainCanvas.doAnimationStep();', 40);
	},
	
	clearAnimationTimer: function(){
		if(!this._animationTimer) return;
		clearInterval(this._animationTimer);
		this._animationTimer = null;
	},
	
	onAnimationStart: function(contentPiece){
		this._animatingElements.push(contentPiece);
		this.startAnimationTimer();
	},
	
	onAnimationComplete: function(contentPiece){
		
		this._animatingElements.splice($.inArray(contentPiece, this._animatingElements), 1);
		
		if(this._animatingElements.length == 0)
		{
			this.clearAnimationTimer();
		}
	},
	
	checkHover: function(evt){
				
		var x = evt.pageX - evt.data.self._translateOffset[0];
		var y = evt.pageY - evt.data.self._translateOffset[1];
		
		var hoveredContentPiece = null;
		
		for(var i=0; i<window.contentPieces.getOnScreenCount(); i++)
		{
			contentPiece = window.contentPieces.getOnScreenAtIndex(i);
			if(contentPiece.getIsRendered() == false)
			{
				i=window.contentPieces.getCount();
				continue;
			}
			
			var left = (contentPiece._renderedCoords[0] * evt.data.self._scale);
			var right = left + (contentPiece._width * evt.data.self._scale);
			var top = (contentPiece._renderedCoords[1] * evt.data.self._scale);
			var bottom = top + (contentPiece._height * evt.data.self._scale);
			
			if((x >= left && x <= right && y >= top && y <= bottom))
			{
				hoveredContentPiece = contentPiece;
				i = window.contentPieces.getOnScreenCount();
			}
		}
		
		if(evt.data.self._currentHoverContentPiece != hoveredContentPiece)
		{
			if(evt.data.self._currentHoverContentPiece) evt.data.self._currentHoverContentPiece.onMouseOut();
			if(hoveredContentPiece) hoveredContentPiece.onMouseOver();
		}
		
		evt.data.self._currentHoverContentPiece = hoveredContentPiece;
		
		return;
	},
	
	checkClick: function(evt){
		if(!evt.data.self._hasMovedSinceClick && evt.data.self._currentHoverContentPiece) evt.data.self._currentHoverContentPiece.onClick();
	}
});


/************************** PARALLAX CANVAS ************************/

var ParallaxCanvas = $.Class.create(MapCanvas, {
	
	_bubbleContentPiece: null,
	
	initialize: function(properties){
		this.base('initialize', properties);
		this._bubbleContentPiece = new BubbleParallaxContentPiece();
		this._bubbleContentPiece.render((this._bubbleContentPiece._width / -2), (this._bubbleContentPiece._height / -2), this._context);
	},
	
	render: function(){
		this.clearAll();
		this._bubbleContentPiece.render(this._bubbleContentPiece._renderedCoords[0], this._bubbleContentPiece._renderedCoords[1], this._context);
	}
});


var ContentPieceFactory = $.Class.create({
	
	_contentPieces: null,
	_contentPiecesOnScreen:null,
	_onScreenContentTypeCount: null,
	
	initialize: function(data){
		this._contentPieces = [];
		this._contentPiecesOnScreen = [];
		this._onScreenContentTypeCount = {
				news	: 0,
				about	: 0,
				work	: 0,
				thought	: 0,
				contact : 0
		};
		
		if($.inArray('about', currentTags) == -1)
		{
			this._contentPieces.push(new LogoContentPiece());
			//this._contentPieces.push(new FirstPromptContentPiece());
			this._contentPieces.push(new WelcomeContentPiece());
			this._contentPieces.push(new FindUsOnFacebookContentPiece());
			this._contentPieces.push(new ManifestoArrowContentPiece());
		}
		else
		{
			this._contentPieces.push(new ManifestoContentPiece());
		}
		
		for(var i=0; i<data.length; i++)
		{
			var content = this.factory(data[i]);
			this._contentPieces.push(content);
		}
		
		this._contentPiecesOnScreen = this._contentPieces;
	},
	
	getCount: function(){
		return this._contentPieces.length;
	},
	
	getAtIndex: function(index){
		if(this._contentPieces[index]) return this._contentPieces[index];
		else return false;
	},
	
	removeAtIndex: function(index){
		this._contentPieces.splice(index, 1);
	},
	
	updateOnScreen: function(){
		this._contentPiecesOnScreen = [];
		var leftThreshold = window.mainCanvas._translateOffset[0] * -1;
		var rightThreshold = leftThreshold + window.mainCanvas._canvasWidth;
		var topThreshold = window.mainCanvas._translateOffset[1] * -1;
		var bottomThreshold = topThreshold + window.mainCanvas._canvasHeight;
		this._onScreenContentTypeCount = {
			news	: 0,
			about	: 0,
			work	: 0,
			thought	: 0,
			contact : 0
		};
		
		for(var i=0; i<this._contentPieces.length; i++)
		{	
			if(!this._contentPieces[i].getIsRendered()) return;
			if(this._contentPieces[i]._renderedCoords[0] + this._contentPieces[i]._width < leftThreshold
					|| this._contentPieces[i]._renderedCoords[0] > rightThreshold
					|| this._contentPieces[i]._renderedCoords[1] + this._contentPieces[i]._height < topThreshold
					|| this._contentPieces[i]._renderedCoords[1] > bottomThreshold)
			continue;
			
			this._contentPiecesOnScreen.push(this._contentPieces[i]);
			if(this._contentPieces[i]._tagsLines.lines && this._contentPieces[i]._tagsLines.lines.length > 0)
			{
				if(this._contentPieces[i]._tagsLines.lines[0].indexOf('#news') != -1) this._onScreenContentTypeCount.news ++;
				if(this._contentPieces[i]._tagsLines.lines[0].indexOf('#about') != -1) this._onScreenContentTypeCount.about ++;
				if(this._contentPieces[i]._tagsLines.lines[0].indexOf('#work') != -1) this._onScreenContentTypeCount.work ++;
				if(this._contentPieces[i]._tagsLines.lines[0].indexOf('#thought') != -1) this._onScreenContentTypeCount.thought ++;
				if(this._contentPieces[i]._tagsLines.lines[0].indexOf('#contact') != -1) this._onScreenContentTypeCount.contact ++;
			}	
		}
	},
	
	getOnScreenCount: function(){
		return this._contentPiecesOnScreen.length;
	},
	
	getOnScreenAtIndex: function(index){
		if(this._contentPiecesOnScreen[index]) return this._contentPiecesOnScreen[index];
		else return false;
	},
	
	factory: function(data){
		
		switch(data.type)
		{
			case 'facebook':
				return new FBContentPiece(data);
				break;
			
			case 'twitter':	
				return new TwitterContentPiece(data);
				break;
			
			case 'office':
				return new OfficeContentPiece(data);
				break;
			
			case 'people':
				return new PeopleContentPiece(data);
				break;
				
			case 'instagram':
				return new InstagramContentPiece(data);
				break;
				
			case 'youtube':
				return new YoutubeContentPiece(data);
				break;
				
			case 'image':
				return new ImageContentPiece(data);
				break;
			
			default:
				return new ContentPiece(data);
				break;
		}
	}
});

var ContentPiece = $.Class.create({
	
	_id: null,
	_data: null,
	_width: 0,
	_height: 0,
	_color: '#CCCCCC',
	_animationProxy: null,
	_boxCoords: null,
	_forcedBoxCoords:null,
	_renderedCoords: null,
	_tagsLines: null,
	_eventDispatcher:null,
	_tweenerTimer:null,
	_renderFadeInComplete:false,
	
	initialize: function(data){
		this._data = data;
		this._id = this._data.content_piece_id;
		this._width = 100;
		this._height = 100;
		this._tagsLines = [];
		
		this._eventDispatcher = $('<div></div>');
		this._animationProxy = {
			scale: 		1,
			opacity: 	0
		};
	},
	
	bind: function(event, data, fn){
		this._eventDispatcher.bind(event, data, fn);
	},
	
	unbind: function(event, fn){
		this._eventDispatcher.unbind(event, fn);
	},
	
	render: function(x, y){
		this._renderedCoords = [x,y];
	},
	
	getIsRendered: function(){
		return (this._renderedCoords != null);
	},
	
	animate: function(properties){
		this.stopAnimation(properties);
		this._eventDispatcher.trigger('animationStart');
		this._tweenerObj = JSTweener.addTween(this._animationProxy, properties);
	},
	
	stopAnimation: function(){
		if(!this._tweenerObj) return;
		this._tweenerObj.targetPropeties = {};
	},
	
	onMouseOver: function(){
		
		if(!this._renderFadeInComplete) return;
		$('#main').addClass('hover');
		
		this.animate({scale:1.2, time:0.3, onComplete: function(contentPiece){
			window.mainCanvas.onAnimationComplete(contentPiece);
		}, onCompleteParams: [this]});
	},
	
	onMouseOut: function(){
		if(!this._renderFadeInComplete) return;
		$('#main').removeClass('hover');
		
		this.animate({scale:1, time:0.3, onComplete: function(contentPiece){
			window.mainCanvas.onAnimationComplete(contentPiece);
		}, onCompleteParams: [this]});
	},
	
	onClick: function(){
		$('body').trigger('contentClicked', [this]);
	},
	
	/***************** TEXTLINES *******************/
	measureTextLines: function(fontSize, fontFamily, words, targetWidth){
		
		var context = window.mainCanvas.getContext();
		context.save();
		context.font = fontSize + 'px ' + fontFamily;
		
		var lines = [];
		var currentLine = '';
		var maxWidth = 0;
		var maxHeight = 0;
		
		//title
		while(words.length > 0)
		{
			currentLine = currentLine + words.shift() + ' ';
			var measurement = context.measureText(currentLine);
			
			if(measurement.width > targetWidth || words.length == 0)
			{
				if(measurement.width > maxWidth) maxWidth = measurement.width;
				maxHeight += (fontSize + 5);
				lines.push(currentLine);
				currentLine = '';
			}
		}
		
		context.restore();
		
		return {
			width		: maxWidth,
			height		: maxHeight,
			lines		: lines
		};
	},
	
	setAndMeasureTagLines: function(fontSize, fontFamily){
		
		var context = window.mainCanvas.getContext();
		context.save();
		context.font = fontSize + 'px ' + fontFamily;
		var words = [];
		var lines = [];
		var currentLine = '';
		var maxWidth = 0;
		var maxHeight = 0;
		
		if(this._data.tags)
		{
			//tags
			for(var i=0; i<this._data.tags.length; i++)
			{
				words.push('#'+this._data.tags[i].details.name);
			}
			
			while(words.length > 0)
			{
				currentLine = currentLine + words.shift().toLowerCase() + ' ';
				
				var measurement = context.measureText(currentLine);
				
				if(measurement.width > 200 || words.length == 0)
				{
					if(measurement.width > maxWidth) maxWidth = measurement.width;
					maxHeight += (fontSize + 5);
					lines.push(currentLine);
					currentLine = '';
				}
			}
		}
		context.restore();
		this._tagsLines = {lines: lines, width: maxWidth, height: maxHeight};
		
	},

	/***************** IMAGE *******************/
	initImage: function(src, data, onLoadFunction){
		var img = $('<img />');
		img.bind('load', data, onLoadFunction);
		img.attr('src', src);
	},
	
	getClassName: function(){
		return this._data.type;
	}
});


/*************** FACEBOOK *******************/

var FBContentPiece = $.Class.create(ContentPiece, {
	
	_titleLines : null,
	_descriptionLines: null,
	_captionLines: null,
	_ctaLines: null,
	_icoImage:null,
	_image: null,
	_color:'red',
	_expandable:true,
	
	initialize: function(data){
		this.base('initialize', data);
		
		this._data.fb_image_width = parseInt(this._data.fb_image_width);
		this._data.fb_image_height = parseInt(this._data.fb_image_height);
		
		if(this._data.fb_description.length > 150)
		{
			this._data.fb_description = this._data.fb_description.substr(0,150) + '...';
			this._expandable = true;
		}
		
		if(this._data.fb_title.length > 150)
		{
			this._data.fb_title = this._data.fb_title.substr(0,150) + '...';
			this._expandable = true;
		}
		
		if(this._data.fb_type == 'link')
		{
			this._expandable = true;
		}
		
		//title
		this._titleLines = this.measureTextLines(11, 'arial', this._data.fb_title.split(' '), 190);
		
		//taglines
		this.setAndMeasureTagLines(11, 'arial');
		
		//caption
		if(this._data.fb_type == 'link' || this._data.fb_type == 'video')
		{
			this._captionLines = this.measureTextLines(10, 'arial', (this._data.fb_caption).split(' '), 150);
		}
		
		//cta
		if(this._expandable)
		{
			this._ctaLines = this.measureTextLines(11, 'arial', ('Read Full Story').split(' '), 150);
		}
		
		if(this._data.fb_type == 'photo')
		{
			//description
			this._descriptionLines = this.measureTextLines(11, 'arial', (this._data.fb_description).split(' '), 190);
			var widestTextWidth = (this._descriptionLines.width > this._titleLines.width + 24)? this._descriptionLines.width : this._titleLines.width + 24;
			if(this._tagsLines.width > widestTextWidth) widestTextWidth = this._tagsLines.width;
			
			this._width = (widestTextWidth > this._data.fb_image_width)? widestTextWidth : this._data.fb_image_width;
			this._height = this._descriptionLines.height + this._titleLines.height + this._tagsLines.height + this._data.fb_image_height + 10 + 5;
			
		}
		else if(this._data.fb_image_thumb != null)
		{
			//description
			this._descriptionLines = this.measureTextLines(11, 'arial', (this._data.fb_description).split(' '), 150);
			var widestTextWidth = (this._descriptionLines.width + this._data.fb_image_width + 10 > this._titleLines.width + 24)? this._descriptionLines.width  + this._data.fb_image_width + 10 : this._titleLines.width + 24;
			if(this._captionLines && this._captionLines.width + this._data.fb_image_width + 10 > widestTextWidth) widestTextWidth = this._captionLines.width + 10 + this._data.fb_image_width;
			if(this._ctaLines && this._ctaLines.width + this._data.fb_image_width + 10 > widestTextWidth) widestTextWidth = this._ctaLines.width + 10 + this._data.fb_image_width;
			
			if(this._tagsLines.width > widestTextWidth) widestTextWidth = this._tagsLines.width;
			
			this._width = widestTextWidth;
			
			var descriptionHeight = this._descriptionLines.height;
			if(this._captionLines) descriptionHeight += this._captionLines.height + 5;
			if(this._ctaLines) descriptionHeight += this._ctaLines.height;
			
			if(this._descriptionLines.height < this._data.fb_image_height) this._descriptionLines.height = this._data.fb_image_height;
			this._height = descriptionHeight + 10 + this._titleLines.height + 5 + this._tagsLines.height;
			
		}
		else
		{
			//description
			this._descriptionLines = this.measureTextLines(11, 'arial', (this._data.fb_description).split(' '), 150);
			var widestTextWidth = (this._descriptionLines.width > this._titleLines.width + 24)? this._descriptionLines.width : this._titleLines.width + 24;
			if(this._tagsLines.width > widestTextWidth) 
			{
				widestTextWidth = this._tagsLines.width;
			}
			
			this._width = widestTextWidth;
			this._height = this._descriptionLines.height + this._titleLines.height + this._tagsLines.height + 10 + 5;
		}
		
		
		
		if(this._data.fb_image_thumb != null)
		{
			this.initImage(this._data.fb_image_thumb_location, {self:this}, function(evt){
				evt.data.self._image = $(evt.currentTarget);
				if(evt.data.self._renderedCoords) evt.data.self.renderImage();
			});
		}
		
		this.initImage('fe/includes/im/ico_fb.jpg', {self:this}, function(evt){
			evt.data.self._icoImage = $(evt.currentTarget);
			if(evt.data.self._renderedCoords) evt.data.self.renderImage();
		});
		
	},
	
	render: function(x, y, context){
		this.base('render', x, y);
		
		context.save();
		context.globalAlpha = this._animationProxy.opacity;
		
		x -= this._width * (this._animationProxy.scale - 1) / 2;
		y -= this._height * (this._animationProxy.scale - 1) / 2;
		var txtY = y + (10 * this._animationProxy.scale);
		var txtX = x + (19 * this._animationProxy.scale);
		
		//context.fillRect(x, y, this._width * this._animationProxy.scale, this._height* this._animationProxy.scale, true);
		
		if(this._icoImage)
		{
			this.renderIcon();
		}
		
		if(this._titleLines)
		{
			var fontSize = 11 * this._animationProxy.scale;
			context.font = fontSize+'px arial';
			context.fillStyle = '#2c3a68';
			
			for(var i=0; i<this._titleLines.lines.length; i++)
			{
				context.fillText(this._titleLines.lines[i], txtX, txtY);
				txtY += 13 * this._animationProxy.scale;
			}
		}
		
		txtY += 10 * this._animationProxy.scale;
		
		if(this._data.fb_type == 'photo')
		{
			//description
			context.fillStyle = '#333333';
			
			for(var i=0; i<this._descriptionLines.lines.length; i++)
			{
				context.fillText(this._descriptionLines.lines[i], txtX, txtY);
				txtY += 14 * this._animationProxy.scale;
			}
			
			txtY += this._data.fb_image_height * this._animationProxy.scale;			
			txtX = x;
		}
		else if(this._data.fb_image_thumb != null)
		{
			var oldTxtX = txtX;
			var oldTxtY = txtY;
			
			txtX = x + ((10 + this._data.fb_image_width) * this._animationProxy.scale);
			
			//description
			context.fillStyle = '#333333';
			
			for(var i=0; i<this._descriptionLines.lines.length; i++)
			{
				context.fillText(this._descriptionLines.lines[i], txtX, txtY);
				txtY += 14 * this._animationProxy.scale;;
			}
			
			//caption
			if(this._captionLines)
			{
				txtY += 5 * this._animationProxy.scale;
				
				var fontSize = 10 * this._animationProxy.scale;
				context.font = fontSize+'px arial';
				context.fillStyle = '#999999';
				
				for(var i=0; i<this._captionLines.lines.length; i++)
				{
					context.fillText(this._captionLines.lines[i], txtX, txtY);
					txtY += 13 * this._animationProxy.scale;;
				}
			}
			
			//cta
			if(this._ctaLines)
			{
				var fontSize = 11 * this._animationProxy.scale;
				context.font = 'bold ' + fontSize+'px arial';
				context.fillStyle = '#ee3b7d';
				
				for(var i=0; i<this._ctaLines.lines.length; i++)
				{
					context.fillText(this._ctaLines.lines[i], txtX, txtY);
					txtY += 14 * this._animationProxy.scale;;
				}
			}
			
			if(this._data.fb_image_height > this._descriptionLines.height) txtY = (this._data.fb_image_height * this._animationProxy.scale) + oldTxtY;
			//txtX = oldTxtX;
			txtX = x;
		}
		else if(this._ctaLines)
		{
			var fontSize = 11 * this._animationProxy.scale;
			context.font = 'bold ' + fontSize+'px arial';
			context.fillStyle = '#ee3b7d';
			
			for(var i=0; i<this._ctaLines.lines.length; i++)
			{
				context.fillText(this._ctaLines.lines[i], txtX, txtY);
				txtY += 14 * this._animationProxy.scale;;
			}
		}
		
		txtY += 5 * this._animationProxy.scale;
		
		if(this._tagsLines.lines)
		{
			var fontSize = 11 * this._animationProxy.scale;
			context.font = fontSize + 'px arial';
			context.fillStyle = '#666666';
			
			for(var i=0; i<this._tagsLines.lines.length; i++)
			{	
				context.fillText(this._tagsLines.lines[i], txtX, txtY);
				txtY += 10 * this._animationProxy.scale;
			}
		}
		
		if(this._image)
		{
			this.renderImage();
		}
		
		context.restore();
	},
	
	renderImage: function(){
		
		if(!this._image) return;
		
		var context = window.mainCanvas.getContext();
		context.save();
		
		context.globalAlpha = this._animationProxy.opacity;
		
		var x = this._renderedCoords[0] - (this._width * (this._animationProxy.scale - 1) / 2);
		var y = this._renderedCoords[1] - (this._height * (this._animationProxy.scale - 1) / 2);
		
		y += ((this._titleLines.lines.length * 13) + 10) * this._animationProxy.scale;
		
		context.drawImage(this._image.get(0), x, y, this._data.fb_image_width*this._animationProxy.scale, this._data.fb_image_height*this._animationProxy.scale);
		context.strokeStyle = '#CCCCCC';
		context.strokeRect(x, y, this._data.fb_image_width*this._animationProxy.scale, this._data.fb_image_height*this._animationProxy.scale);
		
		context.restore();
		this._eventDispatcher.trigger('renderComplete');
	},
	
	renderIcon: function()
	{
		var context = window.mainCanvas.getContext();
		context.save();
		
		context.globalAlpha = this._animationProxy.opacity;
		
		var x = this._renderedCoords[0] - (this._width * (this._animationProxy.scale - 1) / 2);
		var y = this._renderedCoords[1] - (this._height * (this._animationProxy.scale - 1) / 2);
		
		context.drawImage(this._icoImage.get(0), x, y, 14*this._animationProxy.scale, 14*this._animationProxy.scale);
		
		context.restore();
		this._eventDispatcher.trigger('renderComplete');
	},
	
	onClick: function(){
		if(this._data.fb_type == 'link')
		{
			window.open(this._data.fb_redirect_url);
			//$('body').trigger('contentClicked', [this]);
		}
		else
		{
			this.base('onClick');
		}
	},
	
	getClassName: function(){
		
		if(this._data.fb_type == 'video')
		{
			return ('facebook-video');
		}
		else if(this._data.fb_type == 'photo')
		{
			return ('facebook-photo');
		}
		else
		{
			return this.base('getClassName');
		}
	}
});


/*************** TWITTER *******************/

var TwitterContentPiece = $.Class.create(ContentPiece, {
	
	_lines: null,
	
	initialize: function(data){
		this.base('initialize', data);
		
		this._data.tw_text = this._data.tw_text.replace(/\<a[^\>]+\>/g, '');
		this._data.tw_text = this._data.tw_text.replace(/\<\/a\>/g, '');
		
		this._width = 270;
		this._height = 110;
		
		//title
		this._lines = this.measureTextLines(14, 'arial', this._data.tw_text.split(' '), 130);
		
		//taglines
		this.setAndMeasureTagLines(11, 'arial');
		
		this._width = (this._lines.width > this._tagsLines.width)? this._lines.width : this._tagsLines.width;		
		this._height = this._lines.height + this._tagsLines.height + 5;
	},
	
	onMouseOut: function(){
		return false;
	},
	
	onMouseOver: function(){
		return false;
	},
	
	onClick: function(){
		return false;
	},
	
	render: function(x, y, context){
		this.base('render', x, y);
		
		context.save();
		context.globalAlpha = this._animationProxy.opacity;
		
		var txtY = y + 10;
		
		if(this._lines)
		{
			context.font = '14px arial';
			context.textAlign = 'center';
			context.fillStyle = '#00bad4';
			
			for(var i=0; i<this._lines.lines.length; i++)
			{
				context.fillText(this._lines.lines[i], x+(this._width / 2), txtY);
				//jc.text(this._lines.lines[i], x+(this._width / 2), txtY).font('14px arial').align('center').color('#00bad4').layer(layerName);
				txtY += 16;
			}
		}
		
		txtY += 5;
		if(this._tagsLines.lines)
		{
			context.font = '11px arial';
			context.textAlign = 'center';
			context.fillStyle = '#666666';
			
			for(var i=0; i<this._tagsLines.lines.length; i++)
			{
				context.fillText(this._tagsLines.lines[i], x+(this._width / 2), txtY);
				txtY += 10;
			}
		}
		
		context.restore();
		
		this._eventDispatcher.trigger('renderComplete');
	}
});

/**************** OFFICE *****************/

var OfficeContentPiece = $.Class.create(ContentPiece, {
	
	_image: null,
	
	initialize: function(data){
		this.base('initialize', data);
		
		this._width = 72;
		this._height = 56;
		
		this.setAndMeasureTagLines(11, 'arial');
		
		this.initImage(this._data.o_thumbnail_image_location, {self:this}, function(evt){
			evt.data.self._image = $(evt.currentTarget);
			if(evt.data.self._renderedCoords) evt.data.self.renderImage();
		});
	},
	
	render: function(x, y, layerName){
		this.base('render', x, y, layerName);
		
		if(this._image) this.renderImage();
	},
	
	renderImage: function(){
		
		var context = window.mainCanvas.getContext();
		context.save();
		context.globalAlpha = this._animationProxy.opacity;
		
		var x = this._renderedCoords[0] - (this._width * (this._animationProxy.scale - 1) / 2);
		var y = this._renderedCoords[1] - (this._height * (this._animationProxy.scale - 1) / 2);
		
		context.drawImage(this._image.get(0), x, y, this._image.get(0).width * this._animationProxy.scale, this._image.get(0).height * this._animationProxy.scale);
		context.restore();
		this._eventDispatcher.trigger('renderComplete');
	}
});

/**************** PEOPLE *****************/

var PeopleContentPiece = $.Class.create(ContentPiece, {
	
	_image: null,
	
	initialize: function(data){
		this.base('initialize', data);
		
		this._width = 210;
		this._height = 142;
		
		this.setAndMeasureTagLines(11, 'arial');
		
		this.initImage(this._data.pp_thumbnail_image_location, {self:this}, function(evt){
			evt.data.self._image = $(evt.currentTarget);
			if(evt.data.self._renderedCoords) evt.data.self.renderImage();
		});
	},
	
	render: function(x, y, context){
		this.base('render', x, y);
		
		if(this._image) this.renderImage();
	},
	
	renderImage: function(){
		var context = window.mainCanvas.getContext();
		context.save();
		context.globalAlpha = this._animationProxy.opacity;
		
		var x = this._renderedCoords[0] - (this._width * (this._animationProxy.scale - 1) / 2);
		var y = this._renderedCoords[1] - (this._height * (this._animationProxy.scale - 1) / 2);
		
		context.drawImage(this._image.get(0), x, y, this._image.get(0).width * this._animationProxy.scale, this._image.get(0).height * this._animationProxy.scale);
		context.restore();
		this._eventDispatcher.trigger('renderComplete');
	}
});

/**************** INSTAGRAM *****************/

var InstagramContentPiece = $.Class.create(ContentPiece, {
	
	_lines : null,
	_image: null,
	
	initialize: function(data){
		this.base('initialize', data);
		
		this._width = 132;
		this._height = 132;
		
		//caption
		this._lines = this.measureTextLines(12, 'arial', this._data.inst_caption.split(' '), 132);
		this._height += this._lines.height;
		
		//taglines
		this.setAndMeasureTagLines(11, 'arial');
		this._height += this._tagsLines.height + 10;
		
		var widestTextWidth = (this._lines.width > this._tagsLines.width)? this._lines.width : this._tagsLines.width;
		if(widestTextWidth > this._width) this._width = widestTextWidth;		
		
		this.initImage(this._data.inst_thumb_location, {self:this}, function(evt){
			evt.data.self._image = $(evt.currentTarget);
			if(evt.data.self._renderedCoords) evt.data.self.renderImage();
		});
	},
	
	render: function(x, y, context){
		this.base('render', x, y);
		context.save();
		context.globalAlpha = this._animationProxy.opacity;
		
		x -= this._width * (this._animationProxy.scale - 1) / 2;
		y -= this._height * (this._animationProxy.scale - 1) / 2;
		
		var txtY = y + (148 * this._animationProxy.scale);
		
		if(this._lines)
		{
			context.font = (12  * this._animationProxy.scale) + 'px arial';
			context.fillStyle = '#000000';
			context.textAlign = 'center';
			
			for(var i=0; i<this._lines.lines.length; i++)
			{
				context.fillText(this._lines.lines[i], x+(this._width * this._animationProxy.scale / 2), txtY);
				txtY += 14 * this._animationProxy.scale;
			}
		}
		
		txtY += 5;
		
		if(this._tagsLines.lines)
		{
			context.font = (11 * this._animationProxy.scale) + 'px arial';
			context.fillStyle = '#666666';
			context.textAlign = 'center';
			
			for(var i=0; i<this._tagsLines.lines.length; i++)
			{
				context.fillText(this._tagsLines.lines[i], x+(this._width * this._animationProxy.scale / 2), txtY);
				txtY += 10 * this._animationProxy.scale;
			}
		}
		
		if(this._image)
		{
			this.renderImage();
		}
		
		context.restore();
	},
	
	renderImage: function(){
		
		var context = window.mainCanvas.getContext();
		context.save();
		context.globalAlpha = this._animationProxy.opacity;
		
		var x = this._renderedCoords[0] - (this._width * (this._animationProxy.scale - 1) / 2);
		var y = this._renderedCoords[1] - (this._height * (this._animationProxy.scale - 1) / 2);
		
		x += ((this._width - this._image.get(0).width) / 2 * this._animationProxy.scale);
		context.fillStyle = '#ffd204';
		context.fillRect(x, y, 132 * this._animationProxy.scale, 132* this._animationProxy.scale, true);
		//context.drawImage(this._image.get(0), imageX+2, this._renderedCoords[1]+2);
		
		context.drawImage(this._image.get(0), x+(2*this._animationProxy.scale), y+(2*this._animationProxy.scale), this._image.get(0).width * this._animationProxy.scale, this._image.get(0).height * this._animationProxy.scale);
		
		context.restore();
		this._eventDispatcher.trigger('renderComplete');
	}
});

/**************** YOUTUBE *****************/

var YoutubeContentPiece = $.Class.create(ContentPiece, {
	
	_lines : null,
	_image: null,
	
	initialize: function(data){
		this.base('initialize', data);
		
		this._width = 321;
		this._height = 175;
		
		//caption
		this._lines = this.measureTextLines(14, 'arial', this._data.yt_title.split(' '), 321);
		this._height += this._lines.height;
		
		//taglines
		this.setAndMeasureTagLines(11, 'arial');
		this._height += this._tagsLines.height + 10;
		
		var widestTextWidth = (this._lines.width > this._tagsLines.width)? this._lines.width : this._tagsLines.width;
		if(widestTextWidth > this._width) this._width = widestTextWidth;		
		
		this.initImage(this._data.yt_thumbnail_image_location, {self:this}, function(evt){
			evt.data.self._image = $(evt.currentTarget);
			if(evt.data.self._renderedCoords) evt.data.self.renderImage();
		});
	},
	
	render: function(x, y, context){
		this.base('render', x, y, context);
		
		context.save();
		context.globalAlpha = this._animationProxy.opacity;
		
		x -= this._width * (this._animationProxy.scale - 1) / 2;
		y -= this._height * (this._animationProxy.scale - 1) / 2;
		
		var txtY = y + (195 * this._animationProxy.scale);
		
		if(this._lines)
		{
			context.font = (14 * this._animationProxy.scale) + 'px arial';
			context.fillStyle = '#669900';
			
			for(var i=0; i<this._lines.lines.length; i++)
			{
				context.fillText(this._lines.lines[i], x, txtY);
				txtY += 14 * this._animationProxy.scale;
			}
		}
		
		txtY += 5;
		
		if(this._tagsLines.lines)
		{
			context.font = (11 * this._animationProxy.scale) + 'px arial';
			context.fillStyle = '#666666';
			
			for(var i=0; i<this._tagsLines.lines.length; i++)
			{
				context.fillText(this._tagsLines.lines[i], x, txtY);
				txtY += 10 * this._animationProxy.scale;
			}
		}
		
		if(this._image)
		{
			this.renderImage();
		}
		
		context.restore();
	},
	
	renderImage: function(){
		
		var context = window.mainCanvas.getContext();
		context.save();
		context.globalAlpha = this._animationProxy.opacity;
		
		
		var x = this._renderedCoords[0] - (this._width * (this._animationProxy.scale - 1) / 2);
		var y = this._renderedCoords[1] - (this._height * (this._animationProxy.scale - 1) / 2);
		
		context.fillStyle = '#000000';
		context.fillRect(x, y, 325*this._animationProxy.scale, 179*this._animationProxy.scale);
		context.drawImage(this._image.get(0), x+2, y+2, 321*this._animationProxy.scale, 175*this._animationProxy.scale);
		
		context.beginPath();
		context.fillRect(x + ((160 - 25) * this._animationProxy.scale), y + ((85 - 15)* this._animationProxy.scale), 50* this._animationProxy.scale, 30* this._animationProxy.scale);
		context.strokeStyle = 'white';
		context.strokeRect(x + ((160 - 25) * this._animationProxy.scale), y + ((85 - 15)* this._animationProxy.scale), 50* this._animationProxy.scale, 30* this._animationProxy.scale);
		
		context.closePath();
		context.beginPath();
		context.fillStyle = '#ffffff';
		context.moveTo(x + ((160 - 25 + 15)* this._animationProxy.scale), y + ((85 - 15 + 5)* this._animationProxy.scale));
		context.lineTo(x + ((160 + 25 - 15)* this._animationProxy.scale), y + ((85 - 15 + 15)* this._animationProxy.scale));
		context.lineTo(x + ((160 - 25 + 15)* this._animationProxy.scale), y + ((85 - 15 + 25)* this._animationProxy.scale));
		context.lineTo(x + ((160 - 25 + 15)* this._animationProxy.scale), y + ((85 - 15 + 5)* this._animationProxy.scale));
		context.fill();
		context.closePath();
		context.restore();
		this._eventDispatcher.trigger('renderComplete');
	}
});


/********************* IMAGE **********************/

var ImageContentPiece = $.Class.create(ContentPiece, {
	
	_image: null,
	
	initialize: function(data){
		this.base('initialize', data);
		
		this._width = this._data.i_width;
		this._height = this._data.i_height;
		
		this.setAndMeasureTagLines(11, 'arial');
		
		this.initImage(this._data.i_image_location, {self:this}, function(evt){
			evt.data.self._image = $(evt.currentTarget);
			if(evt.data.self._renderedCoords) evt.data.self.renderImage();
		});
	},
	
	render: function(x, y, layerName){
		this.base('render', x, y, layerName);
		
		if(this._image) this.renderImage();
	},
	
	renderImage: function(){
		var context = window.mainCanvas.getContext();
		context.save();
		context.globalAlpha = this._animationProxy.opacity;
		context.drawImage(this._image.get(0), this._renderedCoords[0], this._renderedCoords[1]);
		context.restore();
		this._eventDispatcher.trigger('renderComplete');
	}
});

/********************* LOGO **********************/

var LogoContentPiece = $.Class.create(ContentPiece, {
	
	_image: null,
	
	initialize: function(){
		
		this.base('initialize', {type: 'logo', content_piece_id: 'logo'});
		
		this._width = 154;
		this._height = 138;
		this.initImage('fe/includes/im/logo.png', {self:this}, function(evt){
			evt.data.self._image = $(evt.currentTarget);
			if(evt.data.self._renderedCoords) evt.data.self.renderImage();
			$('body').trigger('initItemLoaded');
		});
	},
	
	onMouseOut: function(){
		return false;
	},
	
	onMouseOver: function(){
		return false;
	},
	
	onClick: function(){
		return false;
	},
	
	render: function(x, y, layerName){
		this.base('render', x, y, layerName);
		if(this._image) this.renderImage();
	},
	
	renderImage: function(){
		var context = window.mainCanvas.getContext();
		context.save();
		context.globalAlpha = this._animationProxy.opacity;
		context.drawImage(this._image.get(0), this._renderedCoords[0], this._renderedCoords[1]);
		context.restore();
		this._eventDispatcher.trigger('renderComplete');
	}
});

/********************* FIRST PROMPT **********************/

var FirstPromptContentPiece = $.Class.create(ContentPiece, {
	
	_image: null,
	
	initialize: function(){
		this.base('initialize', {type: 'first_prompt', content_piece_id: 'first_prompt'});
		
		this._width = 247;
		this._height = 208;
		this._forcedBoxCoords = [-70,-70];
		
		this.initImage('fe/includes/im/first_prompt.png', {self:this}, function(evt){
			evt.data.self._image = $(evt.currentTarget);
			if(evt.data.self._renderedCoords) evt.data.self.renderImage();
			$('body').trigger('initItemLoaded');
		});
	},
	
	render: function(x, y, layerName){
		this.base('render', x, y, layerName);
		if(this._image) this.renderImage();
	},
	
	renderImage: function(){
		var context = window.mainCanvas.getContext();
		context.save();
		context.globalAlpha = this._animationProxy.opacity;
		
		var x = this._renderedCoords[0] - (this._width * (this._animationProxy.scale - 1) / 2);
		var y = this._renderedCoords[1] - (this._height * (this._animationProxy.scale - 1) / 2);
		
		context.drawImage(this._image.get(0), x, y, this._image.get(0).width * this._animationProxy.scale, this._image.get(0).height * this._animationProxy.scale);
		context.restore();
		this._eventDispatcher.trigger('renderComplete');
	},
	
	onClick: function(){
		this.animate({opacity:0, time:1, onComplete: function(contentPiece){
			window.mainCanvas.onAnimationComplete(contentPiece);
		}, onCompleteParams: [this]});
	}
});


/********************* WELCOME **********************/

var WelcomeContentPiece = $.Class.create(ContentPiece, {
	
	_image: null,
	
	initialize: function(){
		this.base('initialize', {type: 'first_prompt', content_piece_id: 'first_prompt'});
		
		this._width = 291;
		this._height = 110;
		this._forcedBoxCoords = [30,-30];
		
		this.initImage('fe/includes/im/welcome.png', {self:this}, function(evt){
			evt.data.self._image = $(evt.currentTarget);
			if(evt.data.self._renderedCoords) evt.data.self.renderImage();
			$('body').trigger('initItemLoaded');
		});
	},
	
	render: function(x, y, layerName){
		this.base('render', x, y, layerName);
		if(this._image) this.renderImage();
	},
	
	renderImage: function(){
		var context = window.mainCanvas.getContext();
		context.save();
		context.globalAlpha = this._animationProxy.opacity;
		
		var x = this._renderedCoords[0] - (this._width * (this._animationProxy.scale - 1) / 2);
		var y = this._renderedCoords[1] - (this._height * (this._animationProxy.scale - 1) / 2);
		
		context.drawImage(this._image.get(0), x, y, this._image.get(0).width * this._animationProxy.scale, this._image.get(0).height * this._animationProxy.scale);
		context.restore();
		this._eventDispatcher.trigger('renderComplete');
	},
	
	onClick: function(){
		return false;
	},
	
	onMouseOver: function(){
		return false;
	}
});


/********************* FIND ON FACEBOOK **********************/

var FindUsOnFacebookContentPiece = $.Class.create(ContentPiece, {
	
	_image: null,
	
	initialize: function(){
		this.base('initialize', {type: 'find_on_facebook', content_piece_id: 'find_on_facebook'});
		
		this._width = 148;
		this._height = 164;
		this._forcedBoxCoords = [-120,-80];
		
		this.initImage('fe/includes/im/find_us_on_fb.png', {self:this}, function(evt){
			evt.data.self._image = $(evt.currentTarget);
			if(evt.data.self._renderedCoords) evt.data.self.renderImage();
			$('body').trigger('initItemLoaded');
		});
	},
	
	render: function(x, y, layerName){
		this.base('render', x, y, layerName);
		if(this._image) this.renderImage();
	},
	
	renderImage: function(){
		var context = window.mainCanvas.getContext();
		context.save();
		context.globalAlpha = this._animationProxy.opacity;
		
		var x = this._renderedCoords[0] - (this._width * (this._animationProxy.scale - 1) / 2);
		var y = this._renderedCoords[1] - (this._height * (this._animationProxy.scale - 1) / 2);
		
		context.drawImage(this._image.get(0), x, y, this._image.get(0).width * this._animationProxy.scale, this._image.get(0).height * this._animationProxy.scale);
		context.restore();
		this._eventDispatcher.trigger('renderComplete');
	},
	
	onClick: function(){
		window.open('http://www.facebook.com/BatesAsia');
	}
});

/********************* MANIFESTO ARROW **********************/

var ManifestoArrowContentPiece = $.Class.create(ContentPiece, {
	
	_image: null,
	
	initialize: function(){
		this.base('initialize', {type: 'manifesto_arrow', content_piece_id: 'manifesto_arrow'});
		
		this._width = 116;
		this._height = 81;
		this._forcedBoxCoords = [-7,-7];
		this.initImage('fe/includes/im/manifesto_arrow.png', {self:this}, function(evt){
			evt.data.self._image = $(evt.currentTarget);
			if(evt.data.self._renderedCoords) evt.data.self.renderImage();
			$('body').trigger('initItemLoaded');
		});
	},
	
	render: function(x, y, layerName){
		this.base('render', x, y, layerName);
		if(this._image) this.renderImage();
	},
	
	renderImage: function(){
		var context = window.mainCanvas.getContext();
		context.save();
		context.globalAlpha = this._animationProxy.opacity;
		
		var x = this._renderedCoords[0] - (this._width * (this._animationProxy.scale - 1) / 2);
		var y = this._renderedCoords[1] - (this._height * (this._animationProxy.scale - 1) / 2);
		
		context.drawImage(this._image.get(0), x, y, this._image.get(0).width * this._animationProxy.scale, this._image.get(0).height * this._animationProxy.scale);
		context.restore();
		this._eventDispatcher.trigger('renderComplete');
	},
	
	onClick: function(){
		window.location=baseURL + '/home/index/about';
	}
});

/********************* MANIFESTO **********************/

var ManifestoContentPiece = $.Class.create(ContentPiece, {
	
	_image: null,
	
	initialize: function(){
		this.base('initialize', {type: 'manifesto', content_piece_id: 'manifesto'});
		
		this._width = 296;
		this._height = 408;
		this.initImage('fe/includes/im/manifesto.png', {self:this}, function(evt){
			evt.data.self._image = $(evt.currentTarget);
			if(evt.data.self._renderedCoords) evt.data.self.renderImage();
			$('body').trigger('initItemLoaded');
		});
	},
	
	render: function(x, y, layerName){
		this.base('render', x, y, layerName);
		if(this._image) this.renderImage();
	},
	
	renderImage: function(){
		var context = window.mainCanvas.getContext();
		context.save();
		context.globalAlpha = this._animationProxy.opacity;
		context.drawImage(this._image.get(0), this._renderedCoords[0], this._renderedCoords[1]);
		context.restore();
		this._eventDispatcher.trigger('renderComplete');
	},
	
	onMouseOut: function(){
		return false;
	},
	
	onMouseOver: function(){
		return false;
	},
	
	onClick: function(){
		return false;
	}
});

/********************* PARALLAX **********************/

var BubbleParallaxContentPiece = $.Class.create(ContentPiece, {
	_imageURL: 'fe/includes/im/bubbles_parallax.png',
	_image: null,
	
	initialize: function(){
		this.base('initialize', {});
		
		this._width = 700;
		this._height = 470;
		
		this._animationProxy.opacity = 0.5;
		this._animationProxy.scale = 2;
		
		this.initImage(this._imageURL, {self:this}, function(evt){
			evt.data.self._image = $(evt.currentTarget);
			if(evt.data.self._renderedCoords) evt.data.self.renderImage();
			$('body').trigger('initItemLoaded');
		});
	},
	
	render: function(x, y, layerName){
		this.base('render', x, y, layerName);
		if(this._image) this.renderImage();
		
	},
	
	renderImage: function(){
		var context = window.parallaxCanvas.getContext();
		context.save();
		context.globalAlpha = this._animationProxy.opacity;
		if(!$.browser.msie)context.scale(this._animationProxy.scale, this._animationProxy.scale);
		context.drawImage(this._image.get(0), this._renderedCoords[0], this._renderedCoords[1]);
		context.restore();
	}
});


/******************** LOADING **********************/

function show_loading()
{
	$('.loading_indicator').css('display', 'block');
	$('.loading_indicator').fadeTo(300,1);
}

function hide_loading()
{
	$('.loading_indicator').fadeTo(300,0, force_hide_loading);
}

function force_hide_loading()
{
	$('.loading_indicator').fadeTo(0,0);
	$('.loading_indicator').css('display', 'none');
}