$(document).ready(function(){
  var isSafari3 = (window.devicePixelRatio && !window.Opera) ? true : false;
  //alert(isSafari3);
  /* wenn die einzelnen elemente in umgedrehter reihenfolge aufgerufen werden
  funktioniert die loadImages Methode, sonst nicht, ich weiß nicht wieso */
  var tables = $("#main_table table").get().reverse();
  //var tables = $("#main_table table").get();
  $(tables).each(function() {
    loadImages($(this).attr('id'));
    //$('.text-info').css('font-size','1pt');
  });
  
  //$.scrollTo({top:800, left:1300}, 800);
  $.scrollTo('50%', 800);
  
  /*************** loading project images**********************************/
  
  function loadImages(table) {

  var images = $("#"+table).find(".images").find("img");
	var max = images.length;
	
	//@ remove them from DOM to prevent normal load
	$("#"+table).find(".images").remove();

  // loop through images
  $(images).each(function(index,value){
		// create the td programatically
		var list = $('<td id="portfolio_'+index+'"></td>').attr('class','loading');
		// append the new td to tr
		$("#"+table).find(".td_images_ajax").append(list);
		// current LI object
		var curr = $("#portfolio_"+index);
		
		// new image
		
    var img = new Image();

		$(img).load(function () {
            $(this).css('display','none'); // since .hide() failed in safari
            $(curr).removeClass('loading').addClass('content-image').append(this);
            $(this).fadeIn();
            
            
            var width = $(this).width() / 100 * 14;
            var height = $(this).height() / 100 * 14;

            $(this).css("width",width);  //speichert aber intern pixelwerte
            $(this).css("height",height);
    
    
        }).error(function () {
			     $(curr).remove();
        }).attr('src', $(images[index]).attr('src'));
      $("#"+table).find(".td_images_ajax").append('<td class="spacer"><img src="fileadmin/html/gfx/blank.gif" width="16" height="10" border="0"></td>');
    });
  }
  
  /*********+++++++++++++++++++++++* loading background **********************/
  var bg = new Image();
  // once the image has loaded, execute this code
  $(bg).load(function () {
      // set the image hidden by default    
      $(this).hide();
    
      $('#bg-img')
        // remove the loading class (so no background spinner), 
        .removeClass('loading')
        // then insert our image
        .append(this);
    
      $(this).fadeIn(8000);
    }).error(function () {
      // notify the user that the image could not be loaded , class: 'bg_img'
    }).attr({src: 'fileadmin/html/gfx/hintergrund_neu.jpg'});
  
  /*************** bilder verkleinern ****************************************/
  var activeTable = null;
  var factor = 14;
  var width;
  var height;

  $(".spacer img").each(function() {

     width = $(this).width()/ 100 * 14;
     height = $(this).height()/ 100 * 14;
    
    $(this).css("width",width);  //speichert aber intern pixelwerte
    $(this).css("height",height);
    
    if(isSafari3){
      $(this).css("width",Math.round(width));  //speichert aber intern pixelwerte
      $(this).css("height",Math.round(height));
    }else{
      $(this).css("width",width);  //speichert aber intern pixelwerte
      $(this).css("height",height);
    }
    
  });
  
  $(".spacer-text img").each(function() {

     width = $(this).width()/100*14;
     height = $(this).height()/100*14;

    $(this).css("width",width);  //speichert aber intern pixelwerte
    $(this).css("height",height);
    $(this).css('display','block');
  });
  
  $('.text-info').css('font-size','1px');
  $('.text-info h1').css('font-size','1px');

  //$('#loading').fadeOut(8000);
  
  /*************** bilder verkleinern/vergrößer auf click ********************************/
  
  $('table').each(function(){
    if($(this).attr('id') != 'main_table'){
      $(this).addClass('small');
    }
  });
  
  
  $('#main_table table').click(function(){
    var table = this;
    //alert($(table).attr('id'));
    //alert($(activeTable).attr('id'));
    /***************** ausganssituation: alle klein *********************************************/
    if(table != activeTable && activeTable == null){
    
      $(table).removeClass("small").addClass("big");
      
      $(table).find('.text-info').animate({fontSize:"11px"},1500);
      $(table).find('.text-info h1').animate({fontSize:"11px"},1500);
      //$(table).find('td').animate({borderWidth:"8pt"},1500);
    
      $(table).find('img').each(function() {
       width = $(this).width()/factor*100;
       height = $(this).height()/factor*100;

      $(this).animate({
        width: width,
        height: height
      },1500);
    });
    
    $.scrollTo(this, 800);
    //$.scrollTo($(this), 800);
    activeTable = table;
    
    /* wenn auf eine andere Bilderreihe als die aktuell große geklickt wird ***/
    }else if(table != activeTable && activeTable != null){
      /*aktives projekt klein machen*/
      $(activeTable).removeClass("big").addClass("small");
      
      
      
      $(activeTable).find('img').each(function() {
       width = $(this).width()/100*factor;
       height = $(this).height()/100*factor;

      $(this).animate({
        width: width,
        height: height
      },1500);
      });
      
      $(activeTable).find('.text-info').animate({fontSize:"1px"},1000);
      $(activeTable).find('.text-info h1').animate({fontSize:"1px"},1000);
      
      /*neues projekt groß machen*/
      $(table).removeClass("small").addClass('big');
      $(table).find('img').each(function() {
       width = $(this).width()/factor*100;
       height = $(this).height()/factor*100;

      $(this).animate({
        width: width,
        height: height
      },1500);
      
      });
      
      $(table).find('.text-info').animate({fontSize:"11px"},1500);
      $(table).find('.text-info h1').animate({fontSize:"11px"},1500);
      
      $.scrollTo(this, 800);
      
      activeTable = table;
      
    }
    /* table == activetable **************************************************/
    else{
      //callback function
      function changeMode(){
        $(table).removeClass("big").addClass("small");
      }
      
      $(table).find('img').each(function() {
      
         //width = $(this).width()/100*factor;
         //height = $(this).height()/100*factor;
         
         if(isSafari3){
          width = Math.round($(this).width()/100*factor);
          height = Math.round($(this).height()/100*factor);
        }else{
          width = $(this).width()/100*factor;
          height = $(this).height()/100*factor;
        }

        $(this).animate({
          width: width,
          height: height
        },1500,"", changeMode);
      });
      
      $(table).find('.text-info').animate({fontSize:"1px"},1500);
      $(table).find('.text-info h1').animate({fontSize:"1px"},1500);
      
      $.scrollTo(this, 800);
      
      activeTable = null;
    }
  });
  
  //Cufon.replace('#imprint p');
  /*
  if(!$.fontAvailable('calvertmt')) {
     // Cufon.replace('h1');
  }
  
  if(!$.fontAvailable('calvertmt-light')) {
      Cufon.replace('#imprint p');
      //Cufon.replace('.text-info');
    }
  */
});