$(window).ready( function() {
	$('.menuSwitcher li a').click(function(){
		var $clicked = $(this);
		var $container = $clicked.parents('.menuSwitcher').parent();
		$container.find('li').removeClass('active');
		$clicked.parent().addClass('active');
		var target = $clicked.attr('href').substr(1);
		if( target != undefined )
		{
			$container.children('div').css('display','none');
			$container.find('.'+target).css('display','block');
			return false;
		}
	});
	
	$('.constellationSwitcher li a').click(function(){
		var $clicked = $(this);
		var $container = $clicked.parents('.constellationSwitcher').parent();
		$container.find('li').removeClass('active');
		$clicked.parent().addClass('active');
		var target_first_char = $clicked.attr('href').substr(0,1);
		var target = $clicked.attr('href').substr(1);
		if( target != undefined && target_first_char == "#" )
		{
			$container.find('div:not(.whiteBorder,.body)').css('display','none');
			$container.find('.'+target).css('display','block');
			return false;
		}
	});
	
	
	
	
	if ( $( '#slide_container_h_1' )[0] ) {
		setTimeout( function() {
			doSlideHorizontal( $( '#slide_container_h_1' ) , $( '#slide_category_prev_h_1' ) , $( '#slide_category_next_h_1' ) );
		} , 1000 );
	}
	if ( $( '#slide_container_h_2' )[0] ){
		setTimeout( function() {
			doSlideHorizontal( $( '#slide_container_h_2' ) , $( '#slide_category_prev_h_2' ) , $( '#slide_category_next_h_2' ) );
		} , 1000 );
	}
	
	if ( $( '#related_slide_container' )[0] ){
		setTimeout( function() {
			doSlideVertical( $( '#related_slide_container' ) , $( '#related_slide_prev' ) , $( '#related_slide_next' ) );
		} , 1000 );
	}

	if ( $( '#featured_slide_container' )[0] ){
		setTimeout( function() {
			doSlideVertical( $( '#featured_slide_container' ) , $( '#featured_slide_prev' ) , $( '#featured_slide_next' ) );
		} , 1000 );
	}
	
	if ( $( '#all_slide_container' )[0] ) {
		setTimeout( function() {
			doSlideVertical( $( '#all_slide_container' ) , $( '#all_slide_prev' ) , $( '#all_slide_next' ) );
		} , 1000 );
	}

	if ( $( '#videos_highlights_box' )[0] )
		videHighlightsBox( '#videos_highlights_box' );
	
	if ( $( '.rate' )[0] )
		rateVideo( $( '.rate' ) );
	
	if ( $( '.vote' )[0] )
		voteVideo( $( '.vote' ) );
	
	if ( $( '.homeTabVideos' )[0] )
		$( '.homeTabVideos li' ).mouseenter( videos_hover_details );	
		
	// propaganda
	if ( $( '#videoAdvertising' )[0] ) {
		$( '#videoAdvertisingClose' ).click( function() { $( '#videoAdvertising' ).fadeOut( 'fast' , function() {$( this ).remove()} ); } )
		setTimeout( function() {
			$( '#videoAdvertising' ).fadeOut( 'normal' , function() { $( this ).remove(); } );
		} , parseInt( $( '#videoAdvertising' ).attr( 'class' ) )*1000 );
	}
		
	
});

function videos_hover_details()
{

	$( 'body .videos_hover_details:not(li .videos_hover_details)' ).fadeOut( 200 , function() { $( this ).remove(); } );
	var $obj	   = $( this );
	var leftoffset = $obj.offset().left-19;
	var topoffset  = $obj.offset().top-5;
	var $newObj	   = $obj.find( '.videos_hover_details' ).clone();

	$newObj.css( { 'left' : leftoffset , 'top' : topoffset } ).appendTo( 'body' ).removeClass( 'none' ).show();
	
	$newObj.click( function() {
		window.document.location.href = $obj.parent().find( 'a' ).attr( 'href' );
	});
	
	$newObj.mouseout( function() {
		$( this ).fadeOut( 200 , function() {
			$( this ).remove();
		});
	});
	
}

