var teaser_media = [];
	teaser_media.push({
		id:26		,img:"http://www.howdemocracyworksnow.com/_keepout/home/icon/26.jpg"
		,number:"9"
		,title:"PROTECTING ARIZONA"
	});
	teaser_media.push({
		id:12		,img:"http://www.howdemocracyworksnow.com/_keepout/home/icon/12.jpg"
		,number:"5"
		,title:"THE KIDS ACROSS THE HILL"
	});
	teaser_media.push({
		id:8		,img:"http://www.howdemocracyworksnow.com/_keepout/home/icon/8.jpg"
		,number:"4"
		,title:"SAM IN THE SNOW"
	});
	teaser_media.push({
		id:4		,img:"http://www.howdemocracyworksnow.com/_keepout/home/icon/4.jpg"
		,number:"1"
		,title:"THE GAME IS ON"
	});
	teaser_media.push({
		id:5		,img:"http://www.howdemocracyworksnow.com/_keepout/home/icon/5.jpg"
		,number:"1"
		,title:"THE GAME IS ON"
	});
	teaser_media.push({
		id:32		,img:"http://www.howdemocracyworksnow.com/_keepout/home/icon/32.jpg"
		,number:"11"
		,title:"THE SENATE SPEAKS"
	});
	teaser_media.push({
		id:13		,img:"http://www.howdemocracyworksnow.com/_keepout/home/icon/13.jpg"
		,number:"5"
		,title:"THE KIDS ACROSS THE HILL"
	});
	teaser_media.push({
		id:34		,img:"http://www.howdemocracyworksnow.com/_keepout/home/icon/34.jpg"
		,number:"11"
		,title:"THE SENATE SPEAKS"
	});
	teaser_media.push({
		id:10		,img:"http://www.howdemocracyworksnow.com/_keepout/home/icon/10.jpg"
		,number:"4"
		,title:"SAM IN THE SNOW"
	});
	teaser_media.push({
		id:7		,img:"http://www.howdemocracyworksnow.com/_keepout/home/icon/7.jpg"
		,number:"2"
		,title:"MOUNTAINS AND CLOUDS"
	});
	teaser_media.push({
		id:30		,img:"http://www.howdemocracyworksnow.com/_keepout/home/icon/30.jpg"
		,number:"10"
		,title:"BROTHERS AND RIVALS"
	});
	teaser_media.push({
		id:33		,img:"http://www.howdemocracyworksnow.com/_keepout/home/icon/33.jpg"
		,number:"11"
		,title:"THE SENATE SPEAKS"
	});
	teaser_media.push({
		id:6		,img:"http://www.howdemocracyworksnow.com/_keepout/home/icon/6.jpg"
		,number:"2"
		,title:"MOUNTAINS AND CLOUDS"
	});
	teaser_media.push({
		id:16		,img:"http://www.howdemocracyworksnow.com/_keepout/home/icon/16.jpg"
		,number:"5"
		,title:"THE KIDS ACROSS THE HILL"
	});
	teaser_media.push({
		id:36		,img:"http://www.howdemocracyworksnow.com/_keepout/home/icon/36.jpg"
		,number:"11"
		,title:"THE SENATE SPEAKS"
	});
	teaser_media.push({
		id:29		,img:"http://www.howdemocracyworksnow.com/_keepout/home/icon/29.jpg"
		,number:"10"
		,title:"BROTHERS AND RIVALS"
	});
	teaser_media.push({
		id:19		,img:"http://www.howdemocracyworksnow.com/_keepout/home/icon/19.jpg"
		,number:"6"
		,title:"MARKING UP THE DREAM"
	});
	teaser_media.push({
		id:24		,img:"http://www.howdemocracyworksnow.com/_keepout/home/icon/24.jpg"
		,number:"10"
		,title:"BROTHERS AND RIVALS"
	});
	teaser_media.push({
		id:23		,img:"http://www.howdemocracyworksnow.com/_keepout/home/icon/23.jpg"
		,number:"10"
		,title:"BROTHERS AND RIVALS"
	});
	teaser_media.push({
		id:14		,img:"http://www.howdemocracyworksnow.com/_keepout/home/icon/14.jpg"
		,number:"5"
		,title:"THE KIDS ACROSS THE HILL"
	});


