/*

TODO
* better caching
* better state management for async state modifiers
* fix flickrr in firefox

*/

/********
*
*   Browser
*
********/

Browser = {};


Browser.init = function(){
	// navigation / position data 
	this.project = [];
	this.index = 0;
	this.loading = false;

	// dom element refs 
	this.img = document.getElementById('portfolio_item');
	var scope = this;
	this.img.onclick = function(){scope.showNext()};
	this.prevbtn = document.getElementById('prev');
	this.nextbtn = document.getElementById('next');
}


Browser.abort = function(){
  // do nothing 
}


Browser.showNext = function(){
	if(this.nextbtn.className != 'disabled')
		this.loadItem(this.index + 1);
}


Browser.showPrev = function(){
	if(this.prevbtn.className != 'disabled')
		this.loadItem(this.index - 1);
}


// purpose: load ans show te next item in the album 
Browser.selectProject = function(category, project){
	this.abort();
	this.setLoading();
  var req = new HttpRequest();
  req.open('GET', 'images.cgi?cat='+category+'&proj='+project, true);

	var scope = this;
	req.onreadystatechange = function(){
	  if(req.readyState == 4){
    	scope.project = eval(req.responseText);
			scope.loadItem(0)
		}
	}

	this.abort = function(){
	  req.onreadystatechange = function(){}
	}

	req.send(null);
}


// preload an image and show it 
Browser.loadItem = function(index){
	ffhack();
	if(index >= 0 && index <= this.project.length-1){ // within bounds 
		var url = this.project[index];
		var preload = new Image();
		var scope = this;

		preload.onload = function(){
			scale = Math.min(510/preload.width, 410/preload.height)
			if(scale < 1){
				scope.img.width = preload.width*scale;
				scope.img.height = preload.height*scale;
			}
			else{
				scope.img.width = preload.width;
				scope.img.height = preload.height;
			}
			scope.index = index;
			var nextpreload = new Image();
			nextpreload.src = scope.project[scope.index+1]
			scope.img.src = preload.src;
			scope.enableButtons();
			scope.loading = false;
		}

		//this.setLoading();
		preload.src = url;
	}
}


// purpose: show the loading indicator 
Browser.setLoading = function(){
	if(this.loading) return;
	this.nextbtn.className = 'disabled';
	this.prevbtn.className = 'disabled';

	this.img.width = 510;
	this.img.height = 383;
	this.img.src = './loading.gif'
	this.loading = true;
}


// purpose: enable / disable next / prev buttons 
Browser.enableButtons = function(){
	var index = this.index;
	if(index >= 0 && index <= this.project.length-1){ // within bounds 
		if(index <= 0) // disable prev button 
			this.prevbtn.className = 'disabled';
		else
			this.prevbtn.className = 'enabled';
	
	 	if(index >= this.project.length -1)	// disable next button 
			this.nextbtn.className = 'disabled';
		else
			this.nextbtn.className = 'enabled';
	}
}


// firefox hack - unfocus to get rid of the dotted link outline 
ffhack = function(){
	if(!document.all) document.getElementById('scapedog').focus();
}

/********
*
*   Playhead (minimal version)
*
********/

function Playhead(){
  this.starttime;
}

Playhead.prototype.start = function(){
  this.starttime = new Date();
}

Playhead.prototype.getTime = function(){
  return (new Date()) - this.starttime;
}



/********
*
*   2 deep animated menu
*
********/

Menu = {};

Menu.init = function(menu, submenu){
	this.main = menu;
	this.sub = submenu;
	this.state = 'main';
	this.playhead = new Playhead(); // time-based animation 
	var scope = this;

	// make submenu
	var lis = this.main.getElementsByTagName('LI');
	for(var i=0; i<lis.length; i++)
	  lis[i].onclick = function(evt){
			if(!evt){
				evt = window.event;
				evt.currentTarget = this;
			}
			scope.select(evt.currentTarget)
		};


	// make animation loop
	this.slide = function(){
		var time = scope.playhead.getTime();

	  if(scope.state == 'main'){
			var value = (time/270) * -183;
			if(value > -183)
				window.setTimeout(scope.slide, 40);
			else{
				value = -183;
				scope.state = 'sub';
			}
		}

	  else if(scope.state == 'sub'){
			var value = (1 - time/270) * -183;
			if(value < 0)
				window.setTimeout(scope.slide, 40);
			else{
				value = 0;
				scope.state = 'main';
			}
		}
		scope.setPanels(value);
	}

}

Menu.select = function(elem){
  if(this.state != 'main') return;
	var subitems = elem.getElementsByTagName('UL');
	if(!subitems || subitems.length < 1)
		this.sub.innerHTML = '<li><a href="#">&lt;&lt;</a></li>';
	else
		this.sub.innerHTML = '<li><a href="#">&lt;&lt;</a></li>'+subitems[0].innerHTML;

	var scope = this;
	this.sub.getElementsByTagName('LI')[0].onclick = function(){scope.back()};
	this.playhead.start();
	this.slide();

	ffhack();
}

Menu.back = function(){
  if(this.state != 'sub') return;
	this.playhead.start();
	this.slide();
}

Menu.setPanels = function(value){
	value = Math.round(value);
  this.main.style.marginLeft = value+'px';
  this.sub.style.width = -value+'px';
}



/********
*
*   Presentational stuff
*
********/

function toggle(elem){elem.className = elem.className == 'selected' ? 'closed' : 'selected';};

function create_layers(node, num){
  if(!node.className || num < 1) return;
	var classname = node.className;

  for(var i=0; i<num; i++){
    var newnode = document.createElement('DIV');
    node.parentNode.insertBefore(newnode, node);
    newnode.appendChild(node);
		newnode.className = classname+'_l'+(i+1);
    node = newnode;
  }
}