//<![CDATA[
    $(document).ready(function(){
       
      var speed = 300;
      var defWidth = 1;
      var defHeight = 1;
      var zoom = 1;
/*
      $(window).scroll(function(){
        $('#level1').css('background-position', 'center -' + $(this).scrollTop()/2 + 'px');
        $('#level2').css('background-position', 'center -' + $(this).scrollTop()/4 + 'px');
      });      
*/    
      
      $('#close, #mask').click(function(){
        $('img.view, #mask, #viewer, #controls').fadeOut(speed);
        zoom = 1;
      });
      
      $('span.zoom').click(function() {
        var img = $('img.view');
        var width = 'auto';
        var height = 'auto';
        if ($(this).attr('id') == 'zoomin') {
          zoom = Math.min(zoom + 0.1, 2);
          width = defWidth*zoom;
          height = defHeight*zoom;
        } else if ($(this).attr('id') == 'zoomout') {
          zoom = Math.max(zoom - 0.1, 0.1);
          width = defWidth*zoom;
          height = defHeight*zoom;
        } else {
          zoom = 1;
          width = defWidth;
          height = defHeight;
        };
        img.stop().animate({
          width: width,
          height: height,
        }, speed/2, 'swing');
        $('#viewer').stop().animate({
          width: width,
          height: height,
          top: Math.max($('html').scrollTop(), $('body').scrollTop()) + Math.max(($(window).height()-height)/2, 0),
          left: ($(window).width()-width)/2,
        }, speed/2, 'swing');
      });

      $('div.unit a').click(function() {
        $('#viewer').css({
          width: $(this).width(),
          height: $(this).height(),
          top: $(this).offset().top,
          left: $(this).offset().left,
        });
        $('#mask').fadeIn(speed);
        $('#controls').css({
          width: $('#level1').width(),
          height: 100,
          left: 0,
          bottom: 0,
        }).fadeIn(speed);
        $('#viewer').show();
        $('img.view').css({width: 'auto', height: 'auto'}).attr('src', $(this).attr('href')).load(function(){
          $(this).parent().stop().animate({
            width: $(this).width(),
            height: $(this).height(),
            top: Math.max($('html').scrollTop(), $('body').scrollTop()) + Math.max(($(window).height()-$(this).height())/2, 0),
            left: ($(window).width()-$(this).width())/2,
          }, speed, function(){
            $('img.view').fadeIn(speed);
            defWidth = $(this).width();
            defHeight = $(this).height();
          });
        });
        return false;
      });

      
      $('#expand').click(function(){
        $('div.shelf-top').click();
      });

      $('#collapse').click(function(){
        $('div.shelf-bottom').click();
        $('#v-slide').stop().animate({top: '103px'}, speed, 'swing');
      });

      $('div.target').hover(function(){
        $('#v-slide').stop().animate({top: ($(this).offset().top-76)+'px'}, speed, 'swing');
        if (!$(this).hasClass('content')) {
          $('#h-slide').stop().animate({left: ($(this).offset().left+81)+'px'}, speed, 'swing');
          $('#h-slide2').stop().animate({left: ($(this).offset().left+81)+'px'}, speed, 'swing');
        };  
      });      

      $('div.shelf-top').click(function(){
        var text = $(this).siblings('div.content').length;
        if (text > 0) {
          $(this).parent().stop().animate({height: ($(this).siblings('div.content').height()+$('div.shelf-spacer').height()*2)+'px'}, speed, 'swing');
        } else {
          $(this).parent().stop().animate({height: (Math.ceil($(this).siblings('div.unit').length/3)*97+$('div.shelf-spacer').height()*2)+'px'}, speed, 'swing');
        };        
        $('#v-slide').stop().animate({top: ($(this).parent().offset().top-16)+'px'}, speed, 'swing');
      });      

      $('div.shelf-bottom').click(function(){
        $(this).parent().stop().animate({height: '60px'}, speed, 'swing');
        $('#v-slide').stop().animate({top: (Math.max($(this).parent().offset().top-220, 103))+'px'}, speed, 'swing');
      });      
      
    });
    //]]>