jQuery(document).ready(function($){
  
  
  var ua = navigator.userAgent,
      event = (ua.match(/iPad/i)) ? "touchstart" : "click";
  var autoslider;
  var History = window.History;
  if ( !History.enabled ) {
      return false;
  }
  
  
  // Bind to StateChange Event
  History.Adapter.bind( window, 'statechange', function() {
    var State = History.getState();
    //History.log(State.data, State.title, State.url);
    var dir = State.data['dir'];
    if (dir == "")
      var dir = "left";
    loadNewContent( State.url, dir );
  });
  
  
  // Fullscreen-Images
  aspectRatio = 2048/1152;
  function resizeBg() {
      var w = $('#main').width()-40;
      var h = $('#main').height()-60;
      if ( ( w / h ) < aspectRatio ) {
          $(".itembox .bg").removeClass('bgwidth').addClass('bgheight');
          if (ua.match(/Opera/i)) // Opera fails to position elements with CSS. Sucker!
            $(".itembox .bg").css({'height':h, 'width':(h*aspectRatio)});
     } else {
          $(".itembox .bg").removeClass('bgheight').addClass('bgwidth');
          if (ua.match(/Opera/i)) // Opera fails to position elements with CSS. Sucker!
            $(".itembox .bg").css({'height':(w/aspectRatio), 'width':w});
     }
  }
  
  
  // Position elements
  function resizeWindow() {
    var viewportH = $( window ).height();
    var viewportW = $( window ).width();
    $( '#main' ).css( { 'width' : viewportW, 'height' : viewportH } );
    $( 'aside' ).css( { 'width' : viewportW-40, 'top' : viewportH-30 } );
    $( '.boxwrapper' ).css( { 'width' : viewportW-40, 'height' : viewportH-60 } );
  };
  
  
  // Resize-Handler
  $( window ).resize(function() {
    resizeWindow();
    resizeBg();
  }).trigger("resize");
  
  
  // Click-Action for main navigation
   $(document).delegate("nav a", event, function(){
    if ( $('.boxwrapper.active').is(':animated') ) {
      return false;
    };
    var navitem = $(this).parent();
    var index = $('nav li').index( navitem );
    var indexactiveitem = $('nav li').index( $('nav li.active') );
    
    if ( $(this).parent().hasClass('active') ) {
      if ( $( '.project-link' ).length )
        return false;
      var direction = "top";
    } else {
      var direction = "right";
      if ( index < indexactiveitem )
         var direction = "left";
    }
    
    $('#disclaimer-link').removeClass();
    $('header li').removeClass();
    $('#v2a-net a').removeClass();
    $(this).parent().addClass('active');
    var page = $( this ).attr('href');
    var pagetitle = $( this ).attr('data-url');
    History.pushState({dir:direction}, pagetitle, page);
    //loadNewContent( page, direction );
    return false;
  });
  
  // Click-Action for logo-h1-link
  $(document).delegate("#v2a-net a", event, function(){
    if ( $('.boxwrapper.active').is(':animated') || $(this).hasClass('active') ) {
      return false;
    };
    $('#disclaimer-link').removeClass();
    $('header a').removeClass();
    $('#v2a-net a').removeClass();
    $(this).addClass('active');
    $('nav li').removeClass('active');
    var page = $( this ).attr('href');
    var direction = "left";
    var pagetitle = $( this ).attr('data-url');
    History.pushState({dir:direction}, pagetitle, page);
    //loadNewContent( page, direction );
    return false;
  });
  
  
  // Click-Action for disclaimer-link
  $(document).delegate("#disclaimer-link", "click", function(){
    if ( $('.boxwrapper.active').is(':animated') || $(this).hasClass('active') ) {
      return false;
    };
    $('header a').removeClass();
    $('#v2a-net a').removeClass();
    $(this).addClass('active');
    $('nav li').removeClass('active');
    var page = $( this ).attr('href');
    var direction = "bottom";
    var pagetitle = $( this ).attr('data-url');
    History.pushState({dir:direction}, pagetitle, page);
    //loadNewContent( page, direction );
    return false;
  });
  
  
  // click-action for links to projects
  $(document).delegate(".box a:not(.tour, .breadcrumb a, .filterbox a, .button, .slideshow a, .front_slideshow_image a, .project )", "click", function(){ // für verschiedene Links noch eigene Events vorsehen. Systematik JQ-Selektoren... To-Do
    
    if ( $('.boxwrapper.active').is(':animated') ) {
      return false;
    };
    var page = $( this ).attr('href');
    //window.location.hash = page;
    var direction = "bottom";
    // if (Modernizr.csstransforms3d)
    //   var direction = "3d-flip";
    var pagetitle = $( this ).attr('data-url');
    History.pushState({dir:direction}, pagetitle, page);
    //loadNewContent( page, direction );
    return false;
  });
  
  
  // click-action for links to next or prev project
  $(document).delegate(".box.slideshow a.project", event, function(){ // für verschiedene Links noch eigene Events vorsehen. Systematik JQ-Selektoren... To-Do
    
    var page = $( this ).prop('href');
    var direction = "right";
    if ( $(this).hasClass('prev'))
      var direction = "left";
    // if (Modernizr.csstransforms3d)
    //   var direction = "3d-flip";
    var pagetitle = $( this ).attr('data-url');
    History.pushState({dir:direction}, pagetitle, page);
    //loadNewContent( page, direction );
    return false;
  });
  
  
  // Content loading-function
  // page: URL
  // dir: direction from where new content slides in. Possible values "top", "right", "bottom", "left", "xfade" (crossfading)
  function loadNewContent( page, dir ) {
    clearInterval( autoslider );
    $( '.slidernav' ).addClass( 'ui-state-inactive' );
    showLoader();
    $('#main').prepend('<div class="boxwrapper inactive"></div>');
    var $newbox = $('.boxwrapper.inactive');
    var $oldbox = $('.boxwrapper.active');
    var h = $( window ).height();
    var w = $( window ).width();
    switch (dir) {
      case "left":
        var cssOptions = { left: - w, 'width': w , 'height': h };
        var animateOptions = { left: 20};
        var animateOutOptions = { left: w };
        break;
      case "right":
        var cssOptions = { left: w, 'width': w, 'height': h }
        var animateOptions = { left: 20};
        var animateOutOptions = { left: -w };
        break;
      case "top":
        var cssOptions = { top: - h, 'width': w, 'height': h }
        var animateOptions = { top: 20};
        var animateOutOptions = { top: h };
        break;
      case "bottom" :
        var cssOptions = { top: h, 'width': w, 'height': h }
        var animateOptions = { top: 20};
        var animateOutOptions = { top: -h };
        break;
      case "xfade" :
        var cssOptions = { opacity: 0, 'width': w, 'height': h }
        var animateOptions = { opacity: 1};
        var animateOutOptions = { opacity: 0 };
        break;
      case "3d-flip" :
        //$('#main').css({})
        var cssOptions1 = {'z-index': 88 ,'-webkit-transform': 'rotate3d(0,1,0,0deg)', '-moz-transform': 'rotateY(0deg)', '-webkit-transform-style': 'preserve-3d', '-moz-transform-style': 'preserve-3d','-webkit-backface-visibility': 'hidden', '-moz-backface-visibility': 'hidden'  };
        var cssOptions2 = {'z-index': 87 ,'-webkit-transform': 'rotate3d(0,1,0,180deg)', '-moz-transform': 'rotateY(180deg)','-webkit-transform-style': 'preserve-3d','-moz-transform-style': 'preserve-3d','-webkit-backface-visibility': 'hidden', '-moz-backface-visibility': 'hidden'  };
        //var cssOptions3 = {'-webkit-transform': 'translateZ(0px)','-webkit-transition': '-webkit-transform 1s'  };
        
        $oldbox.css( cssOptions1 );
        $newbox.css( cssOptions2 );
        //$('#main').css( cssOptions3 );
        //return false;
        
        $newbox.load( page + ' .box ', function( response, status, xhr, page ) {
          if ( status ) {
            setOverflow();
            $('aside').load( page + ' aside ', function( response, status, xhr ) {
            });
            $newbox.imagesLoaded(function( $images ){
              //alert($images.length + ' Bilder geladen.')
              $( window ).trigger( 'resize' );
              //triggerSpecialContent();
              setTimeout(function() {
                hideLoader();
                //return false;
                $oldbox.css({'-webkit-transform': 'rotate3d(0,1,0,-180deg)', '-moz-transform': 'rotateY(-180deg)', '-webkit-transition': '-webkit-transform 2s', '-moz-transition': '-moz-transform 2s'});
                $newbox.css({'z-index': 1, '-webkit-transform': 'rotate3d(0,1,0,0deg)', '-moz-transform': 'rotateY(0deg)','-webkit-transition': '-webkit-transform 2s','-moz-transition': '-moz-transform 2s'});
                
                setTimeout(function() {
                  
                  $oldbox.remove();
                  $newbox.removeClass( 'inactive' ).addClass( 'active' );
                  triggerSpecialContent();
                  addNavV2ASlider();
                  $( 'aside' ).removeClass( 'ui-state-inactive' );
                  $( '.slidernav' ).removeClass( 'ui-state-inactive' );
                  },2100);
              }, 1000);
            });
          };
        });
        return false;
        break;
    };
    $newbox.css( cssOptions );
    loadURL( page, function() {
      setOverflow();
      $newbox.imagesLoaded(function( $images ){
        triggerSpecialContent();
        $( window ).trigger( 'resize' );
        setTimeout(function() {
          hideLoader();
          //$('.slidernav').html('');
          $oldbox.animate( animateOutOptions, 1200, 'easeOutCubic' );
          $newbox.animate( animateOptions, 1200, 'easeOutCubic', function(){
            $oldbox.remove();
            $( this ).removeClass( 'inactive' ).addClass( 'active' );
            
            addNavV2ASlider();
            addDummyThumbs();
            $( 'aside' ).removeClass( 'ui-state-inactive' );
            if ( $('.boxwrapper .one-by-one').children().length > 1 ) {
              $('.box.slideshow').addClass('slider').append('<a class="button prev" title="left"></a><a class="button next" title="right"></a>');
              $('.box.featureslider').addClass('slider').append('<a class="button prev" title="left"></a><a class="button next" title="right"></a>');
              $('.box.grid').append('<a class="button prev" title="left"></a><a class="button next" title="right"></a>');
              
              
            }
            if ( $newbox.find( 'slideshow' )  ) {
              $( 'aside' ).addClass( 'active' );
            }
            
            if ( $( '.boxwrapper.active .featureslider') )
              startAutoFeaureSlider();
            if (Modernizr.touch)
              initWipe();
            if ( $( '.boxwrapper.active .slideshow' ).length ) {
              $( 'aside' ).addClass( 'active' );
            } else {
              $( 'aside' ).removeClass( 'active' );
            }
            
            if ( $( 'nav ul li.active' ).length ) {
              $( '#v2a-net a' ).removeClass( 'active' );
            }
            
          });
          
        }, 500);
      });
    });
  };
  
  
  //Action Footer
  if (Modernizr.touch) {
    //click-action Footer for touch-devices
    $(document).delegate("aside.active", event, function(){
      clearInterval( autoslider );
      var asideheight = $('aside').outerHeight();
      if ( $( this ).hasClass( 'touchactive' ) ) {
        $(this).css( { 'top' : $( window ).height() - 30 }).removeClass( 'touchactive' );
        return false;
        };
      $( this ).addClass( 'touchactive' ).css( { 'top' : $( window ).height() - asideheight });
      //$(this).css( { 'top' : $( window ).height() - asideheight });
      return false;
      
    });
    // $(document).delegate("aside.active", event, function(){
    //   clearInterval( autoslider );
    //   var asideheight = $('aside').outerHeight();
    //   if ( $( this ).hasClass( 'touchactive' ) ) {
    //     $(this).css( { 'top' : $( window ).height() - 30 }).removeClass( 'touchactive' );
    //     return false;
    //     };
    //   $( this ).addClass( 'touchactive' ).css( { 'top' : $( window ).height() - asideheight });
    //   //$(this).css( { 'top' : $( window ).height() - asideheight });
    //   return false;
    // });
  } else {
    //Hover-Action Footer
    $(document).delegate("aside.active", "mouseover", function(){
      var asideheight = $('aside').outerHeight();
      $(this).css( { 'top' : $( window ).height() - asideheight });
      return false;
    });

    // Hover-Action Footer
    $(document).delegate("aside.active", "mouseout", function(){
      $(this).css( { 'top' : $( window ).height() - 30 });
      return false;
    });
    
  };
  
  
  // Click-Action Slider-Buttons
  $(document).delegate(".button", event, function(){
    clearInterval( autoslider );
    if ( $( this ).hasClass('inactive') || $('.itembox.active').is(':animated') || $('.itembox.inactive').is(':animated') )
      return false;
    $( this ).addClass('inactive')
    V2ASlider($(this).attr('title'), null);
    return false;
  });


  // Slider-Navigation with left/right arrow keys
  $(document.documentElement).keyup(function (event) {
    if (autoslider)
      clearInterval( autoslider );
    if (event.keyCode == 37) {
        $(".button.prev").trigger('click');
      } else if (event.keyCode == 39) {
        $(".button.next").trigger('click');
    }
  });


  // Hover-Action Slider-Buttons
  $(document).delegate(".button", "mouseover", function(){
    clearInterval( autoslider );
  });
  
  
  // Click-Action Slider-Nav-Buttons
  $(document).delegate(".slidernav a", event, function(){
    clearInterval( autoslider );
    var item = $( this ).attr('data-url');
    if ( $( this ).parent().hasClass('active') || $('.itembox.active').is(':animated') )
      return false;
    $( this ).parent().siblings().removeClass('active');
    $( this ).parent().addClass('active')
    
    V2ASlider('left', item);
    return false;
  });
  
  
  //Hover-Action vlight-link
  $(document).delegate("#vlight", "mouseover", function(){
    $(this).find('span').removeClass('ui-state-inactive').addClass('ui-state-active');
    return false;
  });

  // Hover-Action Footer vlight-link
  $(document).delegate("#vlight", "mouseout", function(){
    $(this).find('span').removeClass('ui-state-active').addClass('ui-state-inactive');
    return false;
  });
  
  // todo more perfomance on chrome
  function V2ASlider(direction, item) {
    $('aside .right h2').addClass( 'ui-state-inactive' );
    $('.itemcaption').remove();
    var $active = $('.itembox.active');
    if ( item == null ) {
    if (direction == "right"){
      var $next = $active.next().length ? $active.next() : $('.one-by-one > div.itembox:first-child');      
    } else {
      var $next = $active.prev().length ? $active.prev() : $('.one-by-one > div.itembox:last-child');
    }
    } else {
      var $next = $('.one-by-one .' + item );
      var index = $('.one-by-one div').index( $('.one-by-one .' + item ) );
      var indexactiveitem = $('.one-by-one div').index( $('.one-by-one div.itembox.active') );
      var direction = "right";
      if ( index < indexactiveitem )
         var direction = "left";
    }
    var $caption = $next.find('span');
    var $pos = (direction == "right") ? $('.boxwrapper').outerWidth() : $('.boxwrapper').outerWidth()*(-1);
    
    $active.addClass('last-active');
    // $caption.css({'opacity': 0, 'bottom': 30 });
    $active.animate({'left':-$pos}, 600);
    $next.css({'left': $pos}).addClass('active').animate({'left':0}, 600, function(){
          $('.boxwrapper.active .button').removeClass('inactive');
          // $caption.animate({'opacity':1,'bottom': 100}, 300, function(){
          //   $('.boxwrapper.active .button').removeClass('inactive');
          //   
          // });
          $active.removeClass('active last-active');
          var itemdescription = $('.boxwrapper .one-by-one .itembox.active span.title').html();
          if ( itemdescription == null )
            itemdescription = "&nbsp;";
          $('aside .right h2').html('').append( itemdescription )
          var itemcaption = $('.boxwrapper .one-by-one .itembox.active span.caption').html();
          if ( itemcaption )
            $('.box.slideshow').append('<span class="itemcaption">' + itemcaption + '</span>');
          $( '.slidernav ' ).children().removeClass('active');
          var activeitem = $next.attr('data-url');
          $( '.slidernav li a[data-url="' + activeitem + '"]' ).parent().addClass( 'active');
          $('aside .right h2').removeClass( 'ui-state-inactive' );
          $('.project.next').css({'display':'none'})
          if ( $('.itembox.active').next().length == 0 )
            $('.project.next').css({'display':'block'})
          
    });
  }
  
  
  function triggerSpecialContent( box ) {
    prepareV2ASlider();
    var itemcaption = $('.boxwrapper .one-by-one .itembox.active span.caption').html();
    if ( itemcaption )
      $('.box.slideshow').append('<span class="itemcaption">' + itemcaption + '</span>');
    
    if ( $( '.box.slideshow' ).length )
      $( '.box.slideshow .one-by-one .itembox img' ).addClass( 'bg' );
    if ( !$( '.kunden .textwrapper' ).length )
      $('.textwrapper').jScrollPane();
    
  };
  
  
  function prepareV2ASlider() {
    $('.box .itembox').css({'left': $(this).outerWidth()+1000});
    $('.box .itembox.active').css({'left': 0});
    var itemdescription = $('.boxwrapper .one-by-one .itembox.active span.title').html();
    if ( itemdescription == null )
      itemdescription = "&nbsp;";
    $('aside .right').html('').append('<h2>' + itemdescription + '</h2><ul class="slidernav"></ul>')
    $('.box.grid').append('<ul class="slidernav"></ul>');
    $('.box.slideshow').append('<ul class="slidernav"></ul>');
  };
  
  
  function addDummyThumbs() {
    var $lastgroupwrapper = $('.boxwrapper.active .one-by-one .group:last .groupwrapper' );
    var thumbspergroup = 12;
    for ( (thumbs = $('.boxwrapper.active .one-by-one .group:last .groupwrapper div' ).length); thumbs <  thumbspergroup ; thumbs++ ) {
       $lastgroupwrapper.append('<div class="project-link dummy"></div>');
    }
    $('.boxwrapper.active .one-by-one .group .project-link:nth-child(4n+1)' ).addClass( 'fifth-item' );
    $('.boxwrapper.active .one-by-one .group .project-link:nth-child(4n)' ).addClass( 'fourth-item' );
  };
  
  
  function addNavV2ASlider() {
    $('.slidernav').html('');//.append('<ul class="slidernav"></ul>');
    $('.boxwrapper.active .itembox').each(function(i,e){
      var elemcontent = $(this).find('img').attr('src');
      $('.slidernav').append('<li><a href="#item-'+(i+1)+'" data-url="item-'+(i+1)+'"><span class="visuallyhidden">#item-'+(i+1)+'</span><img src="' + elemcontent + '"/></span></a></li>');
      $(this).attr('data-url', 'item-'+ (i+1) );
      $(this).addClass('item-'+ (i+1) );
      });
    $('.slidernav li:first').addClass('active');
    $('aside .slidernav li:first').addClass('active');
  };
  
  
  function showLoader() {
    $('#loaderwrapper').show();
    // for more performance
    //$('#loaderwrapper').css( {opacity: 0.7 } ).show();
    $('#v2a-net .progress').show();
    $( 'aside' ).addClass( 'ui-state-inactive' );
  };
  
  
  function hideLoader() {
    $('#loaderwrapper').hide();
    // for more performance
    // $('#loaderwrapper').animate( { opacity: 0 }, 500, 'easeInCubic', function() {
    //   $( this ).hide();
    // });
    $('#v2a-net .progress').hide();
  };
  
  
  function setOverflow() {
    $('#main').css({'overflow':'hidden'});
    $('.boxwrapper').css({'overflow':'hidden'});
    $('.box').css({'overflow':'hidden'});
    $('.itembox').css({'position':'absolute'});
    makeFeatureRandom();
    $('.one-by-one div:first').addClass( 'active' );
    if ( $( '.boxwrapper.active .slideshow .itembox' ).length < 1 )
      $('.project.next').css({'display':'block'})
  };
  
  
  function startAutoFeaureSlider() {
    //triggerFeatureTooltip();
    if ( $( '.box.featureslider' ).length)
      autoslider = setInterval( function() {
        V2ASlider('right');
      }, 3900 );
  }
  
  
  function makeFeatureRandom() {
    var $box = $( '.box.featureslider .one-by-one' );
    var $itemArr = $box.children( 'div' );
    // sort randomly
    $itemArr.sort(function(a,b){
    // Get a random number between 0 and 10
    var temp = parseInt( Math.random()*10 );
    // Get 1 or 0, whether temp is odd or even
    var isOddOrEven = temp%2;
    // Get +1 or -1, whether temp greater or smaller than 5
    var isPosOrNeg = temp>5 ? 1 : -1;
    // Return -1, 0, or +1
    return( isOddOrEven*isPosOrNeg );
    });
    $box.children( 'div' ).remove();
    $box.prepend($itemArr);
  }
  
  
  function triggerFeatureTooltip() {
    $('body').append('<span id="tooltip"></span>');
    $(".box.featureslider").mousemove(function(e){
        $("#tooltip").show();
        var txt = $( '.featureslider .itembox.active .front_slideshow_image' ).attr( 'alt' );
        $("#tooltip").css({
            top: (e.pageY + 30) + "px",
            left: (e.pageX + 15) + "px"
        }).text('Schaue dir ' + txt + ' an!');
    });
    $(".box.featureslider").mouseout(function(e){
      $("#tooltip").hide();
    });
    
  }
  
  
  function loadURL( url, callback ) {
    $( '.buffer' ).remove();
    $buffer = $( '<div id="buffer_' + Math.floor(Math.random() * 42) + '" class="buffer">').hide().appendTo( 'body' );
    $nav = $( 'nav' );
    $aside = $( 'aside' );
    $buffer.load( url + ' #all-elements', function( response, status, xhr ) {
      if ( status ) {
        _gaq.push(['_trackPageview', url]);
        $( '.boxwrapper.inactive' ).html( $( '.buffer .box' ) );
        $nav.html( $( '.buffer header nav ' ).html() );
        $aside.html( $( '.buffer aside' ).html() );
        $buffer.remove();
        if ( callback )
          callback();
      }
    });
  };
  
  
  function initWipe() {
    document.ontouchmove = function(event)
    {
      event.preventDefault();
    }
    $( '.itembox' ).touchwipe( {
           wipeRight: function() {
             //alert('right');
             $( '.button.prev' ).trigger( event );
               },
           wipeLeft: function() {
             //alert('left');
             $( '.button.next' ).trigger( event );
               },
           wipeDown: function() { return false; },
           wipeUp: function() { return false; },
          min_move_x: 40,
          min_move_y: 40,
          preventDefaultEvents: false
      });
    
  }
  
  
  function init() {
    //$('aside').addClass('active');
    showLoader();
    $('.boxwrapper').addClass('active');
    //$('#v2a-net a').addClass('active');
    
    if ( $('.boxwrapper .one-by-one').children().length > 1 ) {
      $('.box.slideshow').addClass('slider').append('<a class="button prev" title="left"></a><a class="button next" title="right"></a>');
      $('.box.featureslider').addClass('slider').append('<a class="button prev" title="left"></a><a class="button next" title="right"></a>');
      $('.box.grid').append('<a class="button prev" title="left"></a><a class="button next" title="right"></a>');
      
    }
    
    if ( $( '.boxwrapper.active .slideshow' ).length ) {
      $( 'aside' ).addClass( 'active' );
    } else {
      $( 'aside' ).removeClass( 'active' );
    }
    
    setOverflow();
    triggerSpecialContent();
    $( window ).trigger( 'resize' );
    
    addNavV2ASlider();
    initWipe();
    $('footer').hide();
    $('.boxwrapper').imagesLoaded(function(){
      hideLoader();
      addDummyThumbs();
      $('#main').addClass('ui-active-state');
      $('header nav').addClass('ui-active-state');
      $('aside').removeClass('ui-state-inactive');
      startAutoFeaureSlider();
    });
    
    
  };
  
  init();
  
});