// *********************************************************************************
  // ************************************* FOLIO *************************************
  // *********************************************************************************
  
    var folio_obj = new folio();
  
    // runs on load
    function initfolio () {
    

  	  folio_obj.init();
    }
  
    // FOLIO OBJECT DEFINITION
    function folio () {
    
        trace("folio constructor");
        
        // user variables
        this.spread =  617; // distance between 2 adjacent divs
        this.cur_fi = 0; // the currently selected folio item
        
        
        this.fids = new Array(); // folio item descriptions
        
        
        // animation stuff
        
        this.sliderX;
        this.sDestination;
        this.sForce;
        this.sAcc; 
        this.sSpeed = 0; 
        this.sFriction = 0.71;
        this.sMass = 8;
        
        this.count = 0;
        
        this.moveInt;
        
    }
    
        
        // distributes the folio items on the folio slider
        // positions the slider off the pane
        folio_obj.init = function () {
        
        
        
            // array of divs holding folio items
            folio_obj.folio_items = new Array();
        
            $(".folio_item").each(function(index) {
                folio_obj.folio_items.push(new folioItem(this));
            });
        
            // distribute the folio items along the slider
            for (var i = 0 ; i < this.folio_items.length ; i++) {
                trace(this.spread*i);
                $(this.folio_items[i].div).css('left', (this.spread*i)+"px");
            }
            
        
            
            // position the item offscreen to the right;
            initFolioMenuItems();
            
            // position the item offscreen to the right;
            this.sliderX = 500;
            
            folio_obj.updateSlider();
            
            // show the first item
            setTimeout("folio_obj.showItem(0)", 500);
            
            trace("folio object initialised");
            
        } // end function init
        
  
  /*
        folio_obj.startFolioAfter = function (delay) {
        
            startFolioMenuItems(); // organise the menu items immediately
            setTimeout("folio_obj.startFolio();", delay);
        
        }
        
  */
        
        folio_obj.stopFolio = function() {
        
            trace('stopFolio');
            clearInterval(fmi_int);
            
        }
  
    
    
	//****************************************************************************
    // commences the sliding of the pane to display the given item
    
        folio_obj.showItem = function (whichItem) {
        
            // hide any fid that was showing before
            $(this.fids[this.cur_fi]).fadeOut();
            
            this.cur_fi = whichItem; // change the current item num
            
            // show the new item description
            $(this.fids[this.cur_fi]).fadeIn();
            
            // make sure the correct arrows are grey
            if (this.cur_fi == 0) {
              getDiv("left-arrow").childNodes[0].style.display = "none";
            } else {
              getDiv("left-arrow").childNodes[0].style.display = "block";
            }
            if (this.cur_fi == this.folio_items.length-1) {
              getDiv("right-arrow").childNodes[0].style.display = "none";
            } else {
              getDiv("right-arrow").childNodes[0].style.display = "block";
            }
            
            
            // slide the slider to the right place
            this.moveSliderToX_spring (0 - (whichItem * this.spread));
            
        } // end function show item


	//****************************************************************************


        
        folio_obj.moveSliderToX_spring = function (finalX) {
        
            trace('moveSliderToX_spring');
            
            this.sDestination = finalX;
            this.moveInt = setInterval(doMoveStep, 50);
            
            function doMoveStep() {
            	//trace("do movestep");
            	folio_obj.movestep();
            }
            
        	  
        }
        
    
        folio_obj.movestep = function () {
        
            this.sForce = this.sDestination - this.sliderX;
            
            //trace(this.sDestination);
            
            this.sAcc = this.sForce / this.sMass;
            this.sSpeed = this.sSpeed + this.sAcc;
            this.sSpeed = this.sSpeed * this.sFriction;
            this.sliderX = this.sliderX + this.sSpeed;
            
            if (((this.sliderX-this.sDestination)*(this.sliderX-this.sDestination)<1)&&((this.sSpeed*this.sSpeed)<1)) {
                this.sliderX = this.sDestination;
                this.sSpeed = 0;
                clearInterval(this.moveInt);
            }
            
            this.updateSlider();
        
        }
  
        folio_obj.updateSlider = function () {
            $("#folio_slider").css('left', Math.round(folio_obj.sliderX)+"px");
        }
	
	//****************************************************************************
	
        // display the next item
        folio_obj.next = function () {
            if (this.cur_fi < this.folio_items.length - 1) {
                this.showItem(this.cur_fi+1);
            }
        }
        // display the next item
        folio_obj.prev = function () {
            if (this.cur_fi > 0) {
                this.showItem(this.cur_fi-1);
            }
        }
	
	
	//****************************************************************************
	
        folio_obj.rolloverFI = function () {
            this.folio_items[this.cur_fi].rollover();
        }
        
        folio_obj.rolloutFI = function () {
            this.folio_items[this.cur_fi].rollout();
        }
 
 

  
  
	  
		
  // ************  folio item object *************
  
  
  function folioItem (div) {
	  
	  this.div = div;
	  this.over = false;
	  this.bg_x = 0;
	  this.move_speed = 1;
	  this.moveInt;
	  this.bg_limit = 400;
	  
	  this.rollovertext = "click to visit this website";
	  
	  this.rollover = function () {
		  
		  //showRolloverText(this.rolloverText);
		  
		  this.bg_x = 0;
		  var this_folio_item = this;
		  var thumb_div = getElementNum(this.div, 1);
		  var a_tag = getElementNum(thumb_div, 0);
		  var this_bg_pos = a_tag.style.backgroundPosition;
		  //a_tag.style.backgroundPosition = "-30px 60px";
		  a_tag.style.backgroundPosition = "0px 0px";
		  
		  this.moveInt = setInterval(move, 50);
		  
		  function move() {
			    this_folio_item.bg_x = this_folio_item.bg_x - this_folio_item.move_speed;
				a_tag.style.backgroundPosition = this_folio_item.bg_x+"px 0px";
		  }
		  
		  
		  
	  }
	  
	  this.rollout = function () {
		  
		  clearInterval(this.moveInt);
		  
		  
	  }
	  
	  
  } // end folio item object

  
  
  /**************************************************************/
  /******                                                  ******/
  /******                    folio menu                    ******/
  /******                                                  ******/
  /**************************************************************/
  
  
  var FMIs;
  var fmi_int;
  function initFolioMenuItems () {
	  
	  FMIs = new Array();
	  
	  FMIs.push(new fmi("fmi-1", 50));
	  FMIs.push(new fmi("fmi-2", 105));
	  FMIs.push(new fmi("fmi-3", 160));
	  FMIs.push(new fmi("fmi-4", 215));
	  FMIs.push(new fmi("fmi-5", 270));
	  FMIs.push(new fmi("fmi-6", 325));
	  FMIs.push(new fmi("fmi-7", 380));
	  FMIs.push(new fmi("fmi-8", 435));
	  FMIs.push(new fmi("fmi-9", 490));
	  
  }
  
  function startFolioMenuItems () {
	  fmi_int = setInterval("stepAllFMIs()", 10);
  }
  
  //*************************************************************************************
  // folio menu item) object 
  // vDivname: the id of the div of that menu item
  // vTargetx: the target of the
  function fmi (vDivname, vTargetx, delayToAppear) {
	  
	  this.divname = vDivname;
	  this.targetx = vTargetx;
	  
	  this.div = getDiv(this.divname);
	  
	  this.speed = 0;
	  this.acc;
	  this.force;
	  this.mass;
      this.friction = 0.15;
	  
	  this.size = 0; // the index of the tween
	  this.tweenlength = 10;
	  
	  this.overSizeWidth = 68;
	  this.overSizeHeight = 47;
	  this.normalSizeWidth = 39;
	  this.normalSizeHeight = 27;
	  
	  this.widthTweenOut = getTween(this.normalSizeWidth, this.overSizeWidth, this.tweenlength, 140, 0);
	  this.heightTweenOut = getTween(this.normalSizeHeight, this.overSizeHeight, this.tweenlength,140, 0);
	  this.widthTweenIn = getTween(this.overSizeWidth, this.normalSizeWidth, this.tweenlength, 130, 1);
	  this.heightTweenIn = getTween(this.overSizeHeight, this.normalSizeHeight, this.tweenlength, 130, 1);
	  
	  this.w_showTween = getTween(1, this.normalSizeWidth, this.tweenlength, 140, 0);
	  this.h_showTween = getTween(1, this.normalSizeHeight, this.tweenlength, 140, 0);
	  
	  this.widthTween = this.widthTweenOut;
	  this.heightTween = this.heightTweenOut;
	  this.growing = 0;
	  
	  
	  this.x = vTargetx;
	  this.y = 30;
	  
	  

	  
	  this.left = function () { // gets the left position of this fmi
	     return Math.round(this.x-(this.widthTween[this.size]/2));
	  };
	  this.right = function () { // gets the right position of this fmi
	     return Math.round(this.x+(this.widthTween[this.size]/2));
	  };
	  
	  this.updateLoc = function () { // sets the position of the div to the position of this fmi
	  
	      this.renderScale();
	  
	      var xpos = Math.round(this.x-(this.widthTween[this.size]/2));
		  this.div.style.left = xpos+"px";
	      var ypos = Math.round(this.y-(this.heightTween[this.size]/2));
		  this.div.style.top = ypos+"px";
		  
		  
	  }
	  
	  // method to calculate the mass based of the area of the fmi
	  this.setMass = function () {
		  this.mass = this.widthTween[this.size] * this.heightTween[this.size];
	  }
	  
	  
	  // ----------------------------------------------------------------------------
	  // method - goes through each menu item and totals the repulsion force acting on
	  // this one from all of them, then adds the attraction force towards the target
	  this.setTotalForce = function () {
		  
		  var i;
		  var f = 0;
		
		  for (i=0; i<FMIs.length ; i++) {
			  
			  if (FMIs[i].divname != this.divname) {
			    f = f + this.getForceFrom(i);
			  }
		  
		  }
		  
		  

          // add the attraction to the target (proportional to the square of the distance from the target)
		  var DtoT = this.targetx - this.x;
		  
		  var targetForce = (DtoT)*this.mass;
		  

		  if (DtoT > 0) {
			  f = f + targetForce;
		  } else {
			  f = f + targetForce;
		  }
		  
		 
		  this.force = f;
		  
	  }
	  
	  // ----------------------------------------------------------------------------
	  // method to get the repulsion force from a given div
	  this.getForceFrom = function (divNum) {
		  
		  // the distance from the centres of the 2 divs
		var dist = this.x - FMIs[divNum].x;
			   
		var tforce;
		var massFactor = Math.pow((this.mass + FMIs[divNum].mass + FMIs[divNum].mass), 2);

  		  if (dist < -1 || dist > 1) {
		    tforce = massFactor / (dist*dist);
		  } else {
			tforce = massFactor;
		  }


		// preserve direction of force
		if (dist<0) {
			tforce = 0 - tforce;
		}
		 
		return tforce;
		  
	  }
	  
	  // ----------------------------------------------------------------------------

	  
	  this.renderScale = function () {
		// set the div width/height
	    this.div.style.width = parseInt(this.widthTween[this.size])+"px";
	    this.div.style.height = parseInt(this.heightTween[this.size])+"px";
		
		// set the image width/height
		this.div.getElementsByTagName('a')[0].getElementsByTagName('img')[0].style.width = parseInt(this.widthTween[this.size]) - 2 + "px";
		this.div.getElementsByTagName('a')[0].getElementsByTagName('img')[0].style.height = parseInt(this.heightTween[this.size]) - 2 + "px";

	  }
	  

	  
	  // ----------------------------------------------------------------------------
	  // this method is repeated continuously
	  this.step = function () {
		
		this.setTotalForce();

		this.acc = this.force / this.mass;
		this.speed = (this.speed + this.acc)*this.friction;
		
		this.x = this.x + this.speed;
		this.updateLoc();
	  }
	  
	  // ----------------------------------------------------------------------------
	  
	  this.show = function (delay) {
		  
		  var thisFMI = this;
		  
		  setTimeout(startShow, delay);
		  
		  function startShow () {
			  
			  setInterval(showStep, 30);
			  
		  }
		  
		  function showStep () {
			  
			  
		  }
		  
		  
	  }
	  
	  // ----------------------------------------------------------------------------
	  // init some values
	  this.updateLoc();
	  this.setMass();
	  
  } // END OF FMI OBJECT
  
  
  function stepAllFMIs () {
	  var i;
	  for (i=0; i<FMIs.length ; i++) {
		  FMIs[i].step();
	  }
	  
  }  
  
  	  // ----------------------------------------------------------------------------
	  // methods to grow and shrink the fmi on rollover
	  
     function fover(num) {
	     startGrow(num);
	     shrinkAllExcept(num);
     }
  
     function fout(num) {
	     startShrink(num);
     }
	 
	 function shrinkAllExcept (num) {
		 for (var i = 0 ; i < FMIs.length ; i++) {
		   if (num != i) {
	         startShrink(i);
		   }
		 }
	 }
  
	  function startShrink(fmi_num) {
		  FMIs[fmi_num].growing = 0;
		  FMIs[fmi_num].div.style.zIndex="1"
			setTimeout("shrink("+fmi_num+")", 10);
	  }
	  
	  function startGrow(fmi_num) {
		  FMIs[fmi_num].div.style.zIndex="10"
		  FMIs[fmi_num].growing = 1;
            setTimeout("grow("+fmi_num+")", 10);
      }
	  
      function shrink (fmi_num) {
		if (FMIs[fmi_num].size > 0 && FMIs[fmi_num].growing == 0) {
			FMIs[fmi_num].size--;
			setTimeout("shrink("+fmi_num+")", 30);
		} else if (FMIs[fmi_num].size == 0) {
			// finished shrinking
			FMIs[fmi_num].widthTween = FMIs[fmi_num].widthTweenOut;
			FMIs[fmi_num].heightTween = FMIs[fmi_num].heightTweenOut;
		}
		//FMIs[fmi_num].renderScale();
		FMIs[fmi_num].setMass();
		//FMIs[fmi_num].updateLoc();
      }
	  
      function grow(fmi_num) {
		if (FMIs[fmi_num].size < FMIs[fmi_num].widthTween.length-1 && FMIs[fmi_num].growing == 1) {
			FMIs[fmi_num].size++;
			setTimeout("grow("+fmi_num+")", 30);
		} else if (FMIs[fmi_num].size == FMIs[fmi_num].widthTween.length - 1) {
			// finished growing
			FMIs[fmi_num].widthTween = FMIs[fmi_num].widthTweenIn;
			FMIs[fmi_num].heightTween = FMIs[fmi_num].heightTweenIn;
		}
		
		//FMIs[fmi_num].renderScale();
		FMIs[fmi_num].setMass();
		//FMIs[fmi_num].updateLoc();
	  }
   	  // ----------------------------------------------------------------------------