// JavaScript Document

/********************************************************
*														*
*		www.bilic-eric.hr								*
*		text_image_animation.js							*
*		author: Ivan Jukić								*
*		contact: jukic2001@yahoo.com					*
*		copy: 2009										*
*		version: v0.1									*
*		description: combined image nad text animation	*
*			requires prototype.js framework				*
*		liscence: GNU									*
*														*
*********************************************************/


/* GLOBAL VARIABLES */

//parent div
var sParent 	= "aktivnosti-article-div";
// text root div
var sTextId 	= "aktivnosti-articles";
// links root div
var sLinksId	= "aktivnosti-links-div";
//browser dependant
var xPath = 0;

//global variables
var oTextDiv = null;
var oLinksDiv = null;

//animation setup is done when document is ready for manipulation
window.onload = setDivisionAnimate;

function setDivisionAnimate()
{
	//detect posibility, for IE false, for rest true
	xPath = Prototype.BrowserFeatures.XPath;
	
	//get neccessary divisions
	oTextDiv  = $( sTextId ); //document.getElementById( sTextId );
	oLinksDiv = $( sLinksId );//document.getElementById( sLinksId );
	
	//get all children nodes with specified class name
	
	
	//add on click event for their div child nodes
	var links_div = oLinksDiv.getElementsByTagName( 'div' );
	for( var i=0; i < links_div.length; i++ ) 
	{
		links_div[i].position = i;
		links_div[i].onclick = function ( oEvent ) {
				//event for IE
				if( window.event )
					oEvent = window.event;
				//event fot rest
				else 
					oEvent = arguments[0];
					
				//function for liks klicks
				showHideArticle( oEvent );
			}
	}	
	
	
	var text_divs = oTextDiv.getElementsByTagName( 'div' );
	var pom = false;
	//hide all oher articles except first
	for( i=0; i < text_divs.length; i++ ) 
	{		
		//else if div and not first
		if( pom && text_divs[i].style)
		{
			text_divs[i].fade = false;
			//hide article
			text_divs[i].style.display = 'none';
			//get text nodes and make them transparent
			cnodes = getElementsWithClassName( 'article-text', text_divs[i], xPath );
			for( k=0; k<cnodes.length; k++ ) {
				cnodes[k].style.opacity = 0;
				cnodes[k].style.filter  = 'alpha(opacity=0)';
			}
		}
		
		//if first div
		else if( !pom && text_divs[i].style )
		{
			text_divs[i].fade = true;
			//hide article
			text_divs[i].style.display = 'block';
			cnodes = getElementsWithClassName( 'article-text', text_divs[i], xPath );
			for( k=0; k<cnodes.length; k++ ) {
				cnodes[k].style.opacity = 1;
				cnodes[k].style.filter  = '';	
			}
			//additional variable
			pom = true;
		}
	}
	
	
	//article images
	var images = $$( "img.article-img" );
	
	for( i=0; i<images.length; i++)
	{
		images[i].style.opacity = 1;
		//on mouse over
		Event.observe(
			images[i], 
			'mouseover', 
			function(event) 
			{
				var element = Event.element(event);
				element.setStyle({border : '2px solid red', position:'absolute', top:'-2px', left:'-2px', zIndex:'100', height:'92px', width:'92px' });
			});
		
		//on mouse out
		Event.observe(
			images[i], 
			'mouseout', 
			function(event) 
			{
				var element = Event.element(event);
				element.setStyle({border : 'none', position:'relative', top:'0px', left:'0px', zIndex:'0', height:'90px', width:'90px' });
			});
	}
	
};

//function for text and gallery showing
function showHideArticle( oEvent ) 
{
	//dependes on IE or DOM implementation
	if( window.event )
		var obj = oEvent.srcElement;
	else
		var obj = oEvent.target;
		
		
	//itterate on main article divs child nodes, and fade out first one with full opacity
	//and find one that needs to be shown
	var article_nodes = getElementsWithClassName( 'article', oTextDiv, xPath );
	for( var i=0; i < article_nodes.length; i++ ) 
	{	 
		if( article_nodes[i].fade ) {
			var indx_current = i;
			var indx_next 	 = obj.position;
			break;
		}
	}
	
	//alert( indx_current + " " + indx_next );
	//when indexes are determined, go to fade out, and then in
	if( indx_current != indx_next ) {
		fadeOutIn( indx_current, indx_next );
	}	
};


//function for fadein, and out
function fadeOutIn( curr, next )
{
	//speed of fade out and in
	var speed = 50;
	
	//article divs
	var oArticles = getElementsWithClassName( 'article', oTextDiv, xPath );
	//div to fadeout
	var fadeOutDiv = oArticles[ curr ];
	//div to fadein
	var fadeInDiv  = oArticles[ next ];
	
	//get fadeout div child nodes for opacity change
	oFadeOutText = getElementsWithClassName( 'article-text', fadeOutDiv, xPath );
	//get fadein div child nodes for opacity change
	oFadeInText = getElementsWithClassName( 'article-text', fadeInDiv, xPath );
	
	
	var faded = false;
	
	var opacity = 1.0;
	var opacity2 = 100;
	timer = setInterval(
		function ()
		{
			//new opacity
			opacity -= 0.25;
			opacity2 -= 25;
			//change opacity for all fadeout div children
			for( i=0; i < oFadeOutText.length; i++ ) {
				oFadeOutText[i].style.filter = "alpha(opacity=" + opacity2 +")";
				oFadeOutText[i].style.opacity = opacity;
			}
			//check final opacity
			if( opacity2 <= 0 ) {
				faded = true;
				fadeOutDiv.fade = false;
				for( i=0; i < oFadeOutText.length; i++ ) {
					oFadeOutText[i].setStyle({opacity:'0', filter:'alpha(opacity=0)'});
				}
				fadeOutDiv.style.display = 'none';
				fadeInDiv.style.display = 'block';
				clearTimeout( timer );
			}
		}
		, speed );
	
	//fadein
	var _opacity = 0.0;
	var _opacity2 = 0;
	timer2 = setInterval(
		function ()
		{
			if( faded )
			{
				_opacity += 0.1;
				_opacity2 += 10;
				for( i=0; i < oFadeInText.length; i++ ) {
					oFadeInText[i].style.filter = "alpha(opacity=" + _opacity2 +")";
					oFadeInText[i].style.opacity = _opacity;
				}
				//check final opacity
				if( _opacity2 >= 100 ) {
					fadeInDiv.fade = true;
					for( i=0; i < oFadeInText.length; i++ ) {
						oFadeInText[i].setStyle({opacity:'1', filter:''});
					}
					clearTimeout( timer2 );
				}
			}
		}
		, speed );
};


function getElementsWithClassName( className, parent, type )
{
	//all except IE
	if( type ) {
		return parent.getElementsByClassName( className );
	}
	else {
		return document.getElementsByClassName( className, parent );
	}
}