window.addEvent('domready', function() {					

 var mainImg = $('mp_img');
 var details = $('pdetailsbox');
 
 var d_fx = details.effects({duration: 500, wait:false, transition: Fx.Transitions.Quad.easeInOut});
 var m_fx = mainImg.effects({duration: 500, wait:false, transition: Fx.Transitions.Quad.easeInOut});
 
 preload_imgs(thumbAry);
 
 $('pthumbbox').getElements('a[id^=pt]').addEvents
    ({ 
		'click': function(e) 
		{	
			new Event(e).stop();
			var id = this.id.substr(this.id.length-1,1);
			activate(this);
			changeMainImg(id);
			changeDesc(id);
			//this.getElement('img').setOpacity(1);
		}
    });
	
  function activate(obj) 
  {
	  $('pthumbbox').getElements('a').removeClass('active');
	  obj.addClass('active');
  }//end activate
  
  function changeDesc(id)
  {
	d_fx.start({'opacity':0
	}).chain(function(){
			 	details.setHTML(thumbAry[id]['desc']);
			 	this.start({'opacity':1})
	});
  }//end changeDesc
  
  function changeMainImg(id)
  {
	m_fx.start({
				'opacity':0
	}).chain(function(){
			 	mainImg.setProperty('src',thumbAry[id]['mpath']);
				this.start.delay(1,this,{'opacity':1
				})
	});
  }//end changeMainImg

  function preload_imgs(oArry) {
    for(var i=0; i<oArry.length; i++)
	{
	  var myimg = new Element('img',{'src':oArry[i]['mpath']});
	}
	return;
  }//end preload_imgs
});