window.index_index = Backbone.View.extend({
	el: $("body"),
	events: {
	},	
	vendors: ["easing","jqcycle"],
	initialize: function(){ var _this = this; munstro.load_vendors(this.vendors, function(){ _this.__construct(); }); },
	
/**
 * Constructor
 */		
	__construct: function(){
		
		// Scale Pic
		window._global.init_height(false);
		
		this.cookie_check();
		$.fn.cycle.defaults.speed   = 1000;
		$(".img_rollover .letter").bind({
			mouseover: function(){
				lpos = $(this).attr("lpos");
				title = $(this).attr("caption");
				$(".word").hide();
				$(".word").css({
					left: lpos+"px"
				});
				$(".word").html(title);
				$(".word").show();
			},
			mouseout: function(){
				$(".word").hide();
			},
			mousedown: function(){
				$(this).fancybox({
					'href':	$(this).attr("href"),
					'type': 'iframe',
					'transitionIn': 'elastic',
					'transitionOut': 'elastic',
					width: 485,
					height: 300,
					//'width': 645,
					//'height': 370,
					'padding':10,
					helpers : {
						title : {
							type : 'inside'
						},
						overlay : {
							css : {
								'background-color' : '#eee'    
							}
						}
					}
				});	
			}
		});	
	},
	
/**
 * Cookie Check
 */			
	cookie_check: function(){
		var _this = this;
		if(!$.cookie('iamscribe_animation')){
			$.cookie('iamscribe_animation', '1', { expires: 7 });
			this.create_intro();	
			setTimeout(function(){
				_this.switch_back();
			}, 3000);
		}else{
			$(".scribe_bg").show();
			$(".index").show();
			$(".header").show();
		}
	},
	
/**
 * Create Intro
 */			
	create_intro: function(){
			
		// Hold the tile content
		tile_content = "";

		// Set the default tile width and height
		tile_width = 200;
		tile_height = 200;		

		// Get the window dimensions
		window_width  = $(window).width();
		window_height = $(window).height();		

		// Grab the columns and rows 
		total_cols = Math.floor(window_width/tile_width)+1;
		total_rows = Math.floor(window_height/tile_height)+1;

		// Create the tiles on the page
		for(rows=0;rows<total_rows;rows++){

			// Add a new row
			if(rows > 0) tile_content+="<div class=\"clear\"></div>";

			// Create the columns
			for(cols=0;cols<total_cols;cols++){

				// Select the image
				image_str = faces[Math.floor(Math.random() * faces.length)];

				// Start the new intro animation div
				tile_content+= "<div class=\"animation\" style=\"width:" + tile_width + "px;height:" + tile_height + "px\">";

				// Add in the different layers of animation (using cycle plugin)
				tile_content+= "<div class=\"blackbox\"></div>";
				tile_content+= "<img src=\"" + image_str + "\" height=\"200\" width=\"200\"/>";

				// End the intro animation div
				tile_content+= "</div>";
			}	
		}

		// Append the tile content to the intro layer
		$("body").append('<div id="front_animation"><div class="intro"></div></div>');
		$(".intro").append(tile_content);
		$(".intro").css({"width":(total_cols*tile_width)+"px", "height":(total_rows*tile_height)+"px"});

		// Create the cycle 
		$('.animation').each(function(){
			if(Math.floor(Math.random() * 0) == 0){
				speed = 200;
				$(this).cycle({
					fx: 'zoom',
					speed: speed,
					timeout: Math.floor(Math.random() * 1500)+500,
					autostop:      1, 
					autostopCount: 2,
					randomizeEffects: 0
				});
			}
		});		

	},
		
/**
 * Switch pictures back to the background
 */	
	switch_back: function(){

		// Timer variables
		timer = 0;
		timer_row_inc = 200;
		timer_col_inc = 200;

		// Keep track of the rows and columns
		middle_row = Math.floor(rows/2);
		row_counter = 0;
		col_counter = -1;
		distance = Math.abs(middle_row-row_counter);

		// Initialize the timer
		timer = timer_row_inc*distance;

		// Place the logo into the background
		$("#front_animation").append("<img src=\"_public/img/logo.png\" style=\"z-index:1;position:absolute;top:50%;left:50%;margin-top:-50px;margin-left:-400px;\">");		

		// Loop through each animation and make it happen
		$('.animation').each(function(){		

			// Keep track of the columns and rows
			col_counter++;	
			if(col_counter >= cols){
				row_counter++;
				col_counter = 0;
			}

			// Track the distance from the middle row
			distance = Math.abs(middle_row-row_counter);			

			if(distance == 0){
				// Add the column to the timer
				timer = (timer_row_inc*distance)+((col_counter*timer_col_inc)-600);
				if(timer == 0) timer = 10;
			}else{
				timer = (timer_row_inc*distance)+(col_counter*timer_col_inc);
				if(timer == 0) timer = 10;
			}				

			// Make the animation
			$(this).cycle({
				timeout:  timer,
				fx: 'scrollLeft',
				//easing: 'easeOutBounce',
				autostop:      1, 
				autostopCount: 2,
				startingSlide: 1,
				randomizeEffects: 0,		
				speed: 250			
			});
		});	
		$("#front_animation").delay(3000).fadeOut(function(){
			$(".scribe_bg").fadeIn();
			$(".index").fadeIn();
			$(".header").fadeIn();
		});
	}
});

if(!$.cookie('iamscribe_animation')){
	$.preLoadImages = function(array) {
		for(i=0;i<array.length;i++){
			$('<img />').attr('src', array[i]).attr('style', "display:none").load(function(){ $("body").append( $(this)); });		
		}
	}
	var faces = new Array();
	for(x=1;x<19;x++) faces[x-1] = "_public/img/front_animation/face"+x+".jpg";
	jQuery.preLoadImages(faces);
	other = new Array();
	other[0] = "_public/img/logo.png";
	jQuery.preLoadImages(other);
}

if(!$.cookie('iamscribe_animation')){
	$(window).load(function(){
		var _index_index = new window.index_index;
	});
}else{
	var _index_index = new window.index_index;
}