var interaction = (function($, artisan, window, undefined) {
	var scheme = ['#8E6A0D', '#7B780F', '#9B1B06', '#EF2A14', '#DE5322', '#AA9116', '#BD9C46', '#D7A324', '#CABA57'];
	var lowlights = ['#1D222D', '#293947'];
	var mids = ['#ccc', '#efefef', '#fafafa', '#dddddd', '#eeeeee', '#e2e2e2', '#bbbbbb', '#aaaaaa'];
	var hilights = ['#ffffff'];
	var doc_width = $(window).width();
	var doc_width_half = doc_width / 2;
	var doc_height = $(window).height();
	var doc_height_half = doc_height / 2;

	return {
		define: {
			canvas: function() {
			
			},
			stack: function(){
				var colors = [];
			},
			defaultColors: function(new_default){
				default_colors = new_default;
			}
		},
		create_stacks: function(){
			artisan.create.stack();
			artisan.create.layer(1);
			artisan.create.layer(1);
			artisan.create.layer(1);
			artisan.create.layer(1);
			artisan.create.layer(1);
		},
		create_boxes: function(){
			// Color the background with a giant rectangle on layer 0
			var background_rectangle = [0, 0, '100%', '100%', hilights];
			artisan.addToHistory(1, 0, 0, 'rectangle', background_rectangle);
			var foreground_rectangle = [0, 0, '100%', '100%', hilights, null, null, .1];
			//artisan.addToHistory(1, 4, 0, 'rectangle', foreground_rectangle);

			var x = 0;
			var y = 0;

			for (i=0; i < 100; i++){
				var placex4 = x * 10 + '%';
				var placey4 = y * 10 + '%';
				if (x < 9) {
					x++;
				} else {
					x = 0;
					y++;
				}
				var teh_alfa = (artisan.randomize(3, 9) / 10);
				var remover = artisan.randomize(0, 9);
				if (remover < 3) {
					//start_x, start_y, width, height, fill_color, line_width, stroke_color, alpha
					var square_tile = [placex4, placey4, '10%', '10%', mids, null, null, teh_alfa];
					artisan.addToHistory(1, 3, 0, 'rectangle', square_tile);
					artisan.addToHistory(1, 4, 0, 'rectangle', square_tile);
				}
			}
		},	
		draw_some_art: function(){
			artisan.drawLayer('layer1', 1, 0, 0);
			artisan.drawLayer('layer1', 1, 3, 0);
			artisan.drawLayer('layer2', 1, 0, 0);
		},
		fade_elements: function(){
			if ($('#layer2').hasClass('to_fade_out')) {
				artisan.clearCanvas('layer1');
				artisan.drawLayer('layer1', 1, 0, 0);
				artisan.drawLayer('layer1', 1, 4, 0);
				// This is what you do if the top layer is still visible
				$('#layer2').animate({
					opacity: 0
				}, 1000);

				$('#layer2').removeClass('to_fade_out');
				//console.log('out');
			} else {
				artisan.clearCanvas('layer2');
				artisan.drawLayer('layer2', 1, 0, 0);
				artisan.drawLayer('layer2', 1, 4, 0);
				// This is what should happen if the top layer is hidden
				$('#layer2').animate({
					opacity: 1
				}, 1000);

				$('#layer2').addClass('to_fade_out');
			}
		},
		fade_new_colors: function(){
			if ($('#layer2').hasClass('to_fade_out')) {
				artisan.clearCanvas('layer1');
				artisan.drawLayer('layer1', 1, 0, 0);
				artisan.drawLayer('layer1', 1, 5, 0);
				// This is what you do if the top layer is still visible
				$('#layer2').animate({
					opacity: 0
				}, 1000);
				$('#layer2').removeClass('to_fade_out');
			} else {
				artisan.clearCanvas('layer2');
				artisan.drawLayer('layer2', 1, 0, 0);
				artisan.drawLayer('layer2', 1, 5, 0);
				// This is what should happen if the top layer is hidden
				$('#layer2').animate({
					opacity: 1
				}, 1000);
				$('#layer2').addClass('to_fade_out');
			}
		},
		inject_colors: function() {
			//var color_target = '#' + $('.active_color_shift').attr('id');
			var color_set = $('.active_color_shift').attr('data-colors');
			if (color_set) {
				var new_colors = [];
				var color_range = color_set.split(' ');
				for (c = 0; c < color_range.length; c++) {
					new_colors.push(color_range[c]);
				}
				if (color_range.length > 1) {
					new_colors.sort(function() {return 0.5 - Math.random()});
					artisan.clear.layer(1,5);
					var colors = ['#ccc', '#fafafa', '#dddddd', new_colors[0], new_colors[1], new_colors[2]];
					//var colors = ['#ccc', '#efefef', '#fafafa', new_colors[0], new_colors[1], new_colors[2]];
					
					y = 0;
					x = 0;
					for (i=0; i < 100; i++){
						var placex4 = x * 10 + '%';
						var placey4 = y * 10 + '%';
						if (x < 9) {
							x++;
						} else {
							x = 0;
							y++;
						}
						var teh_alfa = (artisan.randomize(3, 9) / 10);
						var remover = artisan.randomize(0, 9);
						if (remover < 3) {
							//start_x, start_y, width, height, fill_color, line_width, stroke_color, alpha
							var square_tile = [placex4, placey4, '10%', '10%', colors, null, null, teh_alfa];
							artisan.addToHistory(1, 5, 0, 'rectangle', square_tile);
						}
					}
					interaction.fade_new_colors();
				} else {
					interaction.fade_elements();
				}
			} else {
				interaction.fade_elements();
			}
		},
		check_image_orientation: function(image_to_check){
			
			$(image_to_check).load(function(){
				function orient_image() {
					var image_width = parseInt(image_to_check.width());
					var image_height = parseInt(image_to_check.height());

					if (image_height <= image_width) {
						$(image_to_check).addClass('horizontal_image');
					} else {
						$(image_to_check).addClass('vertical_image');
					}
				}
				setTimeout(orient_image, 0);
			});
		}
	};
})(jQuery, artisan, this);

$('document').ready(function(){
		var doc_height = $(document).height();
		var doc_width = $(document).width();
		$('canvas').height(doc_height).width(doc_width);
		$('#attention_grabber').height(doc_height).width(doc_width);
		var standard_background = $('#branding_and_navigation').css('background-color');
		var standard_color = $('#branding_and_navigation').css('color');
		$('.color_shift').hover(
			function () {
		    	$(this).addClass('active_color_shift');
				var new_color = $(this).attr('data-colors');
				new_color = new_color.split(' ')[0];
				interaction.inject_colors();
		    }, 
		    function () {
		    	$(this).removeClass('active_color_shift');
				interaction.inject_colors();
		    }
		);
		if ($('canvas').length){
			interaction.create_stacks();
			interaction.create_boxes();
			interaction.draw_some_art();
			interaction.inject_colors();
		}
		
	
		var image_to_check = $('#photos #main_content p img');
		interaction.check_image_orientation(image_to_check);
	
});