var AnimatedScroller = Class.create (Control.Scroller, {
	initialize: function($super) {
		$super( 'steps', 'knob', 'timeline_track', {
			axis:  'horizontal',
			up: 'btn_prev',
			down: 'btn_next',
			interval: 1000,
			delta: 1060, /* compensate for 100px padding on each step */
			onChange: function(value) {
                var page = this.updateView(value);
                this.handle.style.left = ((page * 73) + 27) + "px";
	        }.bind(this)
		});
		this.currentPage = 0;
		this.handle.style.left = '27px';
	},
	updateView: function(value) {
		this.currentValue = value;
		var page = Math.min(parseInt(value / this.options.delta), 11);
		if(page == this.currentPage)
			return page;
		
		this.currentPage = page;
		
		if(this.moveEffect)
			this.moveEffect.cancel();
			
		this.moveEffect = new Effect.Move(this.innerContent, { mode: 'absolute', x: (-(this.currentPage * this.options.delta)), duration: 1, transition:Effect.Transitions.EaseFromTo, afterFinish: function(){
			this.moveEffect = null;
		}.bind(this)});
		return page;
	}
});

/* TimelineGallery
----------------------------------------------------------------------------------------*/
var TimelineGallery = Class.create({
	initialize : function(container, path, overlay){
		this.container = container;
		this.img = this.container.down('.overlay_fact').id + ".jpg";
		
		this.path = path + this.img;
		this.overlay = overlay;
		this.headline = this.container.down('h3').innerHTML;
		this.para = this.container.down('p').innerHTML;
		this.loader = this.overlay.down('.loader');
		this.photoDiv = this.overlay.down('.photo');
		
		this.container.observe('click', this.open.bind(this));
		this.container.observe('mouseenter', this.highlight.bind(this));
		this.container.observe('mouseleave', this.dehighlight.bind(this));
		this.overlay.down('.close').observe('click', this.close.bind(this));
	
	},
	highlight: function(ev) {
		ev.stop();
		this.container.addClassName("hover");
	},
	dehighlight: function(ev) {
		ev.stop();
		this.container.removeClassName("hover");
	},
	open : function(ev){
		ev.stop();
		Position.Center(this.overlay);
		this.photo = new Element('img').hide();
		this.photoDiv.update(this.photo);
		
		this.photo.observe('load', function() {
			this.photo.appear({duration:.7});
		}.bind(this));
		setTimeout(function() { 
			this.photo.writeAttribute('src', this.path);
			this.loader.hide();
		}.bind(this), 1000);
	
		
		this.overlay.down('h4').innerHTML = this.headline;
		this.overlay.down('p').innerHTML = this.para;
		this.overlay.appear({duration: .2});
		
		$('modal_overlay').style.height = Position.GetWindowSize()[1] + "px";
		$('modal_overlay').show();

	},
	close : function(ev){
		ev.stop();
		this.overlay.fade({duration: .2});
		$('modal_overlay').hide();
		
		this.photoDiv.update('');
		this.loader.show();

	}
});

document.observe('dom:loaded', function(){	
	new CenteredPop($('btn_clocks'), $('overlay_clocks'), { modal: true });
	new CenteredPop($('btn_owners'), $('overlay_owners'), { modal: true });
	new CenteredPop($('btn_bell'), $('overlay_story'), { modal: true });
	new ModalSlideShow(0, $('btn_clocks'), $('overlay_clocks'), $$('#slideshow_clocks .slide'), $('btn_prev_clock'), $('btn_next_clock'), 6);
	new ModalSlideShow(0, $('btn_owners'), $('overlay_owners'), $$('#slideshow_owners .slide'), $('btn_prev_owner'), $('btn_next_owner'), 6);
	
	$('steps').style.width = $('periods').getWidth() + "px";
	new AnimatedScroller();
	
	$$('#module_process .facts .fact.pop').each(function(el) {
		new TimelineGallery(el, "/images/photo/timeline/", $('overlay_photo'));
	});
});