var default_project = 'allsteel';

Event.observe(window,'load',
	function(){
		elements = $('nav_scroll_wrapper').select('img');
		elements.each(function(elmt) { 
			elmt.setStyle({ opacity: 0.5 });
		});
		snav.init();
		project.init();
		page.load();
	}	
);

var snav = {
	projects : Array,
	selected : 'nav_0',
	page : 1, //------------------- CHANGED
	init : function() {
  	
		// May want to change all this to be based on dynamic CSS output
		// This is now judging the number of projects based on the number
		// of img elements in the "nav_scroll_content" div
		snav.projects = $('nav_scroll_content').getElementsBySelector('img');
  	snav.totalProjects = snav.projects.length;
  	snav.pages = Math.ceil(snav.totalProjects/4);
  	
		Element.extend('nav');
  	Event.observe(window, 'scroll', snav.slide);
		Event.observe('scrollup', 'click', snav.scroll);
  	Event.observe('scrolldn', 'click', snav.scroll);
  	snav.attach();
	},
	getEventSrc : function (e) {
		if (!e) e = window.event;
		if (e.originalTarget)
			return e.originalTarget;
		else if (e.srcElement)
			return e.srcElement;
	},
	attach : function() {
		for(i=0; i < snav.projects.length; i++) {
			snav.projects[i].id = 'nav_' + i
			Event.observe(snav.projects[i], 'click', snav.select);
		}
		$('nav_0').setStyle({ opacity: 1 });
	},
	slide : function() {
		if($('nav').hasClassName('sliding')) {
			slideeffect.cancel();
		}
		offsets = Position.realOffset(nav);
		y_offset = offsets[1] + 110;
		slideeffect = new Effect.Move (nav,{x: 8, y: y_offset, mode: 'absolute', duration: 1, 
			afterFinish:function(){$('nav').removeClassName('sliding');}
		});
		$('nav').addClassName('sliding');
	},
	select : function(e) {
		var selectedItem = snav.getEventSrc(e);
		if(snav.selected != selectedItem.id) {
			//alert('snav.selected = ' + snav.selected + ', selectedItem = ' + selectedItem.id);		
			new Effect.Appear(selectedItem,{duration: 0.5});
		  new Effect.Fade(snav.selected,{to: 0.5, duration: 0.5});
      snav.selected = selectedItem.id;
			new Effect.Fade('main',{duration: 0.5});
      new Effect.ScrollTo('header',{afterFinish:function(){project.update(selectedItem);}});
    }
	},
	scroll : function(e) {
	  var scrollbtn = snav.getEventSrc(e);
	  if(scrollbtn.id == 'scrollup') {
	    if(snav.page != 1) {
	      new Effect.Move('nav_scroll_content', {x: 0, y: 476, duration: 1, queue: {scope: 'navscroll', position: 'end'}});
	      snav.page = snav.page - 1;
	    }
	  } else {
	    if(snav.page != snav.pages) {
	      new Effect.Move('nav_scroll_content', {x: 0, y: -476, duration: 1, queue: {scope: 'navscroll', position: 'end'}});
	      snav.page = snav.page + 1;
	    }
	  }
	  if(snav.page == 1) {
	  	new Effect.Fade('scrollup',{duration: 0.5});
	  } else {
	  	new Effect.Appear('scrollup',{duration: 0.5});	
	  }
	  if(snav.page == snav.pages) {
	  	new Effect.Fade('scrolldn',{duration: 0.5});
	  } else {
	  	new Effect.Appear('scrolldn',{duration: 0.5});
	  }
	}
}

