// banner class
//------------------------------------------
//==================================================================
//	Create Element / DOM Object
//==================================================================


//------------------------------------------------------------------
//	class
//------------------------------------------------------------------
function Timeline(){
	//--------------------------------------------------------------
	// variables
	//--------------------------------------------------------------
		var isIE = window.ActiveXObject ? true : false;


	//--------------------------------------------------------------
	// arrays
	//--------------------------------------------------------------
	this._divs	= [							
		"Overview",
		"1940",
		"1950",
		"1960",
		"1970",
		"1980",
		"1990",
		"2000",
		"2010"
	]
	
	this._xmlTimeLine	= "timeline.xml";
	this._images		= Array();
	this._timeline		= Array();	
	this._xml			= Object;

	//--------------------------------------------------------------
	// objects
	//--------------------------------------------------------------
	

	//--------------------------------------------------------------
	// constructor
	//--------------------------------------------------------------


	//--------------------------------------------------------------
	// methods
	//--------------------------------------------------------------
	this.noFlash	= function(xmlDir, libDir)
	{
		_obj	= this;
		this._current	= 0;
		this._year = $("#year");
		this._copy = $("#copy");
		this._img = $("#image");
		this._nav = $("#nav");		
		this._years = $("#years");
		this._quickjump = $("#quickjump");			
		
		this._libDir = libDir;		
		
		$('document').ready(
			function()
			{
				$.ajax(
					{
						url: xmlDir + _obj._xmlTimeLine,
						cache: false,
	 					dataType: "xml",
						success:function(xml){
							_obj._xml	= xml;
							_obj.processTimeline();							
						}
					}
				);				
			}
		);
	}
	
	this.processTimeline = function()
	{
		i	= 0
		$("period", _obj._xml).each(
			function()
			{		
				period = {
					nav:_obj.getAttributeText("nav", this),
					img:_obj.getAttributeText("img", this),
					description:$(this, _obj._xml).text().split(":")
				}			
				period.years	= i == 0 ? $("overview", _obj._xml).text() : _obj.getAttributeText("years", this);
				period.quickjump	= $("quickjump", _obj._xml).text()
				_obj._timeline.push(period)
				i++;
			}
		)
		
		// build timeline
		this.buildTimeline(0)
		this.buildNav();
	}
	
	this.buildNav	= function()
	{
		html	= "";
		html 	+= "<img src=\"library/left.jpg\" onclick=\"timeline.gotoNext(-1);\" style=\"cursor:pointer;position:relative;top:-13px;padding-right:5px;\"/>";
		html 	+= "<img src=\"library/shield.jpg\" />";		
		html 	+= "<img src=\"library/right.jpg\" onclick=\"timeline.gotoNext(1);\" style=\"cursor:pointer;position:relative;top:-13px;padding-left:2px;\" />";
		
		this._nav.html(html);		
	}
	
	this.buildTimeline	= function(i)
	{
		this._current	= i;
		period			= _obj._timeline[i];
		
		// description
		this.updateDescription(period.description)
		
		// years
		this.updateYears();
		this.updateImage(period.img);	
		this.updateQuickJump(period.years, period.quickjump);
		this.updateNavPosition(period.nav)
		
		this.toggleGroup(this._current)			
	}
	
	this.updateDescription = function(description)
	{
		this._year.html(description[0] + " - ");
		this._copy.html(description[1]);		
	}
	
	this.updateYears = function()
	{
		html = "";
		
		
		for(n = 0; n < this._divs.length; n++)
		{	
			style = n == 0 ? "style=\"width:80px;\"" : "";
			name	= n == 0 ? this._divs[n] : this._divs[n] + "s";
			if(n == this._divs.length - 1){name = this._divs[n] + "+";}
			html += this._current == n ? "<span class=\"navBold\" " + style + ">"  + name + "</span>" : "<span class=\"nav\" " + style + "><a href=\"javascript:timeline.buildTimeline(" + n + ")\">" + name + "</a></span>";
		}
		this._years.html(html)
	}	
	
	this.updateImage = function(img)
	{
		if(img.indexOf('swf') != -1){img = "timeline/trilogo.jpg"/*img.slice(0,img.indexOf('swf')) + "jpg"*/}
		html	= "<img src=\"" + this._libDir + img + "\"/>";
		this._img.hide().html(html).fadeIn('slow')
	}
	
	this.updateQuickJump = function(years, quickjump)
	{
		years = this._current != 0 ? years.split(",") : years
		style = this._current != 0 ? "#002888" : "#CCCCCC";
		this._quickjump.css("color", style)
		
		if(this._current == 0)
		{
			this._quickjump.html(years);
		}
		else
		{
			html	= quickjump
			for(n = 0; n < years.length; n++)
			{
				html += "<a href=\"#year" + years[n] + "\">" + years[n] + "</a>";
			}
			
			this._quickjump.html(html);
		}
	}
	
	this.updateNavPosition = function(x)
	{
		this._moveToX = (parseInt(x) + (10 - (this._current * 2))) + "px";
		this._nav.animate(
			{ 	
				left:_obj._moveToX
			}
		);
	}
	
	this.gotoNext = function(dir)
	{
		this._current = this._current + dir > -1 && this._current + dir < this._divs.length ? this._current + dir : this._current;
		this.buildTimeline(this._current)
	}
	
	this.getAttributeText = function(obj, parent){
		var _attr = "";
		_attr = isIE == true ? parent.getAttribute(obj) : parent.attributes[obj];
		if(_attr != "undefined"){
			_attr = isIE == true ? _attr : _attr.value ;
			return _attr;
		}
		return false;
	}	
	
	
	//---------------------------------------------------------------
	this.toggleGroup = function(id)
	{
		for(var n = 0; n < this._divs.length; n++)
		{
			getObject(this._divs[n]).className = n != id ? "NoDisplay" : "Display";
		}
	}
	
	this.toggleYear = function(id)
	{
		for(var n = 0; n < this._divs.length; n++)
		{
			getObject(this._divs[n]).className = getObject(this._divs[n]).id != id ? "NoDisplay" : "Display";
		}
	}	
	
	this.getObject = function(id){
		//	retrieve object
		//------------------------------
		if (document.getElementById){OBJ = document.getElementById(id);}
		else if (document.all){OBJ = document.all[id];}
		else if (document.layers){if (document.layers[id]){OBJ = document.layers[id];}}

		//	return object to caller
		//------------------------------
		return OBJ;
	}
}

timeline	= new Timeline();