var initWidth = 118;
var fullWidth = 990;
var currentItem = null;
var isActive = false;
var i = 0;
var quotes = Array();
var currentQuote = 0;

$(document).ready(function(){

	// set initial width
	$('ul#buttons li.button div.item').css('width', initWidth + 'px');

	// add button events
        $('ul#buttons li.button div.item').hover(
                function(e){
			// cancel events
			if(!e){var e = window.event;}
			e.cancelBubble = true;
			if(e.stopPropagation){e.stopPropagation();}

			// animate
			slideLayer(this,'out');
                },
                function(e){

			// cancel events
			if(!e){var e = window.event;}
			e.cancelBubble = true;
			if(e.stopPropagation){e.stopPropagation();}

			// animate
			slideLayer(this,'in');
                }
        );

	// build quotes array
	$('ul#quote_data li').each(function(){
		quotes.push($(this).html());
	});

	// display quote;
	showQuote(null);

});


function showQuote(direction){

	var text = null;
	var nextQuote = null;
	var prevQuote = null;

	if(direction == null){
		text = quotes[currentQuote];
	}

	// next quote
	if(direction == "next"){
		nextQuote = currentQuote + 1;
		if(nextQuote <= quotes.length -1){
			text = quotes[nextQuote];
			currentQuote = nextQuote;
		}else{
			currentQuote = 0;
			text = quotes[currentQuote];
		}	
	}

	// previous quote
	if(direction == "prev"){
		prevQuote = currentQuote - 1;
		if(prevQuote >= 0){
			text = quotes[prevQuote];
			currentQuote = prevQuote;
		}else{
			currentQuote = quotes.length -1;
			text = quotes[currentQuote];
		}
	}

	if(direction == null){
		$('div#qoute p').hide();
		$('div#quote p').html(text);
		$('div#quote p').fadeIn('normal');
	}else{
		$('div#quote p').fadeOut('normal',function(){
			$('div#quote p').html(text);
			$('div#quote p').fadeIn('normal');
		});
	}

}



function slideLayer(item,direction,e){

	var divLink = null;
	var parent = null;
	var classes = null;
	var liClass = null;
	var width = null;
	var currentPos = null;
	var values = null;
	var xpos = null;
	var ypox = null;

	// get vars
	divLink = $('a.link',item);
	parent = $(item).parent()[0];
	classes = $(parent).attr('class').split(' ');
	liClass = classes[0];
	width = $(item).css('width');
	width = width.replace('px','');
	currentPos = $(divLink).css('background-position');

	if(typeof(currentPos) === 'undefined'){
		xpos = $(divLink).css('background-position-x');
		ypos = $(divLink).css('background-position-y');
	}else{
		values = currentPos.split(' ');
		xpos = values[0];
		ypos = values[1];
	}

	// slide out
	if(direction == 'out'){

		// stop all animations
		$('ul#buttons li.button div.item').stop(true);

		// reset/hide all layers
		$('ul#buttons li.button div.item').css('width','118px');

		// show current button
		$(divLink).css('background-position','0 ' + ypos);

		// slide current layer
		if(liClass == 'slide'){
			$(item).animate({
				width: fullWidth + 'px'
			},600,'linear',function(){ isActive = false; });
		}
	}

	if(direction == 'in'){

		// stop all animations
		$('ul#buttons li.button div.item').stop(true);

		// hide layer
		$(item).css('width','118px');

		// hide current button
		$(divLink).css('background-position','-118px ' + ypos);

	}

}