function pageLoaded() {
	//alert('page Loaded');

	//test button
	//Event.observe($('lento'), 'click', lento);
	//Event.observe($('veloce'), 'click', veloce);
	
	//faccio ricomparire il tab per avere le misure
	var	myTab = $('Box').up('div.tabGroup');
	
	if (myTab){
		myTab.show()
	}
	
	//inizializza Move
	Move.init();
	Move.fps = 25; //imposta Frame al secondo (opzionale)
	Move.pps = -40; //imposta pixel al secondo (opzionale)
}

function lento() {
	Move.pps *= .80;
}

function veloce() {
	Move.pps *= 1.20;
}

function display(str) {
	$('display').update(str);	
	}
	
function displayImgBig(str) {
	$('displayImgBig').update(str);	
	}


var Move = {
	fps: 25,
	pps: 20,
	stripeWidth: 0,
	x: 0,
	status: 'stop',

	init: function(event) {
//		alert('init');		
//		this.stripeWidth = 5;
//		alert(this.stripeWidth);		
		var baseDiv = 'stripBox';
		//var msg = '';
		this.stageWidth = Element.getDimensions($('Box')).width;
//		this.stripeWidth = Element.getDimensions($('stripBox').firstChild).width;
		this.stripeWidth = Element.getDimensions($('baseStrip')).width;
		//this.stripeHeight = Element.getDimensions($('stripBox').firstChild.firstChild).height;
		this.stripeHeight = Element.getDimensions($('baseStrip')).height;
		
		Event.observe($('Box'), 'click', Move.open.bindAsEventListener(Move));
		$('Box').show();
		
		//faccio scomparire il tab per avere le misure
		var	myTab = $('Box').up('div.tabGroup');
		
		if (myTab){
			myTab.hide()
		}

		if (this.stageWidth <= this.stripeWidth)
		{		
				
			var repliche = Math.floor(this.stageWidth / this.stripeWidth)+4;

			this.stripBoxWidth = (repliche + 4) * this.stripeWidth

			//duplicate stripe
			var newWidth = this.stripBoxWidth + 'px';
			Element.setStyle($('stripBox'),{
				width: newWidth,
				left:  '0px'
			});
			var newHeight = this.stripeHeight + 'px';
			Element.setStyle($('Box'),{
				height: newHeight
			});

			var newStripe = $(baseDiv).innerHTML; //stripe in HTML
			for (var i=0; i <= repliche; i++) {
				new Insertion.Bottom($(baseDiv), newStripe);
			}
			this.moveAgent = new PeriodicalExecuter(this.mover,1/this.fps);
		}
		
		//this.start();
			

		var mozilla = (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent))?1:0;
		if (mozilla != 1) {
			Event.observe($('Box'), 'mouseover', Move.freeze.bindAsEventListener(Move));
			Event.observe($('Box'), 'mouseleave', Move.start.bindAsEventListener(Move));
			//Event.observe($('Box'), 'mouseout', Move.start.bindAsEventListener(Move));
		}


	},


	start: function(event) {
		var myDiv = Event.findElement(event, 'div');
		if (Element.classNames(myDiv) != 'BoxPreview') return;
		this.moveAgent = new PeriodicalExecuter(this.mover,1/this.fps);
		this.status = 'play';
		Event.stop(event);
	},
	freeze: function(event) {
		var myDiv = Event.findElement(event, 'div');
		if((Element.childOf($(myDiv),$('Box'))) || (Element.classNames(myDiv)=='BoxPreview')) {
			this.moveAgent.stop();
			this.status = 'stop';
			Event.stop(event);
		}
	},
	mover: function() {
	//	!!! var offset = Move.pps / Move.fps; //va modificatoper unbinding corretto dobbiamo riferirci a this o riuscire a passare di parametri!!
		//alert(Move.stripeWidth);
		
		Move.x += Move.pps / Move.fps;
		if ( Move.x >= Move.stripeWidth*2 ) {
			Move.x -= Move.stripeWidth;
			//alert('reset1');
		}
		if ( Move.x <= -Move.stripeWidth ) {
			Move.x += Move.stripeWidth;
			//alert('reset2');
		}

//		var newPos = Math.floor(Move.x - (Move.stripeWidth)) + 'px'
		var newPos = Math.floor(Move.x) + 'px'

		Element.setStyle($('stripBox'),{
			left: newPos
		});
		
		//display(newPos);
	},
	open: function(event) {
		var elt = Event.findElement(event,'img');
		var newX, newY
		newX = 456

		if (elt){
			var msg = "Node Type; "+$(elt).src;
			//alert($(elt).title);
			//alert("Width:"+Element.getDimensions($(elt)).width + ' ---- Height:'+Element.getDimensions($(elt)).height);
			
			newY = (Element.getDimensions($(elt)).height * newX) / Element.getDimensions($(elt)).width
		
			msg += '\nNew X: '+ newX + ' --- New Y: ' + newY;
	
			var myArr = $(elt).src.split('/');
			myArr[myArr.length-2] = '456_x';
			
			var imgTag = ""
			for (var i=0;i<myArr.length-1;i++) 
				imgTag += myArr[i] + '/';
			imgTag += myArr[myArr.length-1];
			
			//alert(imgTag);
			
			displayImgBig('<img src="'+imgTag +'"><div class="dida">'+$(elt).title)+'</div>';
		}
	}
}//Move

Event.observe(window, 'load', pageLoaded);