// onload window the title of the page appear
// when the event finish start the function showPostTitle()
// that show the post title of the page
Event.observe(window, 'load', function() {
	// logo href
	Effect.tagifyText('post_title_1');
	// now I fade all text
	Effect.multiple('post_title_1', Effect.Fade, {speed:0.01});
	Effect.Appear('title' , { 
		duration: 3.0, 
		afterFinishInternal:function(){showPostTitle1();}
	});
}, false);

function showPostTitle1(){
	// I can turn on the visibility of the id post_title_1 because every single words is now invisible
	$('post_title_1').style.visibility = 'visible';
	// show the effect
	Effect.multiple('post_title_1', Effect.Appear, {speed:0.08});
}

// event observe
Event.observe(window, 'load', function() {
	// I load the images that I need for the effect
	loadImages(
		['includes/images/win_nav/bg.png', 
		'includes/images/win_nav/bg_bottom.png', 
		'includes/images/win_nav/arrow.png', 
		'includes/images/win_nav/basic.png', 
		'includes/images/win_nav/enterprise.png',
		'includes/images/win_nav/pro.png']
		);
	// run the WinNav effect
	new WinNav('win_nav', 'a');
}, false);

// WinNav prototype class
// this class allow you to insert a new win nav effect
WinNav = Class.create();
WinNav.prototype = {
	// more text class variable
	moreText: 'Read More',

	initialize: function(nav, tagName) {
		// I take all the elements by tag name 
		this.nav = $(nav);
		this.allTags = this.nav.getElementsByTagName(tagName);
		
		// now I run the winNavAddNode function for each element
		for(var i=0, tagName; tagName=this.allTags[i]; i++) {
			this.winNavAddNode(tagName);
		}
	},

	winNavAddNode: function(tagName) {
		// I take the content text
		var content = tagName.title;
		// I delete the link title
		tagName.title = '';
		var visible = Browser.detect.isIE() ? 'hidden' : 'visible';
		
		// this is the DOM mode for create new XHTML code
		var node = Builder.node('div', {'class': 'win_nav_top', 'style': 'display:none;'}, [
			Builder.node('div', {'class': 'win_nav_content'}, [
				Builder.node('h3', ''),
				Builder.node('p', {'style': 'visibility: '+visible+';'}, content),
				Builder.node('h4', this.moreText)
			]),
			Builder.node('div', {'class': 'win_nav_bottom'})
		]);
		
		// insert the node into the tag 
		tagName.appendChild(node);

		// the events:
		// I manage the mouseover event and the mouseout event
		tagName.timeout = false;
		tagName.visible = false;
		Event.observe(tagName, 'mouseover', this.mouseover.bind(tagName, node), false);
		Event.observe(tagName, 'mouseout', this.mouseout.bind(tagName, node), false);
	},

	mouseover: function(node) {
		// if the timeout is not false I clear it
		if (this.timeout) { 
			clearTimeout(this.timeout);
			this.timeout = false;
		}
		if(!this.visible){
			this.visible = true;
			// show the node
			Effect.Appear(node, {duration:.4});
			if(Browser.detect.isIE()){
				pEl = this.getElementsByTagName('p');
				setTimeout("pEl[0].style.visibility = 'visible';", 399);
			}
		}
	},

	mouseout: function(node) {
		// set the timeout before hide the node
		if(Browser.detect.isIE()){
			pEl = this.getElementsByTagName('p');
		}else{
			pEl = null;
		}
		this.timeout = setTimeout(WinNav.prototype.hide.bind(this,node,pEl), 300);
	},

	hide: function(node,pEl) {
		this.visible = false;
		// hide the node
		if(Browser.detect.isIE()){
			pEl[0].style.visibility = 'hidden';
		}
		Effect.Fade(node, {duration:.2});
	}
}