function rateVideo( $obj )
{
	
	var src_on  = 'img/ico-star_on.gif';
	var src_off = 'img/ico-star_off.gif';
	var $imgs   = $obj.find( 'img' );
	var imgon   = new Image();
	var imgoff  = new Image();

	imgoff.onload = function() {
		$imgs.attr( 'src' , src_on );
		imgoff.onload=function(){};
	};
	imgoff.src = src_on;

	imgoff.onload = function() {
		$imgs.attr( 'src' , src_off );
		imgoff.onload=function(){};
	};
	imgoff.src = src_off;
	
	$imgs.hover(
		function() {
			$imgs.attr( 'src' , src_off );
			var imgindex = $( this ).index();
			for( i=0 ; i<=imgindex ; i++ ) {
				$imgs.eq(i).attr( 'src' , src_on );
			}
		},
		function() {
			$imgs.attr( 'src' , src_off );
		}
	);
	
	$imgs.click( function() {
		$imgs.unbind();
		$imgs.attr( 'src' , src_off );
		var imgindex = $( this ).index();
		for( i=0 ; i<=imgindex ; i++ ) {
			$imgs.eq(i).attr( 'src' , src_on );
		}
		/*
		$.ajax({
				
		});
		*/
	});
}

function voteVideo( $obj )
{
	
	var src_on  = 'img/ico-clock_on.gif';
	var src_off = 'img/ico-clock_off.gif';
	var $imgs   = $obj.find( 'img' );
	var imgon   = new Image();
	var imgoff  = new Image();

	imgoff.onload = function() {
		$imgs.attr( 'src' , src_on );
		imgoff.onload=function(){};
	};
	imgoff.src = src_on;

	imgoff.onload = function() {
		$imgs.attr( 'src' , src_off );
		imgoff.onload=function(){};
	};
	imgoff.src = src_off;
	
	$imgs.hover(
		function() {
			$imgs.attr( 'src' , src_off );
			var imgindex = $( this ).index();
			for( i=0 ; i<=imgindex ; i++ ) {
				$imgs.eq(i).attr( 'src' , src_on );
			}
		},
		function() {
			$imgs.attr( 'src' , src_off );
		}
	);
	
	$imgs.click( function() {
		$imgs.unbind();
		$imgs.attr( 'src' , src_off );
		var imgindex = $( this ).index();
		for( i=0 ; i<=imgindex ; i++ ) {
			$imgs.eq(i).attr( 'src' , src_on );
		}
		/*
		$.ajax({
				
		});
		*/
	});
}

function doSlideVertical( $slideContainer , $slidePrev , $slideNext )
{
		
	$slideContainer.height( parseInt( $slideContainer.find( 'li' ).outerHeight( true ) )*$slideContainer.find( 'li' ).length );
	var totitenswidth = $slideContainer.find( 'li' ).length * parseInt( $slideContainer.find( 'li' ).outerHeight( true ) );

	if( $slidePrev[0] )
	{
		$slidePrev.click(
			function()
			{
				var min_height = parseInt( $slideContainer.find( 'li' ).outerHeight( true ) );
				var mtop	   = parseInt( $slideContainer.css( 'margin-top' ).toString().replace( 'px' , '' ) );
				// se ja tiver escondido o primeiro, realiza a animacao
				if ( mtop < -2){
					$slideContainer.stop( true , true ).animate( { marginTop : '+='+min_height+'px' } , 500 );
				}
				if ( mtop > -2){
					$slideContainer.stop( true , true ).animate( { marginTop : '-2px' } , 500 );
				}
				
			}
		);
	}

	if( $slideNext[0] )
	{
		$slideNext.click(
			function()
			{
				var min_height = parseInt( $slideContainer.find( 'li' ).outerHeight( true ) );
				var mtop	   = parseInt( $slideContainer.css( 'margin-top' ).toString().replace( 'px' , '' ) );
				if ( mtop <= -2 && totitenswidth + mtop > 428 ) {
					$slideContainer.stop( true , true ).animate( { marginTop : '-='+min_height+'px' } , 500 );
				}

				if ( totitenswidth + mtop <= 428 ) {
					$slideContainer.stop( true , true ).animate( { marginTop : '-'+( totitenswidth-428 )+'px' } , 500 );
				}

			}
		);
	}
	
	$slideContainer.find( 'li' ).mouseenter( videos_hover_details );
	
}


