window.addEvent('domready', function() {
   var hor = new Ticker('TickerVertical', {
      speed : 500, delay : 5000, direction : 'vertical'
   });
   
   
  new Thumstones();
});


var Thumstones = new Class ({
		
	initialize: function(el,options){
		this.items = $('thumstones-cache').getElements('div.thumstone');
		/*this.fx = new Fx.Morph(this.el,{duration:this.options.speed,onComplete:function() {
			var i = (this.current==0)?this.items.length:this.current;
			this.items[i-1].injectInside(this.el);
			this.el.setStyles({
				left:0,
				top:0
			});
		}.bind(this)});*/
		this.current = 0;
		this.delay = 10000;
		this.speed = 700;
		this.next();
		$('thumstones-preview').addEvent('mouseover', this.pause.bind(this));
		$('index-right').addEvent('mouseout', this.resume.bind(this));
	},
	
	pause: function() {
	    $clear(mytimer);
	    mytimer = null;
	},
	
	resume: function() {
	    if (mytimer == null) {
	    	this.next();
	    }
	},
	next: function() {
		this.current++;
		if (this.current >= this.items.length) this.current = 0;
		var pos = this.items[this.current];
		//$('thumstone-active').fade('out');
		//$('thumstone-active').getElement('div.thumstone').set('html', pos.get('html'));
		//setup tween
		var tween = $('thumstone-active').get('tween', {property: 'opacity'});
		//fade it away
		tween.start(0).chain(function(){
			//get value from elsewhere and inject it in the dom
			$('thumstone-active').getElement('div.thumstone').set('html', pos.get('html'));
			//show again
			tween.start(1);
		});
		mytimer = this.next.bind(this).delay(this.delay+this.speed);
	}

});