// CONSTRAINT: (w_std * n) = w_focus + (w_small * (n-1))
//var n=6;                 	// number of divs
//var w_std=77;           	// default value of div width
//var w_focus=302;		// the focus value of div width
//var w_small=32;

// CONSTRAINT: (w_std * n) = w_focus + (w_small * (n-1))
//var n =       7;               	// number of divs           n
//var w_std =   50;           	// default value of div width       x
//var w_focus = 150;		// the focus value of div width     y
//var w_small = 25;		//                                  z

// CONSTRAINT: (w_std * n) = w_focus + (w_small * (n-1))
//var n =       7;               	// number of divs
//var w_std =   50;           	// default value of div width
//var w_focus = 200;		// the focus value of div width
//var w_small = 25;

// CONSTRAINT: (w_std * n) = w_focus + (w_small * (n-1))
//var n =       7;               	// number of divs
//var w_std =   42;           	// default value of div width
//var w_focus = 168;		// the focus value of div width
//var w_small = 21;

// CONSTRAINT: (w_std * n) = w_focus + (w_small * (n-1))
//var n =       7;               	// number of divs
//var w_std =   39;           	// default value of div width
//var w_focus = 147;		// the focus value of div width
//var w_small = 21;

// CONSTRAINT: (w_std * n) = w_focus + (w_small * (n-1))
var n =       8;               	// number of divs
var w_std =   34;           	// default value of div width
var w_focus = 153;		// the focus value of div width
var w_small = 17;

var timer;
var divs= new Array();
var imgs= new Array();
var updates= new Array();
var target;
var in_focus;
var timeout=1;

function init(){
  
  var div;
  var img;
  var total_width=0;
  for(i=0;i<n;i++){
     div=get("div"+i);
     img=get("img"+i);
     div.style.width=w_std+"px";
     total_width+=w_std;
     img.style.width=w_focus+"px";
     divs[i]=div;
     imgs[i]=img;
     
     center(i);
  }
  document.getElementById("keep_images_from_floating").style.display='block';
  document.getElementById("keep_images_from_floating").style.width=total_width+'px';
}
function stabilize(){
   var i;var d;var width;
   var total_growth=0;  

   if(targetReached()){
	if(in_focus==-1) {
		show('kladcol'); show('clickcol'); show('obfuscol');
	}
	return true;
   }
   for(i=0;i<n;i++){
        d=getTargetWidth(i)-getWidth(i);
 	if(d>0){ 
	   updates[i]=1;
	   total_growth++;
	}
	else updates[i]=0;
   }
   while(total_growth!=0){
	for(i=0;i<n;i++){
           d=getTargetWidth(i)-getWidth(i);
	   if(d<0){
		updates[i]--;
		total_growth--;
	   }
	   if(total_growth==0)break;
 	}
   }
   do_updates();
   timer=setTimeout("stabilize()",timeout); 	
}
function adapt(){
   var i;var d;var width;
   var total_growth=0;
   hide('kladcol'); hide('clickcol'); hide('obfuscol');
   if(targetReached()){
        show('label_cat_'+in_focus);
	return true;
   }
   if(in_focus>-1){
      d=getTargetWidth(in_focus)-getWidth(in_focus);
      updates[in_focus]=(n-1);
      if(updates[in_focus]>d) updates[in_focus]=d;
      total_growth=updates[in_focus];
   }
   for(i=0;i<n;i++){
	if(i!=in_focus) {
		updates[i]=0;
	}
   }

   if(total_growth==0) {
     for(i=0;i<n;i++) {
       d=getTargetWidth(i)-getWidth(i);
       if(d>0) {
	       updates[i]++;
	       total_growth++;
       }
     }
   }
   while(total_growth!=0){
       	for(i=0;i< n;i++){
 	   if(i==in_focus)continue;
	   d=getTargetWidth(i)-getWidth(i);
	   if(d<0){
		updates[i]-=1;
	        total_growth-=1;
	   }		
	   if(total_growth==0)break;
	}	
   }
   do_updates();
   timer=setTimeout("adapt()",timeout); 	
}

function center(id){
   var offset=parseInt((w_focus-getWidth(id))/2);
   var left=-offset+"px";
   imgs[id].style.left=left; 
}
function do_updates(){
   var i;
   for(i=0;i<n;i++){
	update(i,updates[i]);
   }
   return true;
}
function targetReached(){
   var i;
   for(i=0;i<n;i++){
	if(getWidth(i)!=getTargetWidth(i)) {
		return false;
	}
   }
   return true;
}
function getTargetWidth(id){
   if(id==in_focus)return w_focus;	// if this is the focussed one
   if(in_focus==-1)return w_std;	// if there is no focussed one
   return w_small;			// if this is one that should make space for the focussed one
}
function update(id,q){
   if(q==0){
	return true;
   }
   var div=divs[id];
   var width=getWidth(id);
   div.style.width=(width+q)+"px";
   center(id);
}

function get(id){
   return document.getElementById(id);
}

function getWidth(id){
   var width=divs[id].style.width;
   if (width.match(/^([0-9]+)px/)) {
         width = RegExp.$1;
   }
   return parseInt(width);
}
function expand(id){
   in_focus=id;
   clearTimeout(timer);
   adapt();
}
function go_stable(){
   hide('label_cat_'+in_focus);
   in_focus=-1;
   clearTimeout(timer);
   stabilize();
}

//more general stuff.. 
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(init);