// JavaScript Document
  function init() {
  // replace strapline text with styled image of the same text
  var e = new Element("img");
  e.width = '191';
  e.height = '121';
  e.width = '191';
  e.height = '127';
  e.src = "images/strap_line.gif";
  e.alt = 'Evolutia Design is a creative design studio specialising in high-quality web design and graphic identity.';
  $('about_evolutia').innerHTML = '';
  e.injectInside("about_evolutia");
  hoverOutline = new Asset.image("images/hp_folio_sel.gif");
 
  hoverOutline.toggleClass('hover');
   hoverOutline.setStyle('position', 'absolute');
  hoverOutline.injectInside($('images'));
  hoverOutline.setStyle('display', 'none');
  hoverOutline.addEvent('mouseleave', function() {
    	
      hoverOutline.setStyle('display', 'none');
      
	});
    
    hoverOutline.addEvent('click',  function() {
      getDetailedInfo(hoverOutline.retrieve('PortfolioID'));
    });
    
    
  hoverOn = false;
  myTips = new Tips(hoverOutline, {
  	timeOut: 700,
  	maxTitleChars: 50, /*I like my captions a little long*/
  	maxOpacity: 0.9, /*let's leave a little transparancy in there */
  	className: 'tip-container'	
  });

  x  = 0;
  scrollExample = $('container');
  interval = null;
  slowDownInterval = null;
  slowStep = 10;
  rightDown = false;
  leftDown = false;
  leftDisabled = true;
  rightDisabled = true;
  hidden = true;
  helpPopupTimeout = null;
  
  //divImagesSizeX = $("images").getSize().size.x + 10;
  numberOfThumbs = 9;
  replacedImages = 0;
  portfolioSummaries = null;

  imgElements = new Array();
  
	 var jSonRequestPortfolio = new Request.JSON({url: "portfolio/sites.php", onComplete: function(summary) {
	    numberOfThumbs = summary.portfolioCount;
	    portfolioSummaries = summary.contents;
	
	    startLoad();
	 }}).send();
 }

  window.addEvent('domready', init);
  
  function displayHelperPopup() {
    var e = $('goRightButton');
    e.src = "images/arrow_r_pulsing.gif";
    
    
    hidden = false;
  
  }
  
  function hideHelperPopup() {
    
    if (hidden)
      return;
    var e = $('goRightButton');
    e.src = "arrow_r.gif";
  
  
  }
  
  
  function startLoad() {
    $("images").style.width = numberOfThumbs * (85) + "px";
  	//I HATE0RZ IE6
    //  var ieImg = new Element("img");
    //  ieImg.setProperty('src', 'images/blank.png');
    //  ieImg.injectInside('images');
  var thumbnails = Array();
    for (_i = 0 ; _i< numberOfThumbs; _i++) {
      //var d = new Element("div");
	  //d.id = "portImageHolder" + _i;
	  //d.className = 'portHolder';
	  
	  var e = new Element("img");
      e.src = "images/loading.gif";
      e.toggleClass("preload");
      e.toggleClass("thumbnail");
      e.id = "portImage" + _i;
	  
	  
      e.alt = '';
	  portfolioSummaries[_i].thumbnail = "images/portfolio/" + portfolioSummaries[_i].thumbnail
	  portfolioSummaries[_i].e = e;
      //e.setStyle('opacity', 0);
      //e.injectInside(d);
	  e.injectInside("images");
      //e.injectInside("portImageHolder" + _i);
      //e.injectInside("images");
      //exampleFx = new Fx.Style("portImage" + _i, 'opacity', {
    //duration: 500
      //});
      
      thumbnails[_i] =  portfolioSummaries[_i].thumbnail
      
      
      
      
      
      //*	now we have an fx object, let's play with it:	*/
      //e.fade(1);
      //var img = new Asset.image(portfolioSummaries[_i].thumbnail,
      //	{onload: myFunction.pass([portfolioSummaries[_i].thumbnail, e, portfolioSummaries[_i].id, _i])});
      //img.addEvent('load', myFunction.pass([img, e]));
      
	/*var loader = new Asset.image(portfolioSummaries[_i].thumbnail, {  
        onload: myFunction.bind(loader, portfolioSummaries[_i].id)
    });*/  
    
    }
    
    Asset.images(thumbnails, {onProgress: myFunction});
    divImagesSizeX = $("images").getSize().x + 10;
    enableRight();
    displayHelperPopup();
  
  
  };

  function myFunction(counter, index) {
  var src = portfolioSummaries[index].thumbnail;
  var thumb = portfolioSummaries[index].e;
  var id = portfolioSummaries[index].id;
    
	thumb.toggleClass("preload");
    thumb.src = src;	 
    //thumb.style.backgroundImage =  "url(" + src + ")";
    thumb.addEvent('mouseenter', function() {
    	myTips.detach(hoverOutline);
      hoverOutline.src = "images/hp_folio_sel.gif";
      hoverOutline.setStyle('display', 'block');
        hoverOutline.setStyle('left',this.getPosition('images').x - 4);
        hoverOutline.setStyle('top',this.getPosition('images').y); 
        hoverOutline.store('tip:title',portfolioSummaries[index].title);
	  	hoverOutline.store('tip:text', portfolioSummaries[index].description);
        myTips.attach(hoverOutline);
        hoverOutline.store('PortfolioID', id);
        
        
    }.bind(thumb));
    
	
   }
  
  function getDetailedInfo(_id) {
     var more_info = $('home_portfolio_getmoreinfo');
	 var logo = $('main_logo');
     var preload = $('main_image');
     preload.dispose();
     preload = new Element('img', {id: 'main_image'});
     
     preload.addClass("preload");
     
     preload.set('src', "images/loader_bar.gif");
     preload.injectInside($('home_portfolio_large_image'));
     var jSonRequestDetailed = new Request.JSON({url: "portfolio/detailedSite.php", onComplete: function(summary) {
     summary = summary[0];
	 
	 more_info.href = summary.portfolio_url + "/";
     var imgUrl = "images/portfolio/" + summary.image;
     var newPortfolio = new Asset.image(imgUrl, {onload: function(_img) {
     	  var preload = $('main_image');
	      preload.dispose();
	      _img.set('id', 'main_image');
	      _img.setStyle('opacity', 0);
	      _img.injectInside($('home_portfolio_large_image'));

	      _img.fade(1);
      
     
      }.bind(newPortfolio, newPortfolio)});
     var logoUrl = "images/portfolio/" + summary.logo;
     new Asset.image(logoUrl, {onload: function() {
     	logo.setProperty.pass(['src', logoUrl], logo)();
        
     var port_text = $('home_portfolio_text');
     
     //port_text.set.delay(250, null, ['html', summary.description]);
      
     port_text.set('html', summary.description);
     //port_text.setStyle('height', '65px');
     //$('home_portfolio_logo').setStyle('height', '65px');
     }});
     
    
     
    
     
     
     
      
 }}).POST({'id': _id});
  
  
  }

 
  
  
  
  function slowDownRight() {
    clearInterval(interval);
    slowStep = 10;
    slowDownInterval = setInterval("slowRight()", 30);
  }
  
  function slowRight() {
    goRight(slowStep);
    slowStep--;
    if (slowStep <= 0) {
      clearInterval(slowDownInterval);
    }
  }
  
  function slowDownLeft() {
    clearInterval(interval);
    slowStep = 10;
    slowDownInterval = setInterval("slowLeft()", 30);
  }
  
  function slowLeft() {
    goLeft(slowStep);
    slowStep--;
    if (slowStep == 0) {
      clearInterval(slowDownInterval);
    }
  }
  
  function enableRight() {
    if (!rightDisabled) {
      return;
    }
    rightDisabled = false;
    var rightButton =  $('goRightButton');
    rightButton.removeEvents();
    rightButton.style.cursor = "pointer";
    rightButton.src = "arrow_r.gif";
    rightButton.addEvent('mousedown', function() {
    
      clearInterval(slowDownInterval);
      rightDown = true;
      leftDown = false;
      interval = setInterval("goRight(10)", 30);
    });
    rightButton.addEvent('mouseup', function() {
        if (!rightDown) {
          return;
        }
        slowDownRight();
        rightDown = false;
    });

    rightButton.addEvent('mouseover', function() {
    this.src = "arrow_r_ovr.gif";
    });
  
    rightButton.addEvent('mouseout', function() {
      this.src = "arrow_r.gif";
      if (rightDown) {
        slowDownRight();
        rightDown = false;
      }
    });

  }  
    
  function disableRight() {
    if (rightDisabled) {
      return;
    }
    rightDisabled = true;
    var rightButton =  $('goRightButton');
    rightButton.removeEvents();
    clearInterval(interval);
    rightButton.src = "arrow_r_grey.gif";
    rightButton.style.cursor = "default";
  }
   
   
  function enableLeft() { 
    if (!leftDisabled) {
      return;
    }
    leftDisabled = false;
    var leftButton = $('goLeftButton');
    leftButton.removeEvents();
    leftButton.style.cursor = "pointer";
    leftButton.src = "arrow_l.gif";
    leftButton.addEvent('mousedown', function() {
        clearInterval(slowDownInterval);
        leftDown = true;
        rightDown = false;
        interval = setInterval("goLeft(10)", 30);
      
    });
    leftButton.addEvent('mouseup', function() {
        if (!leftDown) {
          return;
        }
        slowDownLeft();
        leftDown = false;
    });

    leftButton.addEvent('mouseover', function() {
    this.src = "arrow_l_ovr.gif";
    });
  
    leftButton.addEvent('mouseout', function() {
      this.src = "arrow_l.gif";
      if (leftDown) {
        slowDownLeft();
        leftDown = false;
      }
    });
    
  }  
    
  function disableLeft() {
    if (leftDisabled) {
      return;
    }
    leftDisabled = true;
    var leftButton = $('goLeftButton');
    leftButton.removeEvents();
    clearInterval(interval);
    leftButton.src = "arrow_l_grey.gif";
    leftButton.style.cursor = "default";
  
  }
    
  
    


  
  
  
  
  
  function goRight(_step) {
      hideHelperPopup();
      x += _step;
      if (x >= divImagesSizeX - 610) {
        x = divImagesSizeX - 610;

        disableRight();
        
      }
      scrollExample.scrollTo(x,0);
      if (x > 0)
        enableLeft();
  
  }
  function goLeft(_step) {
  
      x -= _step;
      if (x <= 0) {
        x = 0;
        disableLeft();
      }
      scrollExample.scrollTo(x,0);
      if (x < divImagesSizeX - 620)
        enableRight();

  
  }