function doSlideHorizontal( $slideContainer , $slidePrev , $slideNext )
{

	$slideContainer.width( $slideContainer.find( 'li' ).outerWidth( true )*( $slideContainer.find( 'li' ).length/3) );
	$slideContainer.parent().width( $slideContainer.find( 'li' ).outerWidth( true )*2 ).css( { 'position' : 'relative' } );
	$slideContainer.css( 'margin-left' , '-8px' );

	if ( $slideContainer.parent( '.bodyForm' )[0] )
		$slideContainer.parent( '.bodyForm' ).parent().width( $slideContainer.find( 'li' ).outerWidth( true )*2 );

	if ( $slideContainer.closest( '.whiteBorder' )[0] )
		$slideContainer.closest( '.whiteBorder' ).width( $slideContainer.find( 'li' ).outerWidth( true )*2 );
	
	if ( $slideContainer.closest( '.boxForm' )[0] ){
		$slideContainer.closest( '.boxForm' ).css( { 'width' : '366px' , 'float' : 'left' , 'margin-right' : '8px' , 'display' : 'inline' } );
	}

	if( $slidePrev[0] )
		$slidePrev.click(
			function()
			{
				var min_width = parseInt( $slideContainer.find( 'li' ).outerWidth( true ) );
				var mleft	  = parseInt( $slideContainer.css( 'margin-left' ).toString().replace( 'px' , '' ) );
				// se ja tiver escondido o primeiro, realiza a animacao
				if ( mleft < -8)
					$slideContainer.stop( true , true ).animate( { marginLeft : '+='+min_width+'px' } , 500 );
				min_width = parseInt( $slideContainer.find( 'li' ).outerWidth( true ) );
				mleft	  = parseInt( $slideContainer.css( 'margin-left' ).toString().replace( 'px' , '' ) );
				if ( mleft+min_width > -8 )
					$slideContainer.stop( true , true ).animate( { marginLeft : '-8px' } , 500 );	
			}
		);

	if( $slideNext[0] )
		$slideNext.click(
			function()
			{
				var min_width = parseInt( $slideContainer.find( 'li' ).outerWidth( true ) );
				var mleft	  = parseInt( $slideContainer.css( 'margin-left' ).toString().replace( 'px' , '' ) );
				if ( ( mleft - min_width ) + $slideContainer.width() >= 352 )
					$slideContainer.stop( true , true ).animate( { marginLeft : '-='+min_width+'px' } , 500 );

				if ( ( mleft - min_width ) + $slideContainer.width() < ( 352-min_width ) )
					$slideContainer.stop( true , true ).animate( { marginLeft : +(mleft-min_width)+'px' } , 500 );

			}
		);
}

var $highlightstimeout;
var $highlights 		= window.setInterval( "startHighlights( '1' , '#videos_highlights_box'  );" , 4000 );
var $animationSpeed 	= 800;

// funcao do destaque
function startHighlights( $index , $obj ) {

	if ( $index == 1 ) clearInterval( $highlights );

	var $curr = $( $obj+' .index li.active' ).index();
	
	// se nao tiver mais indices, volta para o primeiro
	if ( $( $obj+' .index li' ).eq( $curr + 1 )[0] == undefined ) {
		$curr  = 0;
		$index = 0;
	}
	
	/* logica da animacao */
	// item a ser mostrado
	var $class = $( $obj+' .index li' ).eq( $curr + 1 ).attr( 'id' );
	// se for ele mesmo que ja esta sendo mostrado, retorna falso
	if( $( $obj+' .highlights .'+$class ).css( 'display' ) != 'none' ) return false;
	// animaco para esconder o item visivel
	$( $obj+' .highlights .entry:visible' ).fadeOut( $animationSpeed ).find( '.titles div' ).stop( false , true ).animate( { marginTop : '+=50' } , $animationSpeed , function() { $( this ).css( 'margin-top' , '-50px' ) });
	// animacao para mostrar o item desejado
	$( $obj+' .highlights .'+$class ).fadeIn( $animationSpeed ).find( '.titles div' ).stop( false , true ).animate( { marginTop : '+=50' } , $animationSpeed );
	// animacao do indice
	$( $obj+' .index li.active' ).stop( false , true ).animate( { backgroundColor : '#700' } , $animationSpeed ).removeClass( 'active' );
	$( $obj+' .index li' ).eq( $curr + 1 ).css( 'background-color' ,'#f00' ).addClass( 'active' );
	
	$index++;

	$highlightstimeout = setTimeout( "startHighlights( "+$index+" , '"+$obj+"' )" , 4000 );

}

