// 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 = 3.6; //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');
			});
			
			this.setStyle('border','none');
			comment[i].setStyle('display','block');
		});
	});

});