/**
 * @author Jens Meichsner
 * JS for banner effects
 */

/* 
 * delivers Content Slider
 * with Scrollbar and Mouseeffects on content-elements
 */
var contentSlider = new Class({
	
	Implements: Options,
	
	options: {
		'slide_delay': 7000,
		'box': 'content',
		'slide_duration': 2000,
		'teasers': true,
		'tease_opacity': 0.6,
		'scrollbar': true
	},
	
	slider_tmr: null,
	
	//scroll_tmr: null,
	
	initialize: function(options){
		this.box = document.id(this.options.box);
		this.setOptions(options);
		
		//get size of slider including images
		var slider_size = 0;
		$$("div.tease").each(function(el){
			div_size = el.getSize();
			slider_size = slider_size + div_size.x + 22;
		});
		$('content-inside').setStyle('width', slider_size + 300);
		
		/* 
		 * slide content box
		 */
		
		this.slide_size = $("content-inside").getSize();
		this.container_size = this.box.getSize();
		
		this.slide = new Fx.Scroll(this.options.box, {
			wait: false,
			duration: this.options.slide_duration,
			transition: Fx.Transitions.Quad.easeInOut
		});
		
		if(this.options.teasers){
			this.initTeasers();
		}
		if(this.options.scrollbar){
			this.initScrollbar();
		}
	},
	
	do_slide: function(){
		var scroll_pos = this.box.getScroll();
		
		if(scroll_pos.x >= this.slide_size.x - this.container_size.x){
			this.slide.toLeft();
		}
		else {
			this.slide.start(scroll_pos.x + 150, 0);
		}
	},
	
	start: function(){
		//prevent autosliding if details box is visible
		var details = $('ajax_cage').getStyle('display');
		if(details == 'none'){
			clearInterval(this.slider_tmr);
			this.slider_tmr = this.do_slide.periodical(this.options.slide_delay, this);
		}
	},
	
	stop: function(){
		clearInterval(this.slider_tmr);
	},
	
	scroll: function(step){
		var scroll_pos = this.box.getScroll();
		this.box.scrollTo(scroll_pos.x + step, scroll_pos.y);
	},
	
	enterTease: function(tease){
		size = tease.img.getSize();
		this.set('morph', {duration: 400});
		this.morph({
			'width': size.x + 180+'px'
		});
		tease.img.morph({'opacity': 1});
		var reveal_evt = tease.text.reveal.delay(400, tease.text);
		return reveal_evt;
	},
	
	initScrollbar: function(){
		//first remove all events from possible previus requests
		$('scroll-right').removeEvents();
		$('scroll-left').removeEvents();
		
		//add Mouse-Events
		$('scroll-right').addEvent('mouseenter', function(e){
			//e.stop();
			this.stop();
			timer = this.scroll.periodical(60, this, 10);
		}.bind(this));
		
		$('scroll-right').addEvent('mouseleave', function(e){
			//e.stop();
			clearInterval(timer);
			this.start();
		}.bind(this));
		
		$('scroll-left').addEvent('mouseenter', function(e){
			//e.stop();
			this.stop();
			timer = this.scroll.periodical(60, this, -10);
		}.bind(this));
		
		
		$('scroll-left').addEvent('mouseleave', function(e){
			//e.stop();
			clearInterval(timer);
			this.start();
		}.bind(this));
	},
	
	initTeasers: function(){
		$$("div.tease").each(function(el){
			var tease_text = el.getElement('p.tease_text');
			var tease_img = el.getElement('img.tease-img');
			tease_img.setStyle('opacity', this.options.tease_opacity);
			var size = tease_img.getSize();
			var reveal_evt;
			el.addEvent('mouseenter', function(e){
					this.stop();
					reveal_evt = this.enterTease.delay(1000, el, {'img': tease_img,'text': tease_text});
			}.bind(this));
			el.addEvent('mouseleave', function(e){
					clearTimeout(reveal_evt);//clear text if mouse leaves before event starts
					tease_text.dissolve.delay(400, tease_text, {duration: '200'});
					el.morph.delay(550, el,{
						'width': size.x
					});
					tease_img.morph({'opacity': this.options.tease_opacity});
					this.start();
			}.bind(this));
		}.bind(this));
	}
});

