(function(){
	var TMJ={
		$b:$('body'),
		$w:$(window),
		stack:null,
		Canvas:new CanvasTools.Canvas('cvsImage'),
		init:function(){
			
			this.width=this.$w.width();
			this.height=this.$w.height();
			
			$('[data-toggles]').click(function(){
				$h=$($(this).data('toggles'));
				$h.toggle(0,function(){
					$t=$(this);
					if ($t.is(':visible')) {
						$h.removeClass('off').addClass('on');
					} else {
						$h.removeClass('on').addClass('off');
					}
				});
				return false;
			});
			
			$(".draggable").draggable({"handle":".handle" });

			/* when user resizes the artboard the rulers need to remain aligned */
			var topRuler = $('#cvsRulerTop')
			,leftRuler = $('#cvsRulerLeft')
			,cvsWrapper = $('#cvsWrapper');
			$('#artboard').resizable({minHeight:409,minWidth:515, resize:function(event,ui) {
				topRuler.css({"background-position":"-"+(2000-(cvsWrapper.width()-500)/2)+"px 0"});
				leftRuler.css({"background-position":"0px -"+(2000-(cvsWrapper.height()-375)/2)+"px"});				
			}});
			
			/* when user clicks an eye, set that layer to inactive and re-render */
			$('#layers .stack a.eye').live('click',function(){
				
				var $t=$(this),
				i=$t.parent().data('index');
				if (!$t.hasClass('off')) {
					TMJ.stack.layers[i].active=false;
					$t.addClass('off');
				} else {
					TMJ.stack.layers[i].active=true;
					$t.removeClass('off');
				}
				TMJ.render(TMJ.canvas,TMJ.stack);
			});
			
			/* when user clicks a layer */
			$('#layers .stack figure').live('click',function(){
				var $t=$(this).parent()
				,i=$t.data('index');
				$t.addClass('selected').siblings('.selected').removeClass('selected').parents('#layers').find('.blendOpacity select').val(TMJ.stack.layers[i].blend).siblings('label').children('input').val((TMJ.stack.layers[i].opacity*100)+"%");
				blendOpacitySlider.slider('value',TMJ.stack.layers[i].opacity*100);
				TMJ.stack.layers.forEach (function(element){
					element.selected=false;
				});
				
				TMJ.stack.layers[i].selected=true;
			});
			
			/* handle blending mode change */
			$('#layers .blendOpacity select.blend').change(function(){
				var $t=$(this),
				i=$('#layers .stack .selected').data('index');
				TMJ.stack.layers[i].blend=$t.val();
				TMJ.render(TMJ.canvas,TMJ.stack);
			});
			
			/* handle opacity change */
			var blendOpacityInput = $('#layers .blendOpacity input').change(function(){
				var $t=$(this),
				i=$('#layers .stack .selected').data('index');
				TMJ.stack.layers[i].opacity=parseInt($t.val(),10)/100;
				TMJ.render(TMJ.canvas,TMJ.stack);
			}).focus(function(){
				blendOpacityWrapper.show();
			});
			
			/* opacity slider */
			var blendOpacityWrapper = $('#layers .blendOpacity .slider-wrapper').mouseleave(function(){
				blendOpacityWrapper.hide();
			});
			
			var blendOpacitySlider = $('#layers .blendOpacity .slider-track').slider({
				"slide":function(event,ui){
					blendOpacityInput.val(ui.value+'%');
				}
				,"stop":function(){
					blendOpacityInput.trigger('change');
				}
			});
						
			$.getJSON('/imgs/tmj.json',function(stack){
				TMJ.stack = stack;
				TMJ.render();
			});

		},
		render:function() {

			var tempCanvas = new CanvasTools.Canvas(),
			img,
			i=0,
			f=0,
			ul=[],
			draw=function () {
				

				tempCanvas.setDimensions(TMJ.Canvas.getWidth(),TMJ.Canvas.getHeight());

				
				var output = function(){
					
					/*
for (ix in TMJ.stack.layers[i]) {
						if (ix!='image') {
							console.debug(ix+' : '+TMJ.stack.layers[i][ix]);
						}

					}
*/
					
					if (img) {
						/* draw image data to canvas */
						tempCanvas.context.drawImage(img,0,0);
					} else {
						/* TODO: support gradient fills and fill areas */
						tempCanvas.context.fillStyle=TMJ.stack.layers[i].fill;
						tempCanvas.context.fillRect(0,0,TMJ.Canvas.getWidth(),TMJ.Canvas.getHeight());
					}
					
					if ('object'==typeof TMJ.stack.layers[i].filters) {
						for (f in TMJ.stack.layers[i].filters) {
							if (TMJ.stack.layers[i].filters[f].active) {
								tempCanvas.filter(TMJ.stack.layers[i].filters[f].filter,TMJ.stack.layers[i].filters[f].options);
							}
						}
					}
					
					ul.unshift('<li data-index="'+i+'" class="'+(TMJ.stack.layers[i].selected?'selected':'')+'"><a class="eye'+(TMJ.stack.layers[i].active?'':' off')+'" href="#">toggle</a><figure><img alt="" src="'+tempCanvas.getPNG()+'"><figcaption contenteditable="true">'+TMJ.stack.layers[i].name+'</figcaption></figure></li>');
					
					
					/* blend that canvas with the rendering canvas */
					if (TMJ.stack.layers[i].active) {
						TMJ.Canvas.blend(TMJ.stack.layers[i].blend,tempCanvas,TMJ.stack.layers[i].opacity);
					}
					
					/* increment index */
					i++;
					
					/* recursive call to draw if there is another layer */
					if ('object'==typeof TMJ.stack.layers[i]) {
						draw();
					} else {
						$('#layers ul.stack').html(ul.join(''));
					}
					
				}; /* end output() */
				
				if (TMJ.stack.layers[i].image) {
					img = new Image(); /* dataUrl must first be made into an Image object*/
					img.onload=output;
					img.src=TMJ.stack.layers[i].image;	
				} else if (TMJ.stack.layers[i].fill) {
					img=false;
					output();
				}
			}; /* end draw() */
			 
			tempCanvas.context.fillStyle='white';
			tempCanvas.context.fillRect(0,0,TMJ.Canvas.getWidth(),TMJ.Canvas.getHeight());

			draw();
		}
	};

	window.TMJ=TMJ;
})()