var werp = {
  items: ["websites", "print", "logo", "paper", "afterall", "contact"],
  carousel_interval: null,
  secondnav_item: null,
  secondnav_heights: {
    websites: 20,
    print: 20,
    logo: 84,
    paper: 20
  },
  
  secondnav: {
    container: {
      content: null,
      position: 0
    },
    scroll: {
      down: true,
      up: false
    },
    height: 0
  },
  
  sidebar: function(){
    var items = werp.items;
    // pop 'contact'
    items.pop();
    // 'afterall' click event is being unbinded after this loop
    $.each(items, function(i, e){
      var item = $("#sidebar ." + e + " a");
      var secondnavitem = $("#"+e);
      // set hover image opacity to 8
      item.css('opacity', 0);
      
      // set hover event to animate it
      item.hover(
        function(){
          if(!item.hasClass('selected')){
            item.animate({'opacity': 1}, {'queue': false, 'duration': 300});
          }
        },
        function(){
          if(!item.hasClass('selected')){
            item.animate({'opacity': 0}, {'queue': false, 'duration': 300});
          }
        }
      );
      
      // toggle showing secondnav
      item.click(function(e){
        // defaults
        var item = $(this);
        e.preventDefault();
        
        // set item as selected
        werp.select_menu_item(item);
        
        // reset scrolling
        werp.secondnav.container.position = 0;
        werp.secondnav.container.content.css('top', 0);
        
        
        // hide all secondnav items
        $.each(werp.items, function(i, e){
          $("#"+e).addClass('not_visible').hide('fast');
        });
        
        // show this secondnav item
        $("#"+item.html()).addClass('visible').slideDown('slow', function(e){
          werp.secondnav_item = item;
          werp.add_secondnav_scrolling();
          $(this).find("a:first").click();
        });
      });
      
      // unbind afterall click
      $("#sidebar .afterall a").unbind('click');
    });
  },
  
  show_contact_box: function(){
    $("#contact_box").hide();
    var a = $("#sidebar .contact a");
    a.css('opacity', 0);
    
    a.hover(
      function(){
        if(!a.hasClass('selected')){
          a.animate({'opacity': 1}, {'queue': false, 'duration': 300});
        }
      },
      function(){
        if(!a.hasClass('selected')){
          a.animate({'opacity': 0}, {'queue': false, 'duration': 300});
        }
      }
    );
    
    
    a.click(function(e){
      var a = $(this);
      e.preventDefault();
      $("#contact_box").slideToggle('medium');
      a.toggleClass('selected');
    });
    
  },
  
  select_menu_item: function (item) {
    var items = werp.items;
    // items.pop();
    $.each(items, function(i, e){
      var menu_item = $("#sidebar ." + e + " a");  
      if(menu_item.attr('href') !== item.attr('href')) {
        menu_item.animate({'opacity': 0}, {'queue': false, 'duration': 300});
        menu_item.removeClass("selected");
      }
    });
    item.addClass("selected");
  },
  
  collapse_nav2: function() {
    $.each(werp.items, function(i, e){
      $("#"+e).hide();
    });
  },
  
  handle_scrolling: function () {
    werp.secondnav.container.content = $("#content #secondnav div.container div.content");
    
    // scroll up
    $("#scrollup").hover(function(){
      // hover over
      werp.scroll_up();
      scrollUpInterval = setInterval("werp.scroll_up();", 250);
    },
    function(){
      // hover out
      clearInterval(scrollUpInterval);
    });
    
    // scroll down
    $("#scrolldown").hover(function(){
      // hover over
      werp.scroll_down();
      scrollDownInterval = setInterval("werp.scroll_down();", 250);
    },
    function(){
      // hover out
      clearInterval(scrollDownInterval);
    });
  },
  
  scroll_down: function () {
    // check if scrolling has to occur
    var content_top_abs = Math.abs(parseInt(werp.secondnav.container.content.css('top').replace("px", ""))); 
    var container_height = werp.secondnav.height;
    
    var container = $("#secondnav .container");
    
    if((content_top_abs) < (container_height-container.height()+40)) {
      // update position
      werp.secondnav.container.position = werp.secondnav.container.position-20;
      // animate
      werp.secondnav.container.content.animate({top: werp.secondnav.container.position}, 250, 'linear');
    }
  },
  
  scroll_up: function () {
    // check if scrolling has to occur
    if(parseInt(werp.secondnav.container.content.css('top').replace("px", "")) < 0) {
      // update position
      werp.secondnav.container.position = werp.secondnav.container.position+20;
      // animate
      werp.secondnav.container.content.animate({top: werp.secondnav.container.position}, 250, 'linear');
    }
  },
  
  add_secondnav_scrolling: function(item) {
    $(window).resize(function(){
      werp.add_secondnav_scrolling();
    });
    var window_height = $(window).height();
    var secondnav_y_offset = $("#secondnav").offset().top;
    // hard-assigned, be careful!
    var secondnav_item_height = werp.secondnav_heights[werp.secondnav_item.html()];
    
    // calculate container height
    var container = $("#secondnav .container");
    var container_height = window_height-secondnav_y_offset-$("#scrollup").height()*2;
    container_height = container_height - 40; // add bottom margin
    container.css('height', container_height);
    
    var secondnav_items_count = $("#" + werp.secondnav_item.html() + " .nav a").size();
    var secondnav_height = secondnav_items_count * secondnav_item_height;
    werp.secondnav.height = secondnav_height;
    if((window_height-secondnav_y_offset) < secondnav_height){
      $("#scrollup, #scrolldown").show('fast');
    } else {
      $("#scrollup, #scrolldown").hide('fast');
    }
  },
  
  show_content: function () {
    var item_anchors = $("#secondnav .nav a");
    
    // =======================================
    // = bind click event to showing content =
    // =======================================
    item_anchors.click(function(e){
      clearInterval(werp.carousel_interval);
      e.preventDefault();
      
      // prepare variables
      var a = $(this);
      var content = a.parent().parent().find(".content");
      var main = $("#main");
      item_anchors.removeClass('selected');
      a.addClass('selected');
      
      // hide content
      main.hide();
      
      // fill content in main.
      main.html(content.html());
      
      // this one is making content visible
      werp.show_and_add_magic_to_content();
    });
  },
  
  show_and_add_magic_to_content: function () {
    // prepare variables
    var main = $("#main");
    var images = main.find(".images img");
    var images_div = main.find(".images");
    var desc = main.find("p");
    var images_container = $('<div class="images_container"></div>');
    var navigation = $('<div class="navigation"><a href="#" class="next"></a><a href="#" class="prev"></a></div>');
    var a = $("#secondnav .nav a.selected");
    
    // prepare images container
    images_div.append(images_container);
    images_container.css('background-image', 'url('+$(images[0]).attr('src')+')');
    
    // prepare navigation
    images_div.after(navigation);
    
    // check for index of this element
    var secondnav_visible_anchors = $("#secondnav .nav a:visible");
    var secondnav_index = secondnav_visible_anchors.index($("#secondnav .nav a.selected"));
    var secondnav_count = secondnav_visible_anchors.length;
    var nav_a_next = navigation.find('a.next');
    var nav_a_prev = navigation.find('a.prev');
    if(secondnav_index === 0) {
      // hide previous button
      nav_a_prev.css('visibility', 'hidden');
    } else if ((secondnav_index+1) == secondnav_count) {
      // hide next button
      nav_a_next.css('visibility', 'hidden');
    }
    
    // bind click to navigational arrows
    nav_a_next.click(function(e){
      e.preventDefault();
      $("#secondnav .nav a:visible:eq("+(secondnav_index+1)+")").click();
    });
    
    nav_a_prev.click(function(e){
      e.preventDefault();
      $("#secondnav .nav a:visible:eq("+(secondnav_index-1)+")").click();
    });
    
    // handle images
    images.hide();
    
    // add per-image navigation, if needed
    if(images.length > 1) {
      // prepare variables
      var pi_nav = $('<div class="per_image"></div>');
      $.each(images, function(n,i){
        var a = $('<a href="'+$(i).attr('src')+'"></a>');
        pi_nav.append(a);
        if(n === 0){
          a.addClass('selected');
        }
        
        // bind click event
        a.click(function(e){
          e.preventDefault();
          $(".per_image a").removeClass('selected');
          a.addClass('selected');
          images_container.css('background-image', 'url('+a.attr('href')+')');
          clearInterval(werp.carousel_interval);
        });
      });
      var anchors = $(".per_image a");
      werp.carousel_interval = setInterval("werp.show_next_main_image();", 3000);
      
      // insert into DOM.
      navigation.after(pi_nav);
    }
    
    main.fadeIn('slow');
  },
  
  show_next_main_image: function () {
    // prepare variables
    var div = $(".per_image");
    var anchors = div.find("a");
    var selected_index = anchors.index(div.find("a.selected"));
    var anchors_count = anchors.length;
    var images_container = $('.images_container');
    
    
    if(selected_index+1 == anchors_count) {
      selected_index = -1;
    }
    
    // show next!
    a = div.find("a:eq("+(selected_index+1)+")");
    
    $(".per_image a").removeClass('selected');
    a.addClass('selected');
    images_container.css('background-image', 'url('+a.attr('href')+')');
    
    // $("#secondnav .nav a:visible:eq("+(secondnav_index-1)+")").click();;
    
  },
  
  add_logos_background: function () {
    $("#logo .nav a").each(function(){
      $(this).css('background-image', 'url(images/logos/' + $(this).attr('rel') + ')');
    });
  },
  
  
  init: function () {
    // werp.secondnav_item = $("#sidebar .websites a");
    werp.sidebar();
    // werp.add_secondnav_scrolling();
    werp.add_logos_background();
    werp.handle_scrolling();
    werp.show_contact_box();
    werp.show_content();
    // $("#sidebar .websites a").css('opacity', 1).click();
    // $(".nav a:first").click();
    // werp.select_menu_item($("#sidebar .websites a"));
    
  }
  
};

$(document).ready(function(){
  werp.init();
  // werp.collapse_nav2();
  // ===============
  // = menu hovers =
  // ===============
  
  // ===============
  // = contact box =
  // ===============
});