var ProtoView = Class.create({
	//inicialitzam la classe
	initialize: function(opt) {
		opt = opt || {};
		this.options = {
			container: null
		};
		Object.extend(this.options, opt);
		
		this.imageStack = $$('img.protoview');
		
		if (this.imageStack.length==0) {
			this.options.container.style.display='block';
			return;
		} 
		
		this.dCont=new Element('div', { 'style':'text-align: center' });
		this.dBotones=new Element('div');
		
		for (var k=this.imageStack.length-1;k>=0;k--) {
			if (k==0) {
				this.imageStack[k].style.display='block';
			} else {
				this.imageStack[k].style.display='none';
			}
			this.imageStack[k].setAttribute('rel',k);
			this.dCont.appendChild(this.imageStack[k].parentNode);
		}
		
		this.options.container.appendChild(this.dCont);
		
		for (var k=0;k<this.imageStack.length;k++) {
			var dBot=new Element('div', { 'style':'color:#ff9900; cursor:pointer; text-align:center; width:15px; padding: 2px; float:left; border:1px solid #d1d2CC; margin-left:3px;' }).update(k+1);
			dBot.setAttribute('rel',k);
			dBot.onclick=function() {
				var dCont=this.parentNode.previousSibling;
				
				var num=this.getAttribute('rel');
				
				for (var k=0;k<dCont.childNodes.length;k++) {
					dCont.childNodes[k].firstChild.style.display='none';
					
					if (dCont.childNodes[k].firstChild.getAttribute('rel')==num) {
						dCont.childNodes[k].firstChild.style.display='block';
					}
				}
			}
			this.dBotones.appendChild(dBot);
		}
		
		var dC=new Element('div', { 'style':'clear:both;'});
		this.dBotones.appendChild(dC);
		
		//reordenam
		var n=this.dCont.childNodes.length;
		
		for (var k=0;k<n;k++) {
			this.dCont.appendChild(this.dCont.childNodes[k]);
		}
		
		this.options.container.appendChild(this.dBotones);
		this.options.container.style.display='block';
	}
});