/* 
 * global Nav Events
 */
window.addEvent('domready', function(){

	details = new popup();
	
	var nav_reveal = new Fx.Reveal('nav');
	$('start_container').addEvents({
		mouseenter: function(){
			$('start_img').morph({
				'opacity': '1'
			});
			nav_reveal.reveal();
		}
	});
	
	$('start_container').addEvents({
		mouseleave: function(){
			nav_reveal.dissolve();
			$('start_img').morph({
				'opacity': '0.5'
			});
		}
	});

// Ajax request for content
	$$('#nav a.ajax').each(function(el){
		var source = el.get('text');
		$('content').set('load', {onSuccess: function(){
				if(source == 'referenzen' && el.hasClass('active')){
					ref_slider = new contentSlider();
					ref_slider.start();
				}
			}
		});
		el.addEvent('click', function(){
			if(window.ref_slider !== undefined){
				ref_slider.stop();
			}
			//clearInterval(global_tmr);//clear slide loop from last visit
			$('content').load('includes/'+source+'.php');
			var curr_page = $('nav').getElement('a.active');
			if(curr_page){
				curr_page.removeClass('active');
			}
			el.addClass('active');
			return false;
		});
	});

});

/* 
 * Window-Object (Pop-Up)
 */
var popup = new Class({
  
  Implements: Options,
  
  options: {
    'ajax': true,
    'block': true,
    'ajax_el': 'ajax_cage',
    'content_el': 'ajax_content',
    'last_zindex': 100
    
  },
  
  initialize: function(options){
    this.ajax_el = document.id(this.options.ajax_el);
    this.content_el = document.id(this.options.content_el);
    this.setOptions(options);
  },

  show: function(content){
    var offset = window.getScroll();
    ref_slider.stop();//halt auto-slider, ToDo put in extend
    if(this.options.block){
      showAjaxBlocker(last_zindex);
    }
    this.ajax_el.setStyles({ display: 'inline', zIndex: this.options.last_zindex+2 });
    if(this.options.ajax){
      this.content_el.load('includes/projects/'+content+'/'+content+'.php');
    }
    else {
      this.content_el.set('html', content)
    }
  },
  
  close: function(){
    this.ajax_el.setStyles({ display: 'none', 'z-index': last_zindex });
    this.content_el.set('html', '<img src="img/ajax-loader.gif" />');
    if(this.options.block){
      hideAjaxBlocker();
    }
    ref_slider.start();//start auto slide, ToDo put in extend
  } 
});


/* 
 * delivers Details-Lightbox
 */
var last_zindex = 100;

function showDetails(project){
	var offset = window.getScroll();
  	ref_slider.stop();//halt auto-slider
	showAjaxBlocker(last_zindex);
	$('ajax_cage').setStyles({ display: 'inline', zIndex: last_zindex+2 });
	$('ajax_content').load('includes/projects/'+project+'/'+project+'.php');
}

function closeDetails(){
	$('ajax_cage').setStyles({ display: 'none', zIndex: last_zindex });
	$('ajax_content').set('html', '<img src="img/ajax-loader.gif" />');
	hideAjaxBlocker();
	ref_slider.start();//start auto slide
}

function showAjaxBlocker(zindex) {
	$('ajax_blocker').setStyles({display: 'inline', 'z-index': zindex});
	$('ajax_blocker').addEvent('click', function(){
		closeDetails();
	});
	return true;
}
function hideAjaxBlocker() {
	$('ajax_blocker').setStyle('display', 'none');
	$('ajax_blocker').removeEvents();
	return true;
}

//fetch next image from sorted comma-seperated list of images, stored in same folder
function nextImage() {
	var el;
	var imgnr = 0;
	var imgs = imglist.split(",");
	//imgs.pop();
	var max_el = imgs.length - 1;
	var imgpath = $('img_swap').getProperty('src').split("/")
	var curr_img = imgpath.pop();
	var n_imgpath = imgpath.join("/");
	for (el in imgs) {
		if ((imgs[el] == curr_img) && (el < max_el)) {
			imgnr = el;
			imgnr++;
		}
	}
	$('img_swap').setProperty('src', n_imgpath+'/'+imgs[imgnr]);
	//updateSubnav(imgnr);
}