var project = {
	content : Array,
	init : function() {	
		project.content['allsteel'] = '<div><img src="images/allsteel_top.jpg" width="587" height="850" alt="allsteel_top" title="allsteel_top"></div> <div style="margin-left:-25px;"><img src="images/allsteel_bottom.jpg" width="661" height="908" alt="allsteel_bottom" title="allsteel_bottom"></div>'
		project.content['upromise'] = '<div><img src="images/upromise_top.jpg" width="587" height="883" alt="upromise_top" title="upromise_top"></div><div><img src="images/upromise_bottom.jpg" width="587" height="924" alt="upromise_bottom" title="upromise_bottom">'
		project.content['halo'] = '<div><img src="images/halo_top.jpg" width="587" height="631" alt="halo_top" title="halo_top"></div><div style="margin-left:-25px;"><img src="images/halo_bottom.jpg" width="682" height="1137" alt="halo_bottom" title="halo_bottom"></div>'
		project.content['energizer'] = '<div><img src="images/energizer.jpg" width="587" height="1548" alt="energizer" title="energizer"></div>'
		project.content['ulta'] = '<div><img src="images/ulta_top.jpg" width="587" height="904" alt="ulta_top" title="ulta_top"></div><div><img src="images/ulta_bottom.jpg" width="587" height="754" alt="ulta_bottom" title="ulta_bottom"></div>'
		project.content['scotchbrite'] = '<div><img src="images/scotchbrite_top.jpg" width="587" height="572" alt="scotchbrite_top" title="scotchbrite_top"></div><div><img src="images/scotchbrite_bottom.jpg" width="587" height="1102" alt="scotchbrite_bottom" title="scotchbrite_bottom"></div>'
		project.content['kay'] = '<div><img src="images/kay.jpg" width="587" height="1748" alt="kay" title="kay"></div>'
		project.content['hp'] = '<div><img src="images/hp.jpg" width="587" height="1277" alt="hp" title="hp"></div>'
		project.content['chaco'] = '<div><img src="images/chaco.jpg" width="587" height="1098" alt="chaco" title="chaco"></div>'
		project.content['biore'] = '<div><img src="images/biore_top.gif" width="587" height="649" alt="biore_top" title="biore_top"></div><div><img src="images/biore_bottom.jpg" width="587" height="1039" alt="biore_bottom" title="biore_bottom"></div>'
		project.content['starkist'] = '<div><img src="images/starkist.jpg" width="587" height="1629" alt="starkist" title="starkist"></div>'
		project.content['reunion'] = '<div><img src="images/class_reunion.jpg" width="587" height="1568" alt="class_reunion" title="class_reunion"></div>'
		project.content['logos'] = '<div><img src="images/logos.gif" width="587" height="1259" alt="logos" title="logos"></div>'
		project.content['nbc'] = '<div><img src="images/nbc.jpg" width="587" height="772" alt="treasure_hunters" title="treasure_hunters"></div>'
		project.content['beauty'] = '<div><img src="images/beauty.jpg" width="587" height="1154" alt="beauty" title="beauty"></div>'
		project.content['bp'] = '<div><img src="images/bp.jpg" width="587" height="1797" alt="bp" title="bp"></div>'		
	},
	update : function(selectedItem) {		
		$('loader').show();
		//new Effect.ScrollTo('header');
		if(selectedItem) {
			newContent = String($(selectedItem.id).readAttribute('src'));		
			newContent = newContent.slice((newContent.indexOf('_') + 1),newContent.indexOf('.'));
			$('content').update(project.content[newContent]);
			project.background(newContent);
			project.preload();
		} else {
			$('content').update(project.content['allsteel']);
			project.background('allsteel');
		}
	},
	preload : function() {
		var loaded = false;
		imgs = new Array();
		imgs = $('main').getElementsBySelector('img');
		new PeriodicalExecuter(function(pe) {
		  if(loaded) {
		  	pe.stop();
		  	$('loader').hide();
		  	new Effect.Appear('main',{duration: 0.5});
				//$('main').show();
		  } else {
		  	loaded = true;	
		  }
			for(i = 0; i < imgs.length; i++) {
				if(!imgs[i].complete) {
					loaded = false;
				}
			}
		}, 0.2);
	},
	background : function(selectedItem) {
		if(selectedItem == 'allsteel') {
			offsets = '700px 0';
			bkg = true;
		} else if(selectedItem == 'halo') {
			offsets = '585px 0';
			bkg = true;
		} else if(selectedItem == 'energizer') {
			offsets = '640px -40px';
			bkg = true;
		} else if(selectedItem == 'upromise') {
			offsets = '750px 0';
			bkg = true;
		} else if(selectedItem == 'ulta') {
			offsets = '700px 0';
			bkg = true;
		} else if(selectedItem == 'scotchbrite') {
			offsets = '700px 0';
			bkg = true;
		} else if(selectedItem == 'kay') {
			offsets = '700px 0';
			bkg = true;
		} else if(selectedItem == 'hp') {
			offsets = '715px 0';
			bkg = true;
		} else if(selectedItem == 'chaco') {
			offsets = '700px 0';
			bkg = true;
		} else if(selectedItem == 'biore') {
			offsets = '600px 0';
			bkg = true;
		} else if(selectedItem == 'nbc') {
			offsets = '740px 10px';
			bkg = true;
		} else if(selectedItem == 'beauty') {
			offsets = '780px 0';
			bkg = true;
		} else if(selectedItem == 'bp') {
			offsets = '720px 0';
			bkg = true;
		} else {
			bkg = false;
		}
		
		if(bkg) {
			$('main').setStyle({
			  background: "#493f39 url('images/" + selectedItem + "_background.jpg') no-repeat " + offsets
			});
			$('background').update('<img src="images/' + selectedItem + '_background.jpg">');
		} else {
			$('main').setStyle({
			  background: "#493f39"
			});
		}
	}
}
var page = {
	load : function() {
		$('content').update(project.content[default_project]);
		project.background(default_project);
		var loaded = false;
		imgs = new Array();
		imgs = $('wrapper').getElementsBySelector('img');
		new PeriodicalExecuter(function(pe) {
		  if(loaded) {
		  	pe.stop();
		  	$('loader').hide();
		  	//$('wrapper').show();
				Effect.Appear('wrapper',{duration: 0.5});
		  } else {
		  	loaded = true;	
		  }
			for(i = 0; i < imgs.length; i++) {
				if(!imgs[i].complete) {
					loaded = false;
				}
			}
		}, 0.2);
	}
}

function about() {
	//alert("test");
	//new Effect.Appear('about',{duration: 0.5});	
	new Effect.toggle('about','appear',{duration: 0.5});
}

function clearWindows() {
	new Effect.Fade('about',{duration: 0.5});	
}