/**
 * randomly swap background image and animate in text.
 */
function TextAni(){

    /** VARIABLES */
    this.bkrnd_array = new Array;
    this.bkrnd_array[0] = new Array;
    this.bkrnd_array[0]["url"] = "images/bkrnds/hp_image_1_placement.jpg";
    this.bkrnd_array[0]["top_top_img"] = "images/bkrnds/image1_top_top.jpg";
    this.bkrnd_array[0]["top_bottom_img"] = "images/bkrnds/image1_top_bottom.jpg";
    this.bkrnd_array[0]["bottom_top_img"] = "images/bkrnds/image1_bottom_top.jpg";
    this.bkrnd_array[0]["bottom_bottom_img"] = "images/bkrnds/image1_bottom_bottom.jpg";
    
    this.bkrnd_array[0]['top_container_x'] = 27;
    this.bkrnd_array[0]['top_container_y'] = 15;
    
    this.bkrnd_array[0]["top_start_x"] = 0;
    this.bkrnd_array[0]["top_top_start_y"] = 0;
    this.bkrnd_array[0]["top_btm_start_y"] = 19;
    
    this.bkrnd_array[0]['bottom_container_x'] = 219;
    this.bkrnd_array[0]['bottom_container_y'] = 56;
    
    this.bkrnd_array[0]["bottom_start_x"] = 0;
    this.bkrnd_array[0]["bottom_top_start_y"] = 0;
    this.bkrnd_array[0]["bottom_btm_start_y"] = 32;
    
    this.bkrnd_array[0]['top_line_y'] = 48;
    this.bkrnd_array[0]['top_line_x_end'] = 38;
	this.bkrnd_array[0]['bottom_line_1_y'] = 70;
	this.bkrnd_array[0]['bottom_line_2_y'] = 86;
	this.bkrnd_array[0]['bottom_line_3_y'] = 102;
	this.bkrnd_array[0]['bottom_line_4_y'] = 118;
	this.bkrnd_array[0]['bottom_line_x_end'] = 224;
	this.bkrnd_array[0]['line_x_start'] = 800;

    
    this.bkrnd_array[1] = new Array;
    this.bkrnd_array[1]["url"] = "images/bkrnds/hp_image_2_placement.jpg";
    this.bkrnd_array[1]["top_top_img"] = "images/bkrnds/image2_top_top.jpg";
    this.bkrnd_array[1]["top_bottom_img"] = "images/bkrnds/image2_top_bottom.jpg";
    this.bkrnd_array[1]["bottom_top_img"] = "images/bkrnds/image2_bottom_top.jpg";
    this.bkrnd_array[1]["bottom_bottom_img"] = "images/bkrnds/image2_bottom_bottom.jpg";
    
    this.bkrnd_array[1]['top_container_x'] = 27;
    this.bkrnd_array[1]['top_container_y'] = 15;
    
    this.bkrnd_array[1]["top_start_x"] = 0;
    this.bkrnd_array[1]["top_top_start_y"] = 0;
    this.bkrnd_array[1]["top_btm_start_y"] = 19;
    
    this.bkrnd_array[1]['bottom_container_x'] = 219;
    this.bkrnd_array[1]['bottom_container_y'] = 560;
    
    this.bkrnd_array[1]["bottom_start_x"] = 0;
    this.bkrnd_array[1]["bottom_top_start_y"] = 0;
    this.bkrnd_array[1]["bottom_btm_start_y"] = 32;
    
    this.bkrnd_array[1]['top_line_y'] = 48;
    this.bkrnd_array[1]['top_line_x_end'] = 38;
	this.bkrnd_array[1]['bottom_line_1_y'] = 70;
	this.bkrnd_array[1]['bottom_line_2_y'] = 86;
	this.bkrnd_array[1]['bottom_line_3_y'] = 102;
	this.bkrnd_array[1]['bottom_line_4_y'] = 118;
	this.bkrnd_array[1]['bottom_line_x_end'] = 224;
	this.bkrnd_array[1]['line_x_start'] = 800;
    
    this.bkrnd_array[2] = new Array;
    this.bkrnd_array[2]["url"] = "images/bkrnds/hp_image_3_placement.jpg";
    this.bkrnd_array[2]["top_top_img"] = "images/bkrnds/image3_top_top.jpg";
    this.bkrnd_array[2]["top_bottom_img"] = "images/bkrnds/image3_top_bottom.jpg";
    this.bkrnd_array[2]["bottom_top_img"] = "images/bkrnds/image3_bottom_top.jpg";
    this.bkrnd_array[2]["bottom_bottom_img"] = "images/bkrnds/image3_bottom_bottom.jpg";
    
    this.bkrnd_array[2]['top_container_x'] = 27;
    this.bkrnd_array[2]['top_container_y'] = 15;
    
    this.bkrnd_array[2]["top_start_x"] = 0;
    this.bkrnd_array[2]["top_top_start_y"] = 0;
    this.bkrnd_array[2]["top_btm_start_y"] = 19;
    
    this.bkrnd_array[2]['bottom_container_x'] = 27;
    this.bkrnd_array[2]['bottom_container_y'] = 56;
    
    this.bkrnd_array[2]["bottom_start_x"] = 0;
    this.bkrnd_array[2]["bottom_top_start_y"] = 0;
    this.bkrnd_array[2]["bottom_btm_start_y"] = 32;
    
    this.bkrnd_array[2]['top_line_y'] = 48;
    this.bkrnd_array[2]['top_line_x_end'] = 38;
	this.bkrnd_array[2]['bottom_line_1_y'] = 70;
	this.bkrnd_array[2]['bottom_line_2_y'] = 86;
	this.bkrnd_array[2]['bottom_line_3_y'] = 102;
	this.bkrnd_array[2]['bottom_line_4_y'] = 118;
	this.bkrnd_array[2]['bottom_line_x_end'] = 224;
	this.bkrnd_array[2]['line_x_start'] = 800;
    
    this.background_div = document.getElementById('content');
	this.lineUrl = "images/bkrnds/hp_reveal_line.gif";
	this.whicharray = Math.round(Math.random()*2);

    /** ASSIGNMENTS */
    this.init = init;
    this.move = move;


    //run init
    this.init();


    /** FUNCTIONS */

    //as close to a constructor as i can get in javascript.  randomly choose an array w/image and xpos ypos info.  and then, do stuff.
    function init(){
		//get info
		var array = this.bkrnd_array[this.whicharray];
		//set bg
		this.background_div.style.backgroundImage = "url(" + array['url']  + ")";
		
		//create holder divs
		var top_text = document.createElement('div');
		var bottom_text = document.createElement('div');
		top_text.id = "top_text";
		bottom_text.id = "bottom_text";
		
		//create divs for image covers
		var toptop_cover = document.createElement('div');
		var topbtm_cover = document.createElement('div');
		var btmtop_cover = document.createElement('div');
		var btmbtm_cover = document.createElement('div');
		
		//set div ids
		toptop_cover.id = "toptop_cover";
		topbtm_cover.id = "topbtm_cover";
		btmtop_cover.id = "btmtop_cover";
		btmbtm_cover.id = "btmbtm_cover";
		
		
		//set div positions
		top_text.style.left = array['top_container_x'] + "px";
		bottom_text.style.left = array['bottom_container_x'] + "px";
		top_text.style.top = array['top_container_y'] + "px";
		bottom_text.style.top = array['bottom_container_y'] + "px";
		
		toptop_cover.style.left = array['top_start_x'] + "px";
		topbtm_cover.style.left = array['top_start_x'] + "px";
		btmtop_cover.style.left = array['bottom_start_x'] + "px";
		btmbtm_cover.style.left = array['bottom_start_x'] + "px";
		
		toptop_cover.style.top = array['top_top_start_y'] + "px";
		topbtm_cover.style.top = array['top_btm_start_y'] + "px";
		btmtop_cover.style.top = array['bottom_top_start_y'] + "px";
		btmbtm_cover.style.top = array['bottom_btm_start_y'] + "px";
		
		//create images
		var toptop_img = document.createElement('img');
		var topbtm_img = document.createElement('img');
		var btmtop_img = document.createElement('img');
		var btmbtm_img = document.createElement('img');
		
		//set srcs for images
		toptop_img.src = array['top_top_img'];
		topbtm_img.src = array['top_bottom_img'];
		btmtop_img.src = array['bottom_top_img'];
		btmbtm_img.src = array['bottom_bottom_img'];
		
		//set ids for images
		toptop_img.id = "toptop_img";
		topbtm_img.id = "topbtm_img";
		btmtop_img.id = "btmtop_img";
		btmbtm_img.id = "btmbtm_img";
		
		//add images to divs
		toptop_cover.appendChild(toptop_img);
		topbtm_cover.appendChild(topbtm_img);
		btmtop_cover.appendChild(btmtop_img);
		btmbtm_cover.appendChild(btmbtm_img);
		
		//adding divs to document
		top_text.appendChild(toptop_cover);
		top_text.appendChild(topbtm_cover);
		bottom_text.appendChild(btmtop_cover);
		bottom_text.appendChild(btmbtm_cover);
		
		this.background_div.appendChild(top_text);
		this.background_div.appendChild(bottom_text);

		//Creating Lines for animation
		var line1 = document.createElement('div');
		var line2 = document.createElement('div');
		var line3 = document.createElement('div');
		var line4 = document.createElement('div');
		var line5 = document.createElement('div');
		
		//setting line ids
		line1.id = "line1";
		line2.id = "line2";
		line3.id = "line3";
		line4.id = "line4";
		line5.id = "line5";
		
		//setting line positions
		line1.style.top = array['top_line_y'] + "px";
		line2.style.top = array['bottom_line_1_y'] + "px";
		line3.style.top = array['bottom_line_2_y'] + "px";
		line4.style.top = array['bottom_line_3_y'] + "px";
		line5.style.top = array['bottom_line_4_y'] + "px";
		
		line1.style.left = array['line_x_start'] + "px";
		line2.style.left = array['line_x_start'] + "px";
		line3.style.left = array['line_x_start'] + "px";
		line4.style.left = array['line_x_start'] + "px";
		line5.style.left = array['line_x_start'] + "px";

	
		//adding line images to line divs
		var lineimg1 = document.createElement('img');
		var lineimg2 = document.createElement('img');
		var lineimg3 = document.createElement('img');
		var lineimg4 = document.createElement('img');
		var lineimg5 = document.createElement('img');
		
		lineimg1.src = this.lineUrl;
		lineimg2.src = this.lineUrl;
		lineimg3.src = this.lineUrl;
		lineimg4.src = this.lineUrl;
		lineimg5.src = this.lineUrl;
		
		lineimg1.id = 'lineimg1';
		lineimg2.id = 'lineimg2';
		lineimg3.id = 'lineimg3';
		lineimg4.id = 'lineimg4';
		lineimg5.id = 'lineimg5';
		
		line1.appendChild(lineimg1);
		line2.appendChild(lineimg2);
		line3.appendChild(lineimg3);
		line4.appendChild(lineimg4);
		line5.appendChild(lineimg5);
		
		//appending lines to document
		this.background_div.appendChild(line1);
		this.background_div.appendChild(line2);
		this.background_div.appendChild(line3);
		this.background_div.appendChild(line4);
		this.background_div.appendChild(line5);
		
		
    }//end init
    
    function move() {
    	var array = this.bkrnd_array[this.whicharray];
    
    	//moving lines
		new Effect.Move ("line1",{ x: array['top_line_x_end'], y: array['top_line_y'], mode: 'absolute'});
		new Effect.Move ("line2",{ x: array['bottom_line_x_end'], y: array['bottom_line_1_y'], mode: 'absolute', delay: 0});
		new Effect.Move ("line3",{ x: array['bottom_line_x_end'], y: array['bottom_line_2_y'], mode: 'absolute', delay: 0});
		new Effect.Move ("line4",{ x: array['bottom_line_x_end'], y: array['bottom_line_3_y'], mode: 'absolute', delay: 0});
		new Effect.Move ("line5",{ x: array['bottom_line_x_end'], y: array['bottom_line_4_y'], mode: 'absolute', delay: 0});
		
		//fading lines
		new Effect.Opacity('lineimg1', {duration:1.5, from:1, to:0});
		new Effect.Opacity('lineimg2', {duration:1.5, from:.5, to:0, delay: 0});
		new Effect.Opacity('lineimg3', {duration:1.5, from:.5, to:0, delay: 0});
		new Effect.Opacity('lineimg4', {duration:1.5, from:.5, to:0, delay: 0});
		new Effect.Opacity('lineimg5', {duration:1.5, from:.5, to:0, delay: 0});

	//	new Effect.Opacity('lineimg2', {duration:0, from:.3, to:0, delay: 2.7});
	//	new Effect.Opacity('lineimg3', {duration:0, from:.3, to:0, delay: 2.7});
	//	new Effect.Opacity('lineimg4', {duration:0, from:.3, to:0, delay: 2.7});
	//	new Effect.Opacity('lineimg5', {duration:0, from:.3, to:0, delay: 2.7});

		
		//fading in images
		new Effect.Move("toptop_img",{x: 0, y: -50, mode: 'relative', duration: 3}); 
		new Effect.Move("topbtm_img",{x: 0, y: 50, mode: 'relative', duration: 3});
		new Effect.Move("btmtop_img",{x: 0, y: -120, mode: 'relative', duration: 3, delay: .2}); 
		new Effect.Move("btmbtm_img",{x: 0, y: 120, mode: 'relative', duration: 3, delay: .2});
    }

}//end class