/***/
var SlideShow = Class.create({	
	timerCallback : function() {			
		fadeDown = new Effect.Fade(this.frames[this.activeFrame], {	'sync' : true });										
		
		fadeUp = new Effect.Appear(this.frames[(this.activeFrame + 1) % this.frames.length], { 'sync' : true });				
								
		slideOut = new Effect.Morph(this.tabs.childElements()[this.activeFrame], {						
			'style' : { 'width' : '5px' },
			'sync' : true	
		});
		
		slideIn = new Effect.Morph(this.tabs.childElements()[(this.activeFrame + 1) % this.frames.length], {						
			'style' : { 'width' : '600px' },
			'sync' : true	
		});				
		
		new Effect.Parallel([	
			fadeDown,
			fadeUp,			
			slideOut,
			slideIn
		], {
			'duration' : this.options.fadeDuration
		});									
												
		this.activeFrame = ++this.activeFrame % this.frames.length;
						
		this.startTimer();
	},
	
	startTimer : function() {		
		this.timer = setTimeout(this.timerCallback.bind(this), this.options.pauseDuration * 1000);
	},
		
	initialize : function(slideshow, options) {					
		this.options = options || {};				
							
		this.options = ob_set_defaults(this.options, {
			'pauseDuration' : 5,
			'fadeDuration' : 1
		});				
		
		// General init	
		this.slideshow = slideshow;					
		this.slideshow.addClassName('active');
									
		// Get frames		
		this.frames = this.slideshow.getElementsBySelector('.block');					
		
		this.activeFrame = 0;
		
		this.frames.each(function(element, index) {
			if(index != 0) {
				element.hide();
			}
		});
						
		// Create tabs container
		this.tabs = new Element('div', { 'id' : 'tabs' });
				
		// Move content into tabs.
		this.frames.each(function(element, index) {			
			h2 = element.down('h2');		
			p = element.down('p');
			
			if(index == 0) {
				tab = new Element('div', { 'class' : 'tab' })
					.insert(new Element('h2').update(h2.innerHTML))
					.insert(new Element('p').update(p.innerHTML))					
			} else {
				tab = new Element('div', { 'class' : 'tab', 'style' : 'width:5px;' })
					.insert(new Element('h2').update(h2.innerHTML))
					.insert(new Element('p').update(p.innerHTML))					
			}

			this.tabs.insert(
				tab					
					.observe('click', function(event) {
						window.location = Event.element(event).down('a').readAttribute('href');
					})			
			);
			
			h2.remove();
			p.remove();
		}.bind(this));				
				
		// Insert tabs
		this.slideshow.insert(this.tabs);													
					
		// Start the show							
		this.startTimer();				
	}	
		
});

/***/
var Features = Class.create({				
	jumpToPage : function(page) {		
		this.pagination_pages[this.current_page].removeClassName('active');
		this.current_page = page;
		this.pagination_pages[this.current_page].addClassName('active');
		
		margin = -page * this.single_post_height * this.options.page_size;
		
		if(this.effect) {
			this.effect.cancel();
		}
		
		this.effect = new Effect.Morph(this.container, {
			'style' : {'margin-top' : margin + 'px'},		
			'duration' : this.options.slide_duration
		});							
	},
		
	previousPage : function() {
		if(this.current_page > 0) {
			this.jumpToPage(this.current_page - 1);
		}
	},
	
	nextPage : function() {
		if(this.current_page < this.nPages - 1) {
			this.jumpToPage(this.current_page + 1);
		}
	},
	
	initialize : function(features, options) {					
		this.options = options || {};				
							
		this.options = ob_set_defaults(this.options, {
			'slide_duration' : 1,			
			'page_size' : 3						
		});				
		
		// General init	
		this.features = features;					
		this.features.addClassName('active');
	
		// Add .pages and .container			
		this.features.insert(
			this.pages = new Element('div', {'class' : 'pages'}).insert(
				this.container = new Element('div', {'class' : 'container'})
			)			
		);
											
		// Get posts
		this.posts = this.features.getElementsBySelector('.block');					
		
		this.single_post_height = this.posts[0].getHeight() + 10;
		
		// Set .pages height
		this.pages.setStyle({
			'height' : this.single_post_height * this.options.page_size - 12 + 'px'
		})				
				
		// Get nPages
		this.nPages = Math.ceil(this.posts.length / this.options.page_size);
				
		this.pages = new Array();

		// Create pages
		for(i = 0; i < this.nPages; i++) {
			page = new Element('div', {'class' : 'page'});
			
			this.pages[i] = page;			
			this.container.insert(page);
		}
				
		// Move features into respective pages
		this.posts.each(function(element, index) {
			this.pages[Math.floor(index / this.options.page_size)].insert(element);			
		}.bind(this));					
		
		// Add pagination			
		this.features.insert(
			this.pagination = new Element('ul', {'class' : 'pagination'})
		);
		
		this.pagination.insert(
			new Element('li', {'class' : 'prev'})
				.insert(
					new Element('a', {'href' : '#', 'class' : 'ir'})
						.update('Previous<span></span>')
						.observe('click', function(event) {
							Event.stop(event);
							
							this.previousPage();
						}.bind(this))
				)
		);
		
		this.pagination_pages = new Array();
		
		for(i = 0; i < this.nPages; i++) {			
			this.pagination.insert(
				this.pagination_pages[i] = new Element('li', {'class' : 'page'})
					.insert(
						new Element('a', {'href' : '#', 'title' : 'Page ' + (i + 1)})
							.update(i + 1)
							.observe('click', function(event) {
								Event.stop(event);																							
								this.jumpToPage(parseInt(Event.element(event).innerHTML) - 1);
							}.bind(this))
					)
			);			
		}
		
		this.pagination_pages[0].addClassName('active');
		this.current_page = 0;
		
		this.pagination.insert(
			new Element('li', {'class' : 'next'})
				.insert(
					new Element('a', {'href' : '#', 'class' : 'ir'})
						.update('Next<span></span>')
						.observe('click', function(event) {
							Event.stop(event);
							
							this.nextPage();
						}.bind(this))
				)
		);
	}			
});
/***/

document.observe("dom:loaded", function(event) {		
	new SlideShow($('slideshow'));
	
	new Features($('features'));
});