$(document).ready(function(){
  
  /*
  
  Variável que controla o thumbnail em destaque no ciclo automático (ou manual, caso o user interaja com o rato sobre os thumbnails) (não mexer).
  
  */
  
  var control=0;
  
  /*
   
	****************Ver a aplicação desta função no próximo bloco*************
	
	Função que controla o que é feito na transição de manchetes durante o ciclo automático
	Neste caso adiciona e remove classes aos thumbnails laterais, classes que dão o efeito de highlight
	ao thumbnail correspondente ao que estiver a surgir na imagem principal
  */
  
  function onBefore(){
    switch(control){
      case 0:
		$('#headline0').addClass('headlinesideHighlight');
		$('#headline1').removeClass('headlinesideHighlight');
		$('#headline2').removeClass('headlinesideHighlight');
		$('#headline3').removeClass('headlinesideHighlight');
        control=1;
        break;
      case 1:
		$('#headline0').removeClass('headlinesideHighlight');
		$('#headline1').addClass('headlinesideHighlight');
		$('#headline2').removeClass('headlinesideHighlight');
        $('#headline3').removeClass('headlinesideHighlight');
		control=2;
        break;
      case 2:
		$('#headline0').removeClass('headlinesideHighlight');
		$('#headline1').removeClass('headlinesideHighlight');
		$('#headline2').addClass('headlinesideHighlight');
		$('#headline3').removeClass('headlinesideHighlight');
        control=3;
        break;
	  case 3:
		$('#headline0').removeClass('headlinesideHighlight');
		$('#headline1').removeClass('headlinesideHighlight');
		$('#headline2').removeClass('headlinesideHighlight');
		$('#headline3').addClass('headlinesideHighlight');
        control=0;
        break;
      default:
        control=0;
		break;
    }
  }
  
  //1. Setup dos efeitos e Timings desejados na galeria
  /*
    fx:     'scrollDown', -> Tipo de transição desejado -> valores possíveis:
    timeout: 7000, -> Tempo de transição entre manchetes quando está no ciclo automático
    speed:  500, -> Velocidade da transição
    before:  onBefore, -> função a atribuir antes de uma transição (ver a função em detalhe no bloco anterior)
    pause:  1, -> Permite ou não pausar o ciclo automático (aconselho a não mexer)
    pager:  '#nav'  -> Indica o id da div que contém os thumbnails laterais (aconselho VIVAMENTE a não mexer)
  */
  
  $('#mainImage').after('<div id="nav" class="nav">').cycle({ 
    //fx:     'scrollDown',
    timeout: 7000,
    speed:  500,
    before:  onBefore,
    pause:  1,
    pager:  '#nav'
  });
  
  /*2. Parte do código em que não convém mexer. Copia o conteúdo dos thumbnails originais, ou seja, os criados por nós para a div #nav, a criada pelo plugin. Não convém mesmo nada mexer, porque sem isto, não funciona*/
  
  var pagers=new Array;
  var oldpagers=new Array;
  var mynav=$('#nav');
  
  $("#nav a").each(function () {
    pagers.push($(this));
  });
  
  $("#sideheadlines div").each(function (){
    oldpagers.push($(this));
  });
  
  for(var i in oldpagers){
	pagers[i].html(oldpagers[i].html());
	pagers[i].attr('class',oldpagers[i].attr('class'));
	pagers[i].attr('id','headline'+i);
  }
  
  var count=0;
  $("#nav a").each(function () {
    $(this).id='headline'+count;
	count++;
  });
  
  $("#sideheadlines").html('');
  $("#sideheadlines").append(mynav);
  $('#headline0').addClass('headlinesideHighlight');
  
  // 3. Eventos a atribuir a cada thumbnail
  
  
  // Atribuir eventos de click aos thumbnails
  
  /*
	Exemplo de atribuição individual (cada thumbnail, segundo o seu ID healine0, headline1 e headline 2 têm funções diferentes para o evento click)
   
	$('#headline0').click(function(){
	  //Evento desejado
	});
  */
  
  /*Atribuição geral -> todos os links da div com o id "nav", ou seja, todos os thumbnails
  
  Atribuir o link do artigo a todos os thumbnails dos artigos
  
  Para isto é necessário incluir em todas as divs de thumbnails um link com a classe "seemore" e com o href preenchido com o link do artigo*/
  
  
  /* Eventos mouseHover, neste caso, acrescente a class headlinesideHighlight que dá o efeito de destaque a cada thumbnail ao thumbnail que tiver o cursor sobre si e retira aos outros 2*/
  var realClick=true;
  
  $('#headline0').click(function(){
	if(realClick==true){
	  $('#mainImage').cycle('pause');
	  document.location.href=$('#'+$(this).attr('id')+' a.seemore').attr('href');
	  realClick=false;  
	}else{
	  $('#headline0').addClass('headlinesideHighlight');
	  $('#headline1').removeClass('headlinesideHighlight');
	  $('#headline2').removeClass('headlinesideHighlight');
	  $('#headline3').removeClass('headlinesideHighlight');
	  control=1;
	  realClick=true;
	}
  });
  
  $('#headline1').click(function(){
	if(realClick==true){
	  $('#mainImage').cycle('pause');
	  document.location.href=$('#'+$(this).attr('id')+' a.seemore').attr('href');
	  realClick=false;  
	}else{
	  $('#headline0').removeClass('headlinesideHighlight');
	  $('#headline1').addClass('headlinesideHighlight');
	  $('#headline2').removeClass('headlinesideHighlight');
	  $('#headline3').removeClass('headlinesideHighlight');
	  control=2;
	  realClick=true;
	}
  });
  
  $('#headline2').click(function(){
    if(realClick==true){
	  $('#mainImage').cycle('pause');
	  document.location.href=$('#'+$(this).attr('id')+' a.seemore').attr('href');
	  realClick=false;  
	}else{
	  $('#headline0').removeClass('headlinesideHighlight');
	  $('#headline1').removeClass('headlinesideHighlight');
	  $('#headline2').addClass('headlinesideHighlight');
	  $('#headline3').removeClass('headlinesideHighlight');
	  control=3;
	  realClick=true;
	}
  });
  
  $('#headline3').click(function(){
    if(realClick==true){
	  $('#mainImage').cycle('pause');
	  document.location.href=$('#'+$(this).attr('id')+' a.seemore').attr('href');
	  realClick=false;  
	}else{
	  $('#headline0').removeClass('headlinesideHighlight');
	  $('#headline1').removeClass('headlinesideHighlight');
	  $('#headline2').removeClass('headlinesideHighlight');
	  $('#headline3').addClass('headlinesideHighlight');
	  control=0;
	  realClick=true;
	}
  });
  
$('#headline0, #headline1, #headline2, #headline3').hover(function(e){$('#mainImage').cycle('pause');realClick=false;$(this).trigger('click');},function(e){$('#mainImage').cycle('resume');});
  
});