// core da animacao do destaque
function videHighlightsBox( $obj )
{
	// velocidade padrao das animacoes
	var $animationSpeed = 800;

	$.ajax({
		type: 'GET' ,
    url: './xml/videos.xml' , // url do xml
		dataType: 'xml' ,
		success: function( xml ) {
			
			/**
			 * HTML de cada item do destaque
			<div class="highlights">
				<div class="entry">
					<div class="img">
						<img src="http://www.abstractdigitalartgallery.com/L33tm0b1l3-abstract-digital-art-fractal-Disco-Superclub-artwork.jpg" />
					</div>
					<div class="titles">
						<h2>Portar Uol</h2>
						<h3>Descricao 1</h3>
					</div>
				</div>
			</div>
			<div class="index">
				<ul>
					<li class="pause_repeat">||</li>
				</ul>
			</div>
			*/

			/**
			 * Crio a caixa de destaque e populo com o xml retornado na consulta acima
			 */
			$( '<div class="highlights"></div><div class="index"><ul><li class="pause_repeat pause"></li></ul></div>' ).appendTo( $obj );
			//$( $obj+' .highlights' ).height( $( $obj ).height() ).width( $( $obj ).width() );
			
			var $intCount = 0;
			var $totIndex = Math.floor( parseInt( $( $obj+' .highlights' ).height() )/30 );
			
			$( xml ).find( 'entry' ).each(function(){
				var $totIndex = Math.floor( parseInt( $( $obj+' .highlights' ).height() )/30 )-2;
				
				if ( $intCount >= $totIndex ) return false;
				
				// itens do XML
				var $title 	  = $( this ).find( 'title' ).text();
        if($title.length > 35){
          $title = $title.substring(0,35)+"...";
        }
        var $subtitle = $( this ).find( 'subtitle' ).text();
        if($subtitle.length > 35){
  				$subtitle = $subtitle.substring(0,35)+"...";
        }
				var $href  	  = $( this ).find( 'link' ).attr( 'href' );
				var $target   = $( this ).find( 'link' ).attr( 'target' );
				var $image    = $( this ).find( 'image' ).attr( 'src' );

				// caixa com o link
				$( '<a href="'+$href+'" target="'+$target+'"><div class="entry entry_'+$intCount+'"></div></a>' ).appendTo( $obj+' .highlights' );

				// imagens e textos
				$( '<div class="img"><img src="'+$image+'" target="'+$target+'" /></div>' ).appendTo( $obj+' .highlights .entry_'+$intCount );
				$( '<div class="titles"><div><h2>'+$title+'</h2><h3>'+$subtitle+'</h3></div></div>' ).appendTo( $obj+' .highlights .entry_'+$intCount );

				// idice numerico
				$('<li id="entry_'+$intCount+'">'+($intCount+1)+'</li>').appendTo( $obj+' .index ul' );

				$intCount++;

			}); // close each
			
			/**
			 * Metodo para carregar todas as imagens antes de mostrar o destaque
			 * Este metodo foi criado para evitar o aparecimento "duro" da imagem
			 * Assim elas aparece suavemente
			 */
			/*
			$( $obj+' .entry img' ).each( function( i , $img ) {
				var $src = $( this ).attr( 'src' );
				var objImagePreloader = new Image();
				objImagePreloader.onload = function() {
					$( this ).attr( 'src' , $src );
					objImagePreloader.onload=function(){};
				};
				objImagePreloader.src = $src;
			});
			*/
			
			// esconde todos
			$( $obj+' .highlights .entry:not(:first)' ).hide();
			// faz animacao padrao no primeiro item da lista
			$( $obj+' .highlights .entry:first' ).fadeIn( $animationSpeed ).find( '.titles div' ).stop( false , true ).animate( { marginTop : '+=50' } , $animationSpeed );
			// ativo o primeiro indice numerico
			$( $obj+' .index li:not(.pause_repeat):first' ).css( 'background-color' ,'#ff0000' ).addClass( 'active' );
			// mostra a caixa de destaque
			$( $obj ).fadeIn( $animationSpeed );
			
			
			/**
			 * Evento click nos numeros
			 * Quando clicar, esconde o item visivel atual e mostra o item desejado
			 */
			$( $obj+' .index li:not(.pause_repeat)' ).click(
				function(){

					// pauso a animacao
					clearTimeout( $highlightstimeout );
					
					// troco o icone de pause pelo repeat
					$( $obj+' .index li.pause_repeat' ).removeClass( 'pause' ).addClass( 'repeat' );

					// item a ser mostrado
					var $class = $( this ).attr( 'id' );
					// se for ele mesmo que ja esta sendo mostrado, retorna falso
					if( $( $obj+' .highlights .'+$class ).css( 'display' ) != 'none' ) return false;
					// animaco para esconder o item visivel
					$( $obj+' .highlights .entry:visible' ).fadeOut( $animationSpeed ).find( '.titles div' ).stop( false , true ).animate( { marginTop : '+=50' } , $animationSpeed , function() { $( this ).css( 'margin-top' , '-50px' ) });
					// animacao para mostrar o item desejado
					$( $obj+' .highlights .'+$class ).fadeIn( $animationSpeed ).find( '.titles div' ).stop( false , true ).animate( { marginTop : '+=50' } , $animationSpeed );
					// animacao do indice
					$( $obj+' .index li.active' ).stop( false , true ).animate( { backgroundColor : '#770000' } , $animationSpeed ).removeClass( 'active' );
					$( this ).css( 'background-color' ,'#ff0000' ).addClass( 'active' );
					
				}
			);
			
			$( $obj+' .index li.pause_repeat' ).click( function() {
				if ( $( this ).hasClass( 'repeat' ) ){
					// troco o icone de repeat pelo de pause
					$( $obj+' .index li.pause_repeat' ).removeClass( 'repeat' ).addClass( 'pause' );
					// continuo a animacao
					startHighlights( $( this ).index() , $obj );
				} else {
					// pauso a animacao
					clearTimeout( $highlightstimeout );
					// troco o icone de pause pelo repeat
					$( $obj+' .index li.pause_repeat' ).removeClass( 'pause' ).addClass( 'repeat' );
				}
			});

			/*
			 * Carrega a biblioteca jQuery UI
			 * Necessaria para a mudanca das cores dos numeros
			 */
			// $.getScript( 'js/jquery.ui.js' , function() {
				
				// Evento hover nos numeros
				$( $obj+' .index li:not(.pause_repeat)' ).hover(
					function() {
						if ( $( this ).hasClass( 'active' ) ) return false;
						$( this ).stop().animate( { backgroundColor : '#ff0000' } , $animationSpeed );
					},
					function() {
						if ( $( this ).hasClass( 'active' ) ) return false;
						$( this ).stop().animate( { backgroundColor : '#770000' } , $animationSpeed );
					}
				);
				// Evento hover botao pause/repeat
				$( $obj+' .index li.pause_repeat' ).hover(
					function() {
						$( this ).stop().animate( { backgroundColor : '#000000' } , $animationSpeed );
					},
					function() {
						$( this ).stop().animate( { backgroundColor : '#555555' } , $animationSpeed );
					}
				);

			//} );

		} // close success
	}); // close $.ajax
}

<!-- script que liga e desliga do grid -->
function toggle_grid()
{
	var grid = document.getElementById('grid');
	if ( grid.style.display == 'block' )
	{
		grid.style.display = 'none';
	}
	else
	{
		grid.style.display = 'block';
	}
}

$(function() {
	$("#tabs").tabs();
});