// Feature Box for displaying an animation of multiple contents, e.g. news with pic, headline, teaser...
// Requires min MooTools 1.2.1, http://mootools.net
function feature_box(container) {
    // Declaring properties

    this.container = container;		// parent DOM element
    this.features = new Array();	// Array of feature objects
    this.feature_active;			// Reference to active feature
    this.tabmenu;					// DOM element for tabbing thru features
    this.interval;					// interval instance for auto-tabbing / slideshow
    this.interval_time = 8000;		// time for showing a single feature in slideshow mode
    this.effect = false;			// effect for switching features

    // Declaring methods

    // Create DOM elements for tabbing thru features
    this.create_tabmenu = function () {
		this.tabmenu = new Element('ul', ({
			    'class': 'fb_tabmenu'
			}));
		for (var j=0; j < this.features.length; j++) {
		    var at = new Element('a', {
			});
		    at.appendText(this.features[j].anchor.get('text'));
		    at.callingobj = this;
		    at.index = j
			at.addEvent('click', function() {
				var c = this.callingobj;
				window.clearInterval(this.callingobj.interval);
				c.show_feature(this.index);
			    });	
		 
		    var lt = new Element('li');
		    at.injectInside(lt);
		    lt.injectInside(this.tabmenu);
		}
		 
		this.tabmenu.injectInside(this.container);
    }
	 
    // shows feature, hides last shown feature...
    this.show_feature = function(ft_index) {
	 
		var old_feature = false;
		var z = this.features.length+1;
		 
		// tab clicked twice? denial!
		if (this.feature_active == ft_index) return;
		 
		if (this.feature_active != undefined) {
		    old_feature = this.features[this.feature_active];
		    z = parseInt(old_feature.container.getStyle('z-index'))+1;
		    l = this.tabmenu.getElements('li')[this.feature_active];
		    l.removeClass('act');
		}
		 
		this.feature_active = ft_index;
		var c = this.features[this.feature_active].container;
		 
		// prepare style sheet properties of feature to be shown
		c.fade('hide');
		c.setStyle('display', 'block');
		c.setStyle('z-index', z);
		 
		if (this.effect) this.effect.cancel();
		 
		// create fade
		this.effect = new Fx.Tween(c, {
			duration: 400,
			fps: 25,
			onComplete: function() {
			    if (old_feature) {
					old_feature.container.setStyle('display', 'none');
			    }
			    c.setStyle('z-index', '1');
			}.bind(this)
	    });
		this.effect.start('opacity',0,1);
		
		l = this.tabmenu.getElements('li')[this.feature_active];
		l.addClass('act');			
    }		
	 
	 
    // automatic slideshow of features
    this.slideshow = function() {
		if (this.feature_active < (this.features.length-1) ) {
		    this.show_feature(this.feature_active+1);
		}
		else {
		    this.show_feature(0);
		}
    }
	 
	 
    // inserts background element into teasing header
    this.format_teaser = function(feature) {
		var teaser = feature.container.getElement('h2');
		 
		var w = parseInt(teaser.getStyle('width')) + parseInt(teaser.getStyle('padding-left')) + parseInt(teaser.getStyle('padding-right'));
		var h = parseInt(teaser.getStyle('height')) + parseInt(teaser.getStyle('padding-top')) + parseInt(teaser.getStyle('padding-bottom'));
		 
		var t = teaser.get('html');
		teaser.set('text', '');
		var bg = new Element('div', ({
			    'class': 'header_bg',
			    'style': 'height: ' + h + 'px; width: ' + w + 'px; position:absolute; z-index:1; top:0px; left:0px; background-color:#000;'
			})
		);
		 
		bg.fade(0.5);
		 
		var txt = new Element('span', {
			'style':'color:#fff; position:relative; z-index:100;'
		});

		txt.set('html', t);
		txt.injectTop(teaser);
		 
		bg.injectBefore(txt);
    }
	 
	 
    // ---------------------------------------
	 
    var feature_containers = container.getElements('li');

    for (var i=0; i<feature_containers.length; i++) {
		this.features.push(new feature(feature_containers[i], this));
		this.format_teaser(this.features[i]);
    }
		  
		  
		  
    this.create_tabmenu();
    this.show_feature(0);
		  
    var selfobject = this;
    this.interval = window.setInterval (function(){selfobject.slideshow();}, this.interval_time);
}
							      
							      
							      
// class for single features
function feature(container, feature_box) {
    // this.tab;
							      
    // Reference to DOM-Element
    this.container = container;
							      
    // Reference to parent FB
    this.feature_box = feature_box;
							      
    // URL 
    this.anchor = this.container.getElement('a');
							      
    this.container.addEvent('click', function() {
	    out(this.anchor);
	    location.href = this.anchor;
	}.bind(this)
	);							      
}
							      
							      
							      
// Helper functions // Debugging output via div.right      
function out(val) {
    if ($('right')) 	$('right').innerHTML += "<br />" + val;
}
function clear() {
    if ($('right')) 	$('right').innerHTML = '';
}
							      

window.addEvent("domready", function() {
    var fb_divs = $$('div.feature_box');
    for(var i=0; i < fb_divs.length; i++) {
		fb = new feature_box(fb_divs[i]);
    }
});