$(document).ready(function(){
/*
 * Gallery
 */
  var pic;
  var index;

  $('.pic dl').addClass('hidden'); 

  function showPic(el) {
     index = $(".thumbnails dl").index(el);
     $('.pic dl:gt(' + index + '), .pic dl:lt(' + index + ')')
       .addClass('hidden')
       .fadeTo('fast', 0, function() {
         pic = $('.pic dl:eq(' + index + ')');
         pic.removeClass('hidden');
         pic.css('top', $('.pic').height() - pic.find('img').attr('height'))
             .css('left', $('.pic').position().left + ($('.pic').width() - pic.find('img').attr('width'))/2)
             .css('height', pic.find('img').attr('height'))
             .css('width', pic.find('img').attr('width'));
       
         pic.show(0).fadeTo('fast',0.95);
         pic.find('img').reflect( { height:0.13 });
     });
        
  }

  
  $(window).load(
    function() {
      showPic($(".thumbnails dl:first"));
    }
  );
  
  pic = new Image();
  // show first image
  $(pic)
    .load(function() {  
      showPic($(".thumbnails dl:first"));  
    })
    .attr('src', $(".pic dl:first img").attr('src'));
  
  // hide & position big pics
  $(".pic dl").hide(0)
              .css('position', 'absolute')
              .css('width', '400px')
              .css('height', '370px')
              .css('left', '522px');

  $(".pic dl").fadeTo('fast',0);
  $(".thumbnails dl").fadeTo("fast", 0.3);

  $(".thumbnails dl").click(function() { showPic($(this)); });
  
  $(".thumbnails dl").hover(
    function () {
      $(this).fadeTo("fast", 0.95);
    },
    function () {
      $(this).fadeTo("fast", 0.3);
    }  
  );  


  $(".thumbnails").hover(
    function () {
      $(this).css("z-index", 1000);
    },
    function () {
      $(this).css("z-index", 0);
    }  
  );  



  
/* 
 * UI-Elements
 */

  





/*
 *   Reflection
 */

  //$(".option_layer img").reflect( { height:0.13 });

 
});