$(document).ready(function() {
	// Handler for .ready() called.
	var x, max, th_div, th_coords;
	var top_pos = 350;
	var left_pos = 100;
	var max_move_amt = 20;
	var move_min = top_pos - max_move_amt;
	var move_max = top_pos + max_move_amt;
	var animation_interval_min = 3000;
	var animation_interval_max = 5000;
	var idle_background_interval = null;
	
	// function to display the video
	var displayMedia = function( data ){
		// initialize vars
		var x, max;

		// loop the media and fade in the right one, disappear the wrong ones
		for( x=0, max=teaser_media.length; x<max; x++ ){
			if( teaser_media[x].id==data.id ){
				// show the corresponding title div
				var ttl_div = '<div class="home_teaser_title" id="home_teaser_title_' + data.id + '">';
				ttl_div += '<p class="home_teaser_story_word">STORY</p>';
				ttl_div += '<p class="home_teaser_story_number">' + data.number + '</p>';
				ttl_div += '<p class="home_teaser_story_title">' + data.title + '</p>';
				ttl_div += '</div>';
				// move it 50px down from top
				$(ttl_div).appendTo('#home_teaser').css({
					'opacity':0
					,'top':'50px'
				});
				
				// ANIMATE THE TITLE IN
				$('#home_teaser_title_'+data.id).animate({
					top: 100
					,opacity: 1
				}, 2000);

				// show corresponding video div
				var vid_el = '<video id="home_teaser_video_' + data.id + '" class="home_teaser_video">';
				vid_el += '<source width="466" height="262" type="video/mp4" src="http://www.howdemocracyworksnow.com/_keepout/home/video/' + data.id + '.mp4"  />';
				vid_el += '<source width="466" height="262" type="video/ogg" src="http://www.howdemocracyworksnow.com/_keepout/home/video/' + data.id + '.ogv"  />';
				vid_el += '</video>';
				$(vid_el).hide().appendTo('#home_teaser');
				$('#home_teaser_video_'+data.id).fadeTo(2000,1);
				// make it disappear upon being played
				$('#home_teaser_video_'+data.id).bind('ended',function(){
					displayMedia( {id:0} );
				});
				$('#home_teaser_video_'+data.id)[0].play();
				
				// expand the hash mark
				expandHash( data.id );
			}
			else{
				// ANIMATE THE TITLE OUT
				if( $('#home_teaser_title_'+teaser_media[x].id).length>0 ){
					$('#home_teaser_title_'+teaser_media[x].id).animate({
						top: 50
						,opacity: 0
					}, 2000, function(){
						$(this).remove();
					});
					//window.console.log( 'faded ' + teaser_media[x].id + ' out' );
				}
				// ANIMATE THE VIDEO OUT
				if( $('#home_teaser_video_'+teaser_media[x].id).length>0 ){
					$('#home_teaser_video_'+teaser_media[x].id).animate({
						opacity: 0
					}, 2000, function(){
						$(this).remove();
					});
					//window.console.log( 'faded ' + teaser_media[x].id + ' out' );
				}
				// collapse the hash mark
				collapseHash( teaser_media[x].id );
			}
		}		

	};	

	// function to create hash mark animation interval
	var setAnimationInterval = function( num ){
		// figure the interval speed
		var th_interval_speed = $.SSRandomFromTo( animation_interval_min, animation_interval_max );
		
		// set the interval that moves the hash mark
		var th_interval = setInterval( function(){
			var new_top = $.SSRandomFromTo( move_min, move_max );
			// move it to the new location
			$('#teaser_hash_'+num).animate({
				top: new_top
			}, 1000);				
		}, th_interval_speed );

		// assign the interval to the object so we can clear it
		$('#teaser_hash_'+num).data( 'move_interval', th_interval );
	};

	// function to create hash mark animation interval
	var clearAnimationInterval = function( num ){
		clearInterval( $('#teaser_hash_'+num).data('move_interval') );
	};
	
	// function to extend the hash line
	var expandHash = function( num ){
		var x, max, min_top, new_height, new_top, top_diff;

		// collapse the other hashes
		for( x=0, max=teaser_media.length; x<max; x++ ){
			if( teaser_media[x].id!=num ){
				collapseHash( teaser_media[x].id );
			}
		}

		// kill the automated animation
		clearAnimationInterval( num );
		
		// get the current position
		var hash_position = $('#teaser_hash_'+num).position();
		
		// based on left value, calculate the new top
		min_top = 320;
		
		// get the difference between the current and minimum
		top_diff = hash_position.top - min_top;
		new_height = 25 + top_diff;
		new_top = hash_position.top-top_diff;
		
		//var this_hash_mark_position = ;
		$('#teaser_hash_mark_'+num).animate({
			height: new_height
		}, 1000);
		$('#teaser_hash_'+num).animate({
			top: new_top
		}, 1000);
		
		// mark this hash mark as active
		$('#teaser_hash_'+num).data( 'is_active', true );
		// make sure the icon is showing
		$('#teaser_hash_icon_' + num).fadeTo( 500, 1 );

	
	};
	
	// function to collapse the hash
	var collapseHash = function( num ){
		var new_height, new_top, top_diff;
		
		// get the current position
		var hash_position = $('#teaser_hash_'+num).position();
		
		// get the difference between the current and minimum
		height_diff = $('#teaser_hash_mark_'+num).height() - 25;
		//window.console.log( height_diff );
		new_height = 25;
		new_top = hash_position.top+height_diff;
		
		//var this_hash_mark_position = ;
		$('#teaser_hash_mark_'+num).animate({
			height: new_height
		}, 1000);
		$('#teaser_hash_'+num).animate({
			top: new_top
		}, 1000);
		
		// mark this hash mark as active
		$('#teaser_hash_'+num).data( 'is_active', false );
		// make sure the icon disappears
		$('#teaser_hash_icon_' + num).fadeTo( 500, 0 );
	
	};

	// loop through all the data and create the hash marks	
	for( x=0, max=teaser_media.length; x<max; x++ ){

		// create the teaser hash mark div
		th_div = '<div id="teaser_hash_' + teaser_media[x].id + '" class="teaser_hash">';
		th_div += '<div class="teaser_hash_mark" id="teaser_hash_mark_' + teaser_media[x].id + '"></div>';
		th_div += '<div class="teaser_hash_icon" id="teaser_hash_icon_' + teaser_media[x].id + '"></div>';
		th_div += '</div>';
		
		// append it to the teaser holder
		$(th_div).hide().appendTo('#home_teaser');
		
		// define its coordinates inside the teaser holder
		th_coords = { top: top_pos, left: left_pos };

		// define a random delay (up to a second)
		var th_fade_delay = Math.floor(Math.random()*1000)

		// reference to this hash, for convenience
		var this_hash = $('#teaser_hash_' + teaser_media[x].id);
		
		// add the data for this media onto the hash element, for convenience
		this_hash.data( 'media_info', teaser_media[x] );
		// initially set this hash as inactive
		this_hash.data('is_active',false);
		
		
		// delay the fade to make them come in more "organically"
		this_hash.css({
			'visibility': 'visible'
			//,'position': 'absolute'
			,'top': top_pos+'px'
			,'left': left_pos+'px'
			,'opacity': 0
		}).delay( th_fade_delay ).fadeTo(1000,1, function(){
			// set the animation interval for this hash
			setAnimationInterval( $(this).data( 'media_info' ).id );
		});
		
		// RESEARCH IF THE DIRECT FUNCTIONS ARE BEING DEPRECATED
		// IF SO, FIGURE OUT HOW TO USE bind()
		// bind the rollover event (stops it from moving)
		this_hash.hover( function(){
			// call clear interval function
			clearAnimationInterval( $(this).data( 'media_info' ).id );
			// fade up the hash icon
			$('#teaser_hash_icon_' + $(this).data( 'media_info' ).id).fadeTo( 500, 1 );
		}, function(){
			if( !$(this).data('is_active') ){
				// re-activate the animation interval
				setAnimationInterval( $(this).data( 'media_info' ).id );
				$('#teaser_hash_icon_' + $(this).data( 'media_info' ).id).fadeTo( 500, 0 );
			}
		});
		
		// GET RID OF THE TOGGLE...MAKE THIS CLICK, AND TURN OFF ALL OTHERS
		// the click action needs to make it extend upward, and reveal the icon
		// also this function needs to display the story title
		this_hash.bind( 'click', function(){
			// display the title
			displayMedia( $(this).data('media_info') );
			clearInterval( idle_background_interval );
		});

		// make changes to the icon
		var this_hash_icon = $('#teaser_hash_icon_' + teaser_media[x].id);

		this_hash_icon.css({
			'background-image':'url(http://www.howdemocracyworksnow.com/_keepout/home/icon/'+teaser_media[x].id+'.jpg)'
			,'opacity':'0'
		});

		// increment the position of the next hash
		left_pos += 40;
	}
	
	// add the logo div
	var logo_div = '<div id="teaser_logo"></div>';
	var logo_delay = $.SSRandomFromTo( 2000,4000 );
	$(logo_div).hide().appendTo('#home_teaser').fadeTo(2000,1);

	// set an interval that will run and randomly play movies
	var setBackgroundInterval = function(){
		idle_background_interval = setInterval( function(){
			var rand_media = $.SSRandomFromTo( 0, teaser_media.length );
			//window.console.log( 'background interval called: ' + $('#teaser_hash_' + rand_media) );
			$('#teaser_hash_' + rand_media).click();
		}, 30000 );
	};
	setBackgroundInterval();
	
	// function to randomly 
	
});