/*
*	@Class TextInfoBox
*	words : Array, words that should be replaced
*	boxClasses : Array, classes that should be assigned to the replacing link. the first class should equal the ID name of the box
*	contextId : String, if supplied, this will be the id of the base node that will be searched for words
*	offsetX : integer, additional offset from the box starting point besides the link
* 	offsetY  : integer, additional offset from the box starting point above the link
*/

var TextInfoBox = Class.create({
	
	initialize: function( words, boxClasses, contextId, offsetX, offsetY ){
		
		window.gaba_tib = this;
		
		this.contextId = contextId;
		this.boxClasses = boxClasses;
		this.mainBoxClass = boxClasses[0]
		this.boxClassesString = this.boxClasses.join(" ");
		this.offsetX = offsetX || 0;
		this.offsetY = offsetY || 0;
		
		this.box = $(this.mainBoxClass );
		if( this.box ){
			this.box.setStyle({
				border: "1px solid #acacac",
				position: "absolute"
			});
		}
		
		this.replace();
	},
	
	replace: function(){
		
		this.context = $(this.contextId) || $$('body')[0];
		this.paragraphs = this.context.select("p");
		this.paragraphs.each( function(p){
			p.innerHTML = this.setText( p.innerHTML );
		}.bind(this));
	},
	
	setText: function(bodyText){
		
		var s = '<a href="javascript:return void(0);" onmouseover="TextInfoBox.show(event)" onmouseout="TextInfoBox.hide(event)" class="' + this.boxClassesString + '">';
		var e = '</a>'
			
		var word = "aminfluorid(e|)";
		var newValue =  bodyText.replace(new RegExp('(\\'+word+'\\b)', 'gi'), s+ "$1" + e);
		return newValue;
	},
	
	showBox: function( e ){
		var elem = Event.findElement(e,'a');
		var offsetX = this.offsetX + elem.getWidth();
		this.box.clonePosition( elem, {setLeft:true, setTop:true, setWidth:false, setHeight:false, offsetTop: this.offsetY, offsetLeft: offsetX })
		
		var leftPos = parseInt( this.box.getStyle("left") );
		
		if( leftPos + this.box.getWidth() > this.context.getWidth()){
			offsetX = -this.offsetX - this.box.getWidth();
			this.box.clonePosition( elem, {setLeft:true, setTop:true, setWidth:false, setHeight:false, offsetTop: this.offsetY, offsetLeft: offsetX })
		}

		this.box.show();	
	},
	
	hideBox: function(){
		this.box.hide();
	}	
});

TextInfoBox.show = function(e){
	window.gaba_tib.showBox(e);
}

TextInfoBox.hide = function(e){
	window.gaba_tib.hideBox(e);
}


/*
*	@Class BoxSlider
*	container : String, container of the boxes as prototype extendend node
*	interval : integer, the time in seconds between each box is shown, defaults to 5
*	marginRight : integer, margin to the next box, defaults to 0
*/

var BoxSlider = Class.create({
	
	initialize: function( container, interval, marginRight ){
		this.container = container;
		this.interval = interval || 5;
		this.marginRight = marginRight || 0;
		this.boxes = this.container.childElements();
		this.currentBoxIdx = 0;
		
		if( this.boxes.length > 1 ){
			this.boxes.each(function(box){
				box.setStyle({"float":"left", "marginRight": this.marginRight + "px"});
			}.bind(this))
			this.timer = new PeriodicalExecuter( this.nextBox.bind(this), this.interval );
		}
	},

	nextBox: function(){
		
		var currentBox = this.boxes[this.currentBoxIdx];
		
		if( this.currentBoxIdx != this.boxes.length -1 )
			this.currentBoxIdx++;
		else
			this.currentBoxIdx = 0;
		
		var nextBox = this.boxes[this.currentBoxIdx];
		
		new Effect.Fade( currentBox, { duration:0.5, from:1, to:0, afterFinish: function(){
			nextBox.setStyle({display:"block",left:"0px"}).setOpacity(0);
			new Effect.Fade( nextBox, { duration:0.5, from:0, to:1 });
		} });
		
	}
});


/*
*	@Class MiniSlider
*	container : HTMLElement, container of the image as prototype extended node
*/

var MiniSlider = Class.create({
	
	initialize: function( container ){
		var elem = container.down('table');
		new Effect.Move(elem, { x: -elem.getWidth(), y: 0, mode: 'absolute', duration:0.5 }); 
		new Effect.Move(elem, { x: 0, y: 0, mode: 'absolute', duration:0.5, delay:2, queue: 'end' }); 
	}
});

document.observe("dom:loaded", function(){
	var container = $("boxContainer");
	if( container ) new BoxSlider( container, 5, 10 );	
})

Element.observe( window, "load", function(){
	var container = $("mini-slider");
	if( container ) new MiniSlider( container );
})