// WTN*mootools sample:: Image change script.(use mootools1.2)


// Copyright (c) 2008 Tenderfeel. http://tenderfeel.xsrv.jp


// MIT Style License.





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


	


	var viewarea =$('myImg'); // Main image area


	var thumb = $("thumbs").getElements("img"); // thumbnails


	var comment =$$('p.comment'); // comments element


	var mag = 4; //imgsize magnification


	var regrep = "_thumb"; // 	Replace name of thumbnail images


	


	//create Arrays


	var myhref = new Array();


	var mySize = new Array();


	var myalt = new Array();


	var newImg= new Array();


	


	


	


	thumb.each(function(item,i){


		myhref[i] = item.src.replace(regrep,"");


		myalt[i] = item.getProperty('alt');


		mySize[i] =item.getSize();


		newImg[i] = new Element('img',{src:myhref[i],width:(mySize[i].x*mag),height:(mySize[i].y*mag),alt:myalt[i]});


		


		item.addEvent('click', function(){


			viewarea.empty();


			newImg[i].set('opacity','0');


			newImg[i].inject(viewarea);


			newImg[i].fade('in');


			


			comment.each(function(el){


				el.setStyle('display','none');


			});


			


			thumb.each(function(el){


				el.setStyle('border','none');


			});


			


			this.setStyle('border','none');


			comment[i].setStyle('display','block');


		});


	});





});