$.fn.slideShow = function(i)
{
	var element = this;
	element.children(':gt(0)').hide();
	setInterval(function(){
		element.find('img.active').fadeOut(900).removeClass('active').next('img').addClass('active').fadeIn(900).end().appendTo(element);
	}, i || 10000);
}

$(document).ready(function() {
	
	// run slideshow on this div
//	$('#carousel .inner').slideShow(5000);
	$('#carousel .inner').cycle({
			fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
		});
	

	// for all browsers
	if (! $.browser.msie ) 
	{
		//alert('its running!');
		$('#navi').hover(function(){
			// inicialize markup so we start function with canvas already set
			$(this).find('img').rotate(0);

			var arrow = $(this).find('span > span > canvas');

			if ( arrow.parent().hasClass('expanded') ) 
			{
				arrow.rotateAnimation(0);
				arrow.parent().removeClass('expanded');
			}else{
				arrow.rotateAnimation(90);
				arrow.parent().addClass('expanded');
			};
			// we set with arrow so lets toggle ul with links
			$(this).parents().find('#navi > ul').stop(true,true).slideToggle(500);
		});		
	}else{
		// set expanded arrow - since the animation is not working ##### TODO
		$('#navi h3').find('img').attr('src','images/arrow_expanded.png');
		
		// reset boxes layer opacity so the animater hover effect is working normally
		$('.box > a').find('.transp').css('opacity','0');
		
		// slide down the menu
		$('#navi').hover(function(){			
			$(this).parents().find('#navi > ul').stop(true,true).slideToggle(500);
		});
	}
	
	if (($.browser.webkit == true) || ($.browser.opera == true)) 
	{
		$('#navi').hover(function(){
			
			var arrow = $(this).find('img');
			if ( arrow.hasClass('expanded') ) 
			{
				arrow.rotateAnimation(0);
				arrow.removeClass('expanded');
			}else{
				arrow.rotateAnimation(90);
				arrow.addClass('expanded');
			};
			
			$(this).find('#navi > ul').stop(true,true).slideToggle(500);
		
		});
		
	}
	
	//Animated hover effect for boxes
	$('.box > a').mouseover(function(){
		$(this).find('.transp').stop(true,true).animate({opacity:0.5},200);
	}).mouseleave(function(){
		$(this).find('.transp').stop(true,true).animate({opacity:0},200);
	});
	
	
	// tabs
	$('#tabs > ul > li').hover(function(){

		$(this).addClass('active').find('ul').stop(true,true).slideDown(500);
	}).mouseleave(function(){
		$(this).removeClass('active').find('ul').stop(true,true).slideUp(200);
	});
}); // end of DOM ready