// JavaScript Document
  function init(_id) {
  x  = 0;
  scrollExample = $('container');
  interval = null;
  hidden = true;
  
  divImagesSizeX = $("portfolio_images").getSize().x;
  numberOfThumbs = 9;
  replacedImages = 0;
  portfolioSummaries = null;

  imgElements = new Array(); 
 var jSonRequestPortfolio = new Request.JSON({url: "portfolio/portfolioSite.php", onComplete: function(summary) {
    numberOfThumbs = summary.portfolio.length;
	portfolioSummaries = summary.portfolio;

    startLoad();
 }}).post({'id': _id});
    
 }

  window.addEvent('domready', function(){init(_site_id); });
  
  function startLoad() {
    for (_i = 0 ; _i< numberOfThumbs; _i++) {
      var e = new Element("img");
      e.src = "images/loading.gif";
      e.toggleClass("preload");
      e.toggleClass("thumbnail");
      e.id = "portImage" + _i;
	  e.store('tip:text', portfolioSummaries[_i].description);
      e.alt = '';
      portfolioSummaries[_i].thumbnail = "images/portfolio/" + portfolioSummaries[_i].portfolio_details_thumbnail
      
      //e.href = "#";
      e.injectInside("portfolio_images");
      exampleFx = new Fx.CSS("portImage" + _i, 'opacity', {
    	duration: 500
      });
      /*	now we have an fx object, let's play with it:	*/
      exampleFx.start(0, 1); 
      new Asset.image(portfolioSummaries[_i].thumbnail, {onload: myFunction});
      
    }
	getDetailedInfo(0);
    
    var myTips = new Tips($$('.thumbnail'), {
  	timeOut: 700,
  	maxTitleChars: 50, /*I like my captions a little long*/
  	maxOpacity: .9 /*let's leave a little transparancy in there */
    });
    divImagesSizeX = $("portfolio_images").getSize().x;
  };

  function myFunction() {
    var thumb  = this.src;

    var id = -1;
    portfolioSummaries.each(function(summary, index) {
      if (thumb.indexOf(summary.thumbnail) != -1)
        id = index;     
    });
    
    
    
    img = $("portImage" + id);
    img.style.backgroundImage =  "url(" + this.src + ")";
    img.toggleClass("preload");
    img.src = "images/transparent.gif";
	
    img.addEvent('mouseover', function() {
      this.src = "images/hp_folio_sel.gif";
    });
    
    img.addEvent('mouseout', function() {
      this.src = "images/transparent.gif";
    });
    
    img.addEvent('click',  function() {
      getDetailedInfo(id);
    });
    replacedImages++;
    }
  
function getDetailedInfo(_id) {
	var preload = $('portfolio_main_image');
	var logo = $('main_logo');
	var image_description = $('portfolio_image_description');
	//$('site_portfolio_large_image').setStyle('height', preload.height + 'px');
	var myFx = new Fx.Tween(preload);
	if (preload.src.match('images/loader_bar.gif') == null) {
		myFx.start('opacity', 1, 0).chain(function(){
			load_image();
		});
	} else {
		load_image();		
	}
	
  function load_image () {
  	preload.addClass("preload");
	    preload.width = '192';
		preload.height = '9';
		preload.src = "images/loader_bar.gif";
		var margin_above = '189';
		preload.style.margin = margin_above + 'px auto 0 auto';
		myFx.start('opacity', 0, 1).chain(function(){ 
		var imgUrl = "images/portfolio/" + portfolioSummaries[_id].portfolio_details_image;
		image_description.innerHTML = portfolioSummaries[_id].description;
		
		new Asset.image(imgUrl, {
			onload: function() {
				var this_source = this.src;
				var this_height = this.height;
				var this_width = this.width;
					myFx.start('opacity', 1, 0).chain(function(){
					preload.removeClass("preload");
				    preload.style.margin = 'auto';
					preload.src = this_source
					preload.width = this_width;
					preload.height= this_height;
					myFx.start('opacity', 0, 1);
					
					});
					
				    
				     
	 		}
	 	});
	 });
  }
 }