window.addEvent('domready', function(){
	if($('timeline')){
		var myIScroll = new IScroll($('timeline'),{});
	}
});


var IScroll = new Class({

	options: {
		onComplete: function(el){
			// not implemented yet
		},
		className: 'iscrollframe',
		idName: 'iscrollframe'
	},

	initialize: function(element,entries, options){
		this.setOptions(options);
		var distance=0;
		var prevY=0;
		this.isDragged = false;
		this.yearBackground = new Color(element.getElement('li').getElement('.year').getStyle('background-color'));
		this.yearOverBackground = new Color('#3b77a9');
		// this.yearFontSize = element.getElement('li').getElement('.year').getStyle('font-size'); // not correctly working in IE
		this.yearFontSize = '24px';
		this.yearOverFontSize = '46.5em';
		this.contentBackground = new Color(element.getElement('li').getElement('.y-content').getStyle('background-color'));
		this.contentOverBackground = this.yearBackground;
		this.imageHideSize = {'width':'12px', 'height':'12px'};

		/* --- Modify HTML --- */
		if(!$($(element).parentNode).hasClass(this.options.className) && $(element).parentNode.id != this.options.idName){
			this.draggable = $(element).clone();
			this.frame = new Element('div',{
				'class': this.options.className,
				'id': this.options.idName,
				'styles': {
					'position': 'absolute',
					'overflow': 'hidden'
				}
			});
			$(element).replaceWith($(this.frame));
			this.draggable.injectInside($(this.frame));
		}else{
			this.draggable = $(element);
			this.frame = $(element).parentNode;
		}

		/* --- Modify Visuals of each entry --- */
		this.draggable.getElements('li').each(function(el,i){
			this.initEntry(el,i);
		},this);

		/* --- Modify Draggable Visuals --- */
		var frameHeight = $(this.frame).getSize().size['y'];
		this.draggable.setStyles({
			'position':'absolute',
			'top': frameHeight,
			'left':0,
			'cursor': 'move'
		});

		/* --- Variables for dragging --- */
		this.boundTop = frameHeight / 2;
		this.boundBottom = frameHeight / 2 - $(this.draggable).getSize().size['y'];

		/* -- Scroll In --- */
		this.draggable.effect('top',{
			transition: Fx.Transitions.cubicOut,
			duration: 1500
		}).start(0);

		/* --- Drag --- */
		this.draggable.makeDraggable({
			options:{snap:10},
			modifiers:{x:'', y:'top'},
			onDrag: function(){
				// this.isDragged = true;
				distance = this.draggable.getStyle('top').toInt() - prevY;
				prevY = this.draggable.getStyle('top').toInt();
			}.bind(this),
			onComplete: function(){
				// this.isDragged = false;
				var to = this.draggable.getStyle('top').toInt()+distance*10;
				var dura = 500 + Math.abs(distance * 10);
				this.draggable.effect('top',{
					transition: Fx.Transitions.cubicOut,
					duration: dura
				}).start(to).chain(function(){
					if(to < this.boundBottom){
						this.draggable.effect('top',{
							transition: Fx.Transitions.cubicOut,
							duration: dura
						}).start(this.boundBottom);
					}else if(to > this.boundTop){
						this.draggable.effect('top',{
							transition: Fx.Transitions.cubicOut,
							duration: dura
						}).start(this.boundTop);
					};
				}.bind(this));
			}.bind(this)
		});
	},

	initEntry: function(el,id){
		var imageSize = 0;
		var active = false;
		el.setProperty('id','item'+id);
		el.getElement('.description').setStyles({'display':'none', 'opacity':0});
		if(el.getElements('img')[0]){
			imageSize = {'width':el.getElements('img')[0].getStyle('width'), 'height':el.getElements('img')[0].getStyle('height')};
			el.getElement('img').setStyles(this.imageHideSize);
		}else{
			var imageSize = 0;
		};

		/* --- click for details buttons --- */
		var detailsButton = new Element('a',{
			'href': '#',
			'alt':'details',
			'class':'detailslink',
			'styles': {
				'float': 'right'
			},
			'events': {
				'click': function(e){
					e = new Event(e).stop();
					if(active == false){
						this.inflateEntry(el,id,imageSize);
						active = true;
					}else{
						this.shrinkEntry(el,id,imageSize);
						active = false;
					}
				}.bind(this)
			}
		}).injectBefore(el.getElement('h2'));
		detailsButton.appendText('Details');
	},

	inflateEntry: function(el,id,imageSize){
			el.getElement('.year').effect('background-color').start(this.yearOverBackground);
			el.getElement('.year').effect('font-size').start(this.yearOverFontSize);
			el.getElement('.y-content').effect('background-color').start(this.contentOverBackground);
			if(imageSize != 0){
				el.getElement('img').effects().start(imageSize).chain(function(){
					el.getElement('.description').setStyles({'display':'block', 'opacity':0});
					el.getElement('.description').effect('opacity').start(1);
				});
			}else{
				el.getElement('.description').setStyles({'display':'block', 'opacity':0});
				el.getElement('.description').effect('opacity').start(1);
			}
	},
	
	shrinkEntry: function(el,id,imageSize){
		el.getElements('.year')[0].effect('background-color').start(this.yearBackground);
		el.getElement('.year').effect('font-size').start(this.yearFontSize);
		el.getElement('.y-content').effect('background-color').start(this.contentBackground);
		el.getElement('.description').effect('opacity').start(0).chain(function(){
			el.getElement('.description').setStyles({'display':'none'});
		});
		if(imageSize != 0){
			el.getElement('img').effects().start(this.imageHideSize);
		}
	}

});
IScroll.implement(new Events);
IScroll.implement(new Options);