// settings
var NAV_ITEMS			= new Array('lab','group','platform');
var NAV_LEFTMARGIN		= 80;
var NAV_RIGHTMARGIN		= 10;
var NAV_SPACING			= 10;
var NAV_WIDTH_TIMER		= null;
var NAV_HEIGHT_TIMER	= null;

// internal objects
var NAV_OBJECTS			= new Array();

// initialize navigation
function initNavigation(){
	// find out the initial width
	var itemWidth	= getNavigationWidth()/(NAV_ITEMS.length);
	// generate objects & update their display
	for(var i=0; i<NAV_ITEMS.length; i++){
		// does the object exist? (happens when doing a window resize)
		if(typeof(NAV_OBJECTS[i])=='object'){
			// rebuild with new width
			NAV_OBJECTS[i].tarWidth = itemWidth;
		} else {
			// initialize object
			NAV_OBJECTS[i]	= new NavItem(i, NAV_ITEMS[i], itemWidth, 3);
			NAV_OBJECTS[i].update();
		}
	}
	//run setNavigationWidth if timer is not active
	if(!NAV_WIDTH_TIMER) {
		NAV_WIDTH_TIMER = setInterval(setNavigationWidth, 10);
	}
}

// navItem element; acts as a class blueprint
function NavItem(index, label, width, height){
	this.index		= index;
	this.label		= label;
	this.ref		= ref(label);
	this.sref		= sref(label);
	this.timer		= null;
	this.width		= width;
	this.height		= height;
	this.active		= false;
	this.tarWidth	= width;
	this.tarHeight	= height;
	
	this.getHeight	= function(){
		return pxToInt(ref(label).clientHeight);
	}
	this.getWidth	= function(){
		return pxToInt(ref(label).clientWidth);
	}
	this.initHeight	= this.getHeight();
	this.setWidth	= function(width){
		this.tarWidth	= width;
	}
	this.update		= function(){
		sref(this.label+'display').width = intToPx(this.width);
		this.sref.height	= intToPx(this.height);
	}
	this.activate	= function(){
		this.active	= true;
		this.tarHeight = this.initHeight
		activate_style(this.label);
		if(!this.timer) {
			this.timer = setInterval('NAV_OBJECTS['+this.index+'].setNavHeight()', 10);
		}
	}
	this.deactivate	= function(){
		this.active	= false;
		this.tarHeight = 3;
		if(!this.timer) {
			this.timer = setInterval('NAV_OBJECTS['+this.index+'].setNavHeight()', 10);
		}
	}

	this.setNavHeight	= function	(){
		this.height	+= (this.tarHeight - this.height)*0.3;
		if(Math.abs(this.height - this.tarHeight) < 1) {
			this.height = this.tarHeight;
			clearTimeout(this.timer);
			this.timer = null;
		}
		if(this.height == 3) {
			deactivate_style(this.label);
		} 
		this.update();
	}
}

// start opening item
function linkActivate(item){
	for(var i=0; i<NAV_OBJECTS.length; i++){
		if(NAV_OBJECTS[i].label==item){
			NAV_OBJECTS[i].activate();
			NAV_OBJECTS[i].tarWidth = getNavigationWidth() * 0.5;
		} else {
			NAV_OBJECTS[i].deactivate();
			NAV_OBJECTS[i].tarWidth = (getNavigationWidth() * 0.5)/(NAV_OBJECTS.length-1);
		}
	}
	if(!NAV_WIDTH_TIMER) {
		NAV_WIDTH_TIMER = setInterval(setNavigationWidth, 10);
	}
}

// start closing item
function linkDeactivate(item){
	for(var i=0; i<NAV_OBJECTS.length; i++){
		NAV_OBJECTS[i].tarWidth = getNavigationWidth() / NAV_OBJECTS.length;
		if(NAV_OBJECTS[i].label==item){
			NAV_OBJECTS[i].deactivate();
		}
	}
	if(!NAV_WIDTH_TIMER) {
		NAV_WIDTH_TIMER = setInterval(setNavigationWidth, 10);
	}
}


//set navigation width distribution
function	setNavigationWidth() {
	for(var i=0;i<NAV_OBJECTS.length;i++) {
		NAV_OBJECTS[i].width	+= (NAV_OBJECTS[i].tarWidth - NAV_OBJECTS[i].width)*0.05;
		if(Math.abs(NAV_OBJECTS[i].width - NAV_OBJECTS[i].tarWidth) < 1) {
			NAV_OBJECTS[i].width = NAV_OBJECTS[i].tarWidth;
		}
		NAV_OBJECTS[i].update();
	}
	for(var i=0;i<NAV_OBJECTS.length;i++) {
		if(NAV_OBJECTS[i].width != NAV_OBJECTS[i].tarWidth) {
			return;
		}
	}
	clearTimeout(NAV_WIDTH_TIMER);
//	db('clearTimer: '+NAV_WIDTH_TIMER);
	NAV_WIDTH_TIMER = null;
//	db('clearTimer null: '+NAV_WIDTH_TIMER);
}

////// helper functions

// return the width of the document viewport
function getDocumentWidth() {
	var w	= 0;
	if( typeof( window.innerWidth ) == 'number' ) {
		//Non-IE
		w	= window.innerWidth;
	} else if( document.documentElement && document.documentElement.clientWidth ) {
		//IE 6+ in 'standards compliant mode'
		w	= document.documentElement.clientWidth;
	} else if( document.body && document.body.clientWidth ) {
		//IE 4 compatible
		w	= document.body.clientWidth;
	}
	return parseInt(w);
}

// get usable width for navigation
function getNavigationWidth() {
	return ((getDocumentWidth()-NAV_LEFTMARGIN-NAV_RIGHTMARGIN)-((NAV_ITEMS.length)*NAV_SPACING));
}

// set target's class to 'classactv'
function activate_style(t) {
	var me = ref(t);
	if (me && me.className.indexOf('actv')==-1){
		me.className	= me.className + "actv";
	}
}

// remove 'actv' component from target's class
function deactivate_style(t) {
	var me = ref(t);
	if(me) {
		me.className	= me.className.replace("actv","");
	}
}

//setup event handlers
window.onresize = function(){
	initNavigation();
	//NAV_WIDTH_TIMER = setInterval('setNavigationWidth()', 10);
}


function	db(val) {
	divSet('debug', val+'<br/>'+ref('debug').innerHTML);	
}