var projects = [
  {'middle': '', 'right':'M +41 79 950 81 86', 'tooltip': false, 'top': 0},
  {'middle': '<span class="underline">Blue notes in major scale</span><br />Selektiver Projektwettbewerb<br /> Stadt St.Gallen, 2012<br />1. Preis', 'right':'', 'tooltip': 'Quelle: Lein, Flachs (linum usitatissimum), Stich um 1790, anonym', 'top': 0},
  {'middle': '<span class="underline">Jardim da Misericordia</span><br />Estátua a S. Nuno de Santa Maria<br />Barcelos, 2011', 'right':'', 'tooltip': '„Hortus conclusus“, das Janusgesicht des Gartens, von C.S., aus der Ringvorlesung der Universität Salzburg 2001/2002', 'top': 0},
  {'middle': '<span class="underline">Haus Huber</span><br />Buchs, 2011', 'right':'', 'tooltip': 'Materialfotografie Basaltstein<br />Barão-Hutter.Atelier', 'top': 0},
  {'middle': '<span class="underline">Quartier am Zürichsee</span><br />Wollishofen, 2010<br />sia Award', 'right':'', 'tooltip': 'Le Bistro or The Wine Shop ", E. Hopper, 1909, Öl auf Leinwand, 59.4 x 72.4, New York, Collection of Whitney Museum of American Art, Josephine N. Hopper Bequest 70.1187', 'top': 0},
  {'middle': '<span class="underline">Arkadia Südmodul</span><br />Kanton St.Gallen 2010 - 2012,<br /> 1. Preis', 'right':'', 'tooltip': 'Modellfotografie Barão-Hutter.Atelier', 'top': 0},
  {'middle': '<span class="underline">Strandbad Mythenquai</span><br />Zürich, 2010<br />1. Preis, 2. Rang', 'right':'Spettacolo d‘Ottavia', 'tooltip': '"Sine Pondere Podus". Flaschenzug mit drei Rollen und einem Gewicht zum Anheben eines schweren Deckels, in barocker Umrahmung. Aus Picinello, Mundus Symbolicus. Auf der ganzen Buchseite.', 'top': 0},
  {'middle': '<span class="underline">Haus am Kolinplatz</span><br />Zug, 2011<br />Ankauf', 'right':'Pavone di Despina', 'tooltip': '"Giovanni Arnolfini und seine Frau Giovanna Cenami", Jan van Eyck, 1434, Öl auf Holz, 81.8 x 59.7, London, National Gallery', 'top': 0},
  {'middle': '<span class="underline">Haus Halten</span><br />Grub AR, 2011', 'right':'', 'tooltip': 'Handweber im Webkeller, Kantonsbibliothek Appenzell Ausserrhoden', 'top': 0},
  {'middle': '<span class="underline">TAU, Marinha Grande</span><br />2011', 'right':'', 'tooltip': false, 'top': 0},
  {'middle': '<span class="underline">Printed Matter</span><br />Studio Bänziger Hug', 'right':'', 'tooltip': false, 'top': 0},
];

var ref = [
  {project: '1', 'left': '15%', 'top': '40%'},
  {project: '2', 'left': '30%', 'top': '13%'},
  {project: '3', 'left': '55%', 'top': '52%'},
  {project: '4', 'left': '25%', 'top': '70%'},
  {project: '5', 'left': '52%', 'top': '5%'},
  {project: '6', 'left': '69%', 'top': '74%'},
  {project: '7', 'left': '30%', 'top': '45%'},
  {project: '8', 'left': '85%', 'top': '40%'},
  {project: '9', 'left': '75%', 'top': '12%'},
  {project: '10', 'left': '52%', 'top': '76%'},
];         
              

$(function() {
  $('#home').click(function() {
    $.scrollTo(0, 500);
  });
    
  // place full screen divs
  var winHeight = ($(window).height() > 650) ? $(window).height() : 650;
  var winWidth = ($(window).width() > 4200) ? $(window).width() : 4200;
  $('.panel').each(function(index) {
    var top = winHeight * index;    
    $(this).css('top', top+'px');
    projects[index].top = top;
    $(this).css('height', winHeight); 
    if(index != 0) $(this).css('width', winWidth);
  });
  
  // middle and right desc
  $('#desc-right').html(projects[0].right);
  $('#desc-middle').html(projects[0].middle);
  
  $(window).scroll(function(){
    var windowY = $(window).scrollTop();
    
    for(i=0; i < projects.length-1; i++) {
      if(projects[i].top <= (windowY + 20) && windowY < projects[i+1].top) break;
    }
    $('#desc-right').html(projects[i].right);
    $('#desc-middle').html(projects[i].middle);
    if(projects[i].tooltip) {
      $('#tooltip-overlay').removeClass('hide');
      $('#tooltip-overlay').html('<p><strong>Q</strong><span class="indent"><i>'+projects[i].tooltip+'</i></span></p>');
    } else {
      $('#tooltip-overlay').html('');
    }
  });
  
  // listen to window resizes
  $(window).resize(function() {
    $('.panel').each(function(index) {
      var winHeight = ($(window).height() > 650) ? $(window).height() : 650;
      var winWidth = ($(window).width() > 4200) ? $(window).width() : 4200;
      var top = winHeight * index;    
      $(this).css('top', top+'px');
      projects[index].top = top;
      $(this).css('height', winHeight);
      if(index != 0) $(this).css('width', winWidth);
    });
  });
  
  // bottom bar navigation
  $('#open-bottombar').click(function() {
    $('#bottombar').addClass('bg');
    $('#bottombar').animate({height: '400px'}, 1000);

    $(this).hide();
    $('#close-bottombar').show();
    $('#teaser > p').html('claudere');
    
    return false;
  });
  
  $('#close-bottombar').click(function() {
    $('#bottombar').animate({height: '40px'}, 1000, function() {
      $('#bottombar').removeClass('bg');
    });
    
    $(this).hide();
    $('#open-bottombar').show();
    $('#teaser > p').html('patefacere');
    
    return false;
  });
  
  
  // tooltip on mouseover
  $('.project').mouseover(function() {
    if(!$(this).hasClass('moved')) {
      var id = $(this).attr('id');
      $('#'+id+'-desc').removeClass('hide');
    }
  });
  
  $('.project').mouseout(function() {
    $('#tooltip > div').each(function() {
      if($(this).attr('id') != 'tooltip-overlay') $(this).addClass('hide');
    });
  });
  
  
  // project reference click
  $('.project').click(function() {
    
    // hide all tooltips
    $('#tooltip > div').each(function() {
      $(this).addClass('hide');
    });
    
    if($(this).hasClass('moved')) {
      $.scrollTo(0, 500);
    } else {
      var id = $(this).attr('id');

      $('.project').each(function() {
        $(this).removeClass('fixed');
      });

      $(this).addClass('fixed');
      $.scrollTo('#'+id+'-panel', 800, $.proxy(function() {
        var pos = $(this).position();
        $(this).css('top', pos.top);
        $(this).css('left', pos.left);
        $(this).removeClass('fixed');
        $(this).addClass('moved');
        }, this
      ));
    }
  });
  
  // animate project ref to initial position
  $('#logo').click(function() {
    $('.project').each(function() {
      var id = $(this).attr('id').substr(8);
      $(this).removeClass('moved');
      $(this).animate({top: ref[id-1].top, left: ref[id-1].left});
    });
  });
});