///////////  APPLICATION SCRIPTS \\\\\\\\\\\


function bookmarks() {
	
	f(function() { 
			   
		$.each(o.bars, function(i,v){
								//alert(v[2]);
								//alert(location.hash);
			if ('#'+v[2].toLowerCase() == location.hash.toLowerCase()) {
				var barNum = i+1;
				//alert(barNum);
				var t = setTimeout("$('#bar"+barNum+" .barButton').click()", 1500);
				//var t = setTimeout("alert(0)", 800);
			}
		
		});	   
		
	key(); });
	
	}


function makeFooter () {	

	o.footerLayers = [
						  {'inside':'footer1','id':'footerSep0','class':'footerSep'},
						  {'inside':'footer1','id':'footerLinks1','class':'footerLinksBox'},
						  {'inside':'footer1','id':'footerSep1','class':'footerSep'},
						  {'inside':'footer1','id':'footerLinks2','class':'footerLinksBox'},
						  {'inside':'footer1','id':'footerSep2','class':'footerSep',},
						  {'inside':'footer1','id':'footerLinks3','class':'footerLinksBox'},
						  {'inside':'footer1','id':'footerSep3','class':'footerSep'}
						 ],
	
	o.footerLinks3Content = '<div class="linkTitle">MGFest History</div>\
									  <div class="linkItem"><a href="/09/Chicago/">Chicago, January 2009</a></div>\
									   <div class="linkItem"><a href="/09/Boston/">Boston, March 2009</a></div>\
									   <div class="linkItem"><a href="/09/Austin/">Austin, May 2009</a></div>\
									   <div class="linkItem"><a href="/09/Atlanta/">Atlanta, June 2009</a></div>\
									    <div class="linkItem"><a href="/09/WashingtonDC/">Washington DC, Nov 2009</a></div>\
										<div class="linkItem"><a href="/history.php">More Past Events</a></div>',
	o.footerLinks1Content	 = '<div class="linkTitle">About the Festival</div>\
									   <div class="linkItem"><a target="_top" href="http://mgfest.com/#connect" onclick="javascript:refresh(\'connect\')">Connect With Us</a></div>\
									   <div class="linkItem"><a href="/press.php">Press Clippings</a></div>\
									    <div class="linkItem"><a href="/media.php">Festival Media Archive</a></div>\
										 <div class="linkItem"><a href="http://mgfest.com/09/Online/onlineart.php">Web Artist Features</a></div>\
										 <div class="linkItem"><a href="http://mgfest.com/09/Online/LearningGallery/">Video Learning Library</a></div>\
									    <div class="linkItem"><a href="/09/Online/dailymotion.php">Daily Motion Graphics</a></div>',
	o.footerLinks2Content	 = '<div class="linkTitle">MGFest 2010 Tour</div>\
									  <div class="linkItem"><a href="/10/call/#4entry">2010 Call For Entry</a></div>\
									  <img src="/img/spacer.gif" width="150" height="5" \>\
									  <div class="linkItem"><a href="http://mgfest.com/10/boston/">Boston, April 1-5</a></div>\
									  <div class="linkItem"><a href="http://mgfest.com/10/atlanta/">Atlanta, July 10-11</a></div>\
									   <div class="linkItem"><a href="http://mgfest.com/10/philly/">Philadelphia, July 24-25</a></div>\
									    <div class="linkItem"><a href="http://mgfest.com/10/sf/">San Francisco, July 31-August 1</a></div>\
										 <div class="linkItem"><a href="http://mgfest.com/10/chicago/">Chicago, September 15-19</a></div>\
										  <div class="linkItem"><a href="http://mgfest.com/10/austin/">Austin, October 20-24</a></div>\
									  ',



	f(function() {	
		
		var _height = 50;
		
		//o.debug=1;
		
		$('#bars').find('#barBase').each(function(i) { _height += $(this).height(); });
		//alert( _height);
		addLayer({inside:'bars',id:'footer1'});
		$('#footer1').css({height:'227px',width:$(window).width(),top:_height,left:0,'background-image':'url(/10/img/footer1_bg.gif)','background-repeat':'repeat-x',position:'absolute'});
		
		
			$.each(o.footerLayers, function(i,v) {
				addLayer(v);
			});
			
			$('.footerSep').attr('style','width:4px;height:227px;background-color:#ddd;background-image:url(/10/img/footer1_sep.gif);position:absolute;');
			$('.footerLinksBox').attr('style','width:250px;height:190px;top:27px;overflow:hidden;position:absolute;z-index:300');
			
			$('#footerSep0').css('left','121px');
			$('#footerLinks1').css('left','141px');
			$('#footerSep1').css('left','342px');
			$('#footerLinks2').css('left','362px');
			$('#footerSep2').css('left','600px');
			$('#footerLinks3').css('left','620px');
			$('#footerSep3').css('left','800px');
			
			$('#footerLinks1').append(o.footerLinks1Content);
			$('#footerLinks2').append(o.footerLinks2Content);
			$('#footerLinks3').append(o.footerLinks3Content);
			$('.linkTitle').css({marginBottom:'18px',fontSize:'12px',fontFamily:'Georgia, Times New Roman, serif', color:'#484848'});
			$('.linkItem').css({fontSize:'12px',fontFamily:'Arial',marginBottom:'4px'});
			$('.linkItem > a').css({textDecoration:'none',color:'#2d7487'});
			$('.linkItem > a:visited').css({textDecoration:'none',color:'#2d7487'});
			$('.linkItem > a').mouseover( function() { $(this).css({textDecoration:'underline',backgroundColor:'#000',color:'#CBDB2A'}); });
			$('.linkItem > a').mouseout( function() { 
										$('.linkItem > a').css({textDecoration:'none',color:'#2d7487',backgroundColor:'#d7d7d7'});
										$('.linkItem > a:visited').css({textDecoration:'none',color:'#2d7487',backgroundColor:'#d7d7d7'}); 
										});
		
			_height += $('#footer1').height();
		
		addLayer({inside:'bars',id:'footer2'});
		
		$('#footer2').css({height:'220px',width:$(window).width(),top:_height,left:0,position:'absolute',backgroundColor:'#333333'});
		$('#footer2').html('<div id="socialIcons"></div>');
		$('#socialIcons').append('<p class="socialTitle">  Join:  &nbsp;&nbsp;</p>');
		$('#socialIcons').append('<p><a href="http://www.facebook.com/pages/Motion-Graphics-Festival/54045413933">\
								 <img style="border:0" src="/img/social/facebook_32.png" height="32" width="32"\
								 alt="Motion Graphics Festival Facebook Group" /></a></p>');
		$('#socialIcons').append('<p><a href="http://www.linkedin.com/groups?gid=1599137">\
								 <img style="border:0" src="/img/social/linkedin_32.png" height="32" width="32"\
								 alt="Boston Motion Graphics on LinkedIn" /></a></p>');
		$('#socialIcons').append('<p><a href="http://www.linkedin.com/groups?gid=2184297">\
								 <img style="border:0" src="/img/social/linkedin_32.png" height="32" width="32"\
								 alt="DC Motion Graphics on LinkedIn" /></a></p>');
		$('#socialIcons').append('<p><a href="http://www.linkedin.com/groups?gid=123558">\
								 <img style="border:0" src="/img/social/linkedin_32.png" height="32" width="32"\
								 alt="Chicago Motion Graphics on LinkedIn" /></a></p>');
		$('#socialIcons').append('<p><a target="_blank" href="http://www.vimeo.com/groups/37284/">\
								 <img style="border:0" src="/img/social/vimeo_32.png" height="32" width="32"\
								 alt="MGFest Boston 2010 Vimeo Group" /></a></p>');
		$('#socialIcons').append('<p><a target="_blank" href="http://chicagonewmediasummit.ning.com/group/motiongraphics">\
								 <img style="border:0" src="/img/social/ning.png" height="32" width="32"\
								 alt="Motion Graphics Group on the Convergence Ning" /></a></p>');
		
		$('#socialIcons').append('<p class="socialTitle">&nbsp;&nbsp;&nbsp;&nbsp;  Subscribe:  &nbsp;&nbsp;</p>');
		$('#socialIcons').append('<p><a href="http://mgfest.com/#connect" onclick="javascript:refresh(\'connect\');">\
								 <img style="border:0" src="/img/social/email_32.png" height="32" width="32"\
								 alt="MGFest Email Announcement Lists" /></a></p>');
		$('#socialIcons').append('<p><a href="http://www.youtube.com/user/mgfest">\
								 <img style="border:0" src="/img/social/youtube_32.png" height="32" width="32"\
								 alt="MGFest YouTube Channel" /></a></p>');
		$('#socialIcons').append('<p><a href="http://twitter.com/mgfest">\
								 <img style="border:0" src="/img/social/twitter_32.png" height="32" width="32"\
								 alt="Follow MGFest on Twitter" /></a></p>');
		$('#socialIcons').append('<p><a href="http://feeds.feedburner.com/MotionGraphicsChicago">\
								 <img style="border:0" src="/img/social/rss_32.png" height="32" width="32"\
								 alt="iTunes compatible Video Podcast Feed" /></a></p>');
		
		$('#socialIcons').append('<p class="socialTitle">&nbsp;&nbsp;&nbsp;&nbsp;  Share:  &nbsp;&nbsp;</p>');
		$('#socialIcons').append('<p><a target="_blank" href="http://www.flickr.com/photos/tags/mgfest09/">\
								 <img style="border:0" src="/img/social/flickr_32.png" height="32" width="32"\
								 alt="MGFest Flickr Tag" /></a></p>');
		$('#socialIcons').append('<p><a id="facebookShare" href="#">\
								 <img style="border:0" src="/img/social/facebook_32.png" height="32" width="32"\
								 alt="Share on Facebook" /></a></p>');
		$('#socialIcons').append('<p><a id="twitterShare" href="#">\
								 <img style="border:0" src="/img/social/twitter_32.png" height="32" width="32"\
								 alt="Share on Twitter" /></a></p>');
		
		$('#socialIcons').append('<p class="socialTitle">&nbsp;&nbsp;&nbsp;&nbsp;  Organizers:  &nbsp;&nbsp;</p>');
		$('#socialIcons').append('<p><a href="http://psymbolic.com" target="_blank" >\
								 <img style="border:0" src="/img/social/psymbolic_32.png" height="32" width="32"\
								 alt="Psymbolic" /></a></p>');
		
		var _title = $('title').html();
		var _link = window.location;
		
		$('#facebookShare').click(function(event) {
							event.stopPropagation();
							event.preventDefault();
							new_link = 'http://www.facebook.com/sharer.php?u='+ _link +'&t=' + encodeURIComponent(_title);
							jQuery(this).href = new_link;
							
							 jQuery(this).attr({ 
								href: new_link          
							  });
							
							window.open(new_link);
						});
		
		$('#twitterShare').click(function(event) {	
							var status = 'Check out: ' ;
							
							var fullstring = (status + _title + ' :: ' + _link);
							if( fullstring.length > 137 ) {
								status += _title.substring(0 , 137 - status.length) + '...'+ ' :: ' + _link; 
							} else {
								status += _title+ ' :: ' + _link; 
							}
												
							//alert(status);
							new_link = 'http://twitter.com/home?status=' + status ;
							
							//jQuery(this).href = new_link;
							
							window.open(new_link);
						
					});
		
		$('#socialIcons').css({position:'absolute',top:'3px',left:'75px',fontFamily:'Arial',color:'#ddd',fontSize:'14px','vertical-align':'top'});
		$('#socialIcons p').css({float:'left'});
		
		
		_height += $('#footer2').height();
		/**/
		fixSize();
		
		key();	   
	});
	
	
	//f(function() { $('#footer1').fadeIn(o.baseSpeed*2 ); key(); });
	//f(function() { $('#footer2').fadeIn(o.baseSpeed*2, key); });
	
}






/////////// MAIN PAGE SCRIPTS \\\\\\\\\\\



fixSize = function() {
	trace('fixing layers width and height');						   
	
	var _height = $(window).height();
	$('#page').children().each(function() {
		//$(this).css('height',$().height());
	});
	//$('#mainpage').css('height',$(window).height());
	
	var _width = $(window).width();
	$('#bars').children().each(function() {
									
			$(this).css('width',$(window).width());
			$('#barBaseLines',this).css('width',$(window).width()-500);
			$('#barBase',this).css('width',$(window).width());
			
	});
	$('.barButton').css('width',$(window).width());
	$('#mainpage').css('width',$(window).width());
	
}

jQuery(window).scroll(fixSize);
jQuery(window).resize(fixSize);


// application
function makeBar(a) {
			var _id = a[0];
			var _color = a[1];
			var _title = a[2];
			var _contentColor = a[3];
			var _contentHeight = a[4];
			var _top = ((_id-1)*83)+'px';
			
			$('#bars').append('<div id="bar'+_id+'"></div>');
			
			$('#bar'+_id).append('<div id="'+'barBase'+'"></div>'+
								 '<div id="'+'barBaseLines'+'"></div>'+
								 '<div id="'+'barTop'+'"></div>'+
								 '<div id="'+'barBottom'+'"></div>'+
								 '<div id="'+'barTitle'+'"></div>'+
								 '<div class="'+'barButton'+'"></div>');
			
			$('#bar'+_id).attr('active','false');
			$('#bar'+_id).attr('bar',_id);
			$('#bar'+_id).attr('title',_title);
			$('#bar'+_id).attr('contentColor',_contentColor);
			$('#bar'+_id).attr('contentHeight',_contentHeight);
			$('#bar'+_id).attr('homePos',_top);
			$('#bar'+_id).css({'width':$(window).width(),'position':'absolute','top':_top,'left':'0px'});
			$('#barBase','#bar'+_id).css({'width':$(window).width(),height:'83px',position:'absolute',top:'50px',left:'0px', 'background-image':'url(http://mgfest.com/10/img/bars/'+_color+'_bg.gif)','background-repeat':'repeat-x'});
			$('#barBaseLines','#bar'+_id).css({'width':$(window).width()-500,height:'83px',position:'absolute',top:'50px',right:'0px', 'background-image':'url(http://mgfest.com/10/img/bars/'+_color+'_bg_lines.gif)','background-repeat':'repeat-x'});
			$('#barTop','#bar'+_id).css({'width':'50px',height:'133px',position:'absolute',top:'0px',left:'0px', 'background-image':'url(http://mgfest.com/10/img/bars/'+_color+'_left.png)','background-repeat':'no-repeat'});
			$('#barBottom','#bar'+_id).css({'width':'50px',height:'51px',position:'absolute',top:'83px',left:'0px', 'background-image':'url(http://mgfest.com/10/img/bars/bottom-corner.png)','background-repeat':'no-repeat'});
			$('#barTitle','#bar'+_id).css({'width':'380px','background-position':'center right',height:'50px',position:'absolute',top:'68px',left:'108px', 'background-image':'url(http://mgfest.com/10/img/bars/'+_title+'.png)','background-repeat':'no-repeat'});
			$('#bar'+_id+' .barButton').css({'width':$(window).width(),height:'83px',position:'absolute',top:'50px',left:'0px','z-index':'900'});
			//alert($('#bar'+_id+' #barBase').css('width'));
		}


buildTemplate = function() {
		
	f(function() {
		//alert(1);
		$.each(o.preloadImages, function(i,v) {
			preloadImage({image:v});
		});
		
		$.each(o.layers, function(i,v){
			var _name = v[0];
			var _css = v[1];
			
			addLayer({inside:'page',id:_name});
			$('#'+_name).css(_css);
		
		});
		//alert(2);
	key();
	});	
	
	f(function() { $('#mainpage').fadeIn(o.baseSpeed); key();});

	f(function() { 
			   rollMouse('#logoButton');
			   $('#logoButton').click(function(event){
					event.preventDefault();
					event.stopPropagation();
					window.location = 'http://MGFest.com';
				});  
			  $('#logoButton').show();  
			   $('#logo').fadeIn(o.baseSpeed*2, key); 
	});
	
	
	f(function() {	
			   
		//$('#mainpage').css();
		$('#logo').html('<img src="/10/img/mgfestLogoCorner3.png" height="254" width="399" />');
		
		$.each(o.bars,function(i,v) {
							 
			makeBar(v);
			$('#bar'+v[0]).append('<div class="content" id="content'+v[0]+'" style="display:none;top:0px;">\
												<iframe id="frame'+v[0]+'" scrolling="no" style="top:-2px;left:-2px;overflow:hidden;width:100%;height:'+v[4]+'px;" src="'+o['bar'+v[0]+'Content']+'"></iframe>\
											</div>');
			//alert(i);
			//$('#content'+v[0]).load(o['bar'+v[0]+'Content']);
			
		});
			
		
			
		var barCount = o.barCount+1;
		
		// add bar content
		
		// button click handler
		rollMouse('.barButton');
		
		$('.barButton').click(function(event) {
									  
				var _parent = $(this).parent();
				var _bar = _parent.attr('bar');
				var _active = _parent.attr('active');
				var _title = _parent.attr('title');
				var _contentColor = _parent.attr('contentColor');
				var _contentHeight = _parent.attr('contentHeight');
			
			if (_parent.attr('animating') != 'true') { // disabler
				_parent.attr('animating','true');
					
				f(function(){	
					trace('animating bars');
					// move bars
					//alert(_active);
					
					if (_active=='false') {
						//window.location = window.location + _title;
						window.location.hash = _title;
						
						for (var i=1, il=barCount;i<il;i++) {
							if ($('#bar'+i).attr('bar')>_bar ){
							
									//var _top = $('#bar'+i).attr('homePos');
									var _top = $('#bar'+i).css('top');
									_top = parsePx(_top);
									_contentHeight = parseInt(_contentHeight);
									//alert(_top + ' + '+ _contentHeight + ' =  '+ (_top + _contentHeight));
									
										$('#bar'+i).animate({top:(_top + _contentHeight) + 'px'}, o.baseSpeed,"swing");
						
							}
						}
						$('#footer1').animate({top:(parsePx($('#footer1').css('top')) + parseInt(_contentHeight)) + 'px'}, o.baseSpeed,"swing");
						$('#footer2').animate({top:(parsePx($('#footer2').css('top')) + parseInt(_contentHeight)) + 'px'}, o.baseSpeed, "swing");
					
					} else {
						for (var i=1, il=barCount;i<il;i++) {
							if ($('#bar'+i).attr('bar')>_bar ){
								//var _top = $('#bar'+i).attr('homePos');
								var _top = $('#bar'+i).css('top');
								_top = parsePx(_top);
								_contentHeight = parseInt(_contentHeight);
								//alert(_top + ' + '+ _contentHeight + ' =  '+ (_top + _contentHeight));
								
									$('#bar'+i).animate({top:(_top - _contentHeight) + 'px'}, o.baseSpeed,"swing");
							}
						}
						$('#footer1').animate({top:(parsePx($('#footer1').css('top')) - parseInt(_contentHeight)) + 'px'}, o.baseSpeed,"swing");
						$('#footer2').animate({top:(parsePx($('#footer2').css('top')) - parseInt(_contentHeight)) + 'px'}, o.baseSpeed, "swing");
					
					}
					
					// fill content
					if (_active=='false') {
																	
						//$(this).parent().children('#barBottom').hide();
						//alert('#content'+_bar);
						
						$('#content'+_bar).css({display:'none', top:'133px',backgroundColor:_contentColor,height:_contentHeight+'px',width:'100%',position:'absolute'});
						$('#content'+_bar).fadeIn(o.baseSpeed, function() { 
																		 	_parent.attr('animating','false');
																			_parent.attr('active','true');
																			key();
																			} );
					} else {
						
						//$(this).parent().children('#barBottom').show();
						$('#content'+_bar).fadeOut(o.baseSpeed, function() { 
																		 	_parent.attr('animating','false');
																			_parent.attr('active','false');
																			key();
																			//$('#content'+_bar).remove(); 
																			
																			} );
					}
				
					
					
					//key();
				});
				//alert(o.f.length);
				if (o.f.length == 1 ){ key();}
				 
			} // end disabler
		}); // end click handler
		
		key();
	});
	f(function() { $('#bars').fadeIn(o.baseSpeed*2); key(); });
	
	
	}