/**
 * @author schouk
 */
jQuery(document).ready(function() {

  // handler: click on an album
  var albumClickHandler = function()
  {
    $(".albumOverviewRow").click(function()
        {
          var albumId = $(this).attr("id");
          
          $("#content").load("services/content.php", {"getcontent": "albumthumbs", "albumid" : albumId},
             addThumbClickHandler);
        }
    );
  };
  
  // handler: click on a thumbnail picture
  var addThumbClickHandler = function()
  {
    $(".thumb").click(function()
        {
          var picSrc = $(this).attr("src").replace(/\/thumbs\//g, "/pics/");
          var picNumber = $(this).attr("picnumber");

          if ($("#picnavi").length == 0) 
          {
            $("#content").prepend("<div id=\"picnavi\">&nbsp;&nbsp;&nbsp;<a href=\"#\" id=\"prevPicture\">Zur&uuml;ck</a>&nbsp;&nbsp;&nbsp;<a href=\"#\" id=\"nextPicture\">Vorw&auml;rts</a>&nbsp;&nbsp;&nbsp;<a href=\"#\" id=\"closePicture\">Zumachen</a></div>");
            
            $("#closePicture").click(function() 
            {
              $("#bigpic").empty();
              $("#picnavi").remove();
              $(".thumb").css("-moz-opacity", 1.00);
              $(".thumb").css("opacity", 1.00);
              $(".thumb").css("filter", "alpha(opacity=100)");
            });
            
            $("#prevPicture").click(function() 
            {
              var actPicNumber = $("#bigpic img").attr("picnumber");
              var picNumber = (actPicNumber)*1-1;
              var thumbElement = $(".thumb[picnumber="+picNumber+"]");
              if(thumbElement.length != 0)
              {
                var newSrc = thumbElement.attr("src").replace(/\/thumbs\//g, "/pics/");
                $("#bigpic").load("services/content.php", {"getcontent": "pictureview", "source" : newSrc}, function(){addLoadHandler(picNumber)});
              }
            });
            
            $("#nextPicture").click(function() 
            {
              var actPicNumber = $("#bigpic img").attr("picnumber");
              var picNumber = (actPicNumber)*1+1;
              var thumbElement = $(".thumb[picnumber="+picNumber+"]");
              if(thumbElement.length != 0)
              {
                var newSrc = thumbElement.attr("src").replace(/\/thumbs\//g, "/pics/");
                $("#bigpic").load("services/content.php", {"getcontent": "pictureview", "source" : newSrc}, function(){addLoadHandler(picNumber)});
              }
            });
          }

          if ($("#bigpic").length == 0) {
            $("#content").prepend("<div id=\"bigpic\" style=\"border:1px solid green;\"></div>");
            $("#bigpic").css("height", "100%");
          }
          
          $("#bigpic").load("services/content.php", {"getcontent": "pictureview", "source" : picSrc}, function() {addLoadHandler(picNumber);});
        }
    );
  };
  
  var onpicload = function(picNumber) 
  {
    var image = $("#bigpic img");
    var dimensions = getOptimizedImageSize(image[0].width, image[0].height);
    var left = dimensions.left;

    image.css("margin-left", left+"px");
    image.css("width", dimensions.width+"px");
    image.css("height", dimensions.height+"px");
    //$("#bigpic").css("height", "auto");
    image.attr("picnumber", picNumber);
    
    $(".thumb").css("-moz-opacity", 0.26);
    $(".thumb").css("opacity", 0.26);
    $(".thumb").css("filter", "alpha(opacity=26)");
    
    image.css("visibility", "visible");
    /*
    image.click(function() {
      var actPicNumber = $(this).attr("picnumber");
      picNumber = (actPicNumber)*1+1;
      var thumbElement = $(".thumb[picnumber="+picNumber+"]");
      if(thumbElement.length != 0)
      {
        var newSrc = thumbElement.attr("src").replace(/\/thumbs\//g, "/pics/");
        $("#bigpic").load("services/content.php", {"getcontent": "pictureview", "source" : newSrc}, addLoadHandler);
      }
    });
    */
    
  };
  
  var addLoadHandler = function(picNumber) {
    $("#bigpic img").load(function(){onpicload(picNumber);});
  };
  
  
  // returns the size that should be used to display the image
  var getOptimizedImageSize = function(originalWidth, originalHeight) 
  {
    var dimensions = {};
    var parentWidth = $("#bigpic")[0].clientWidth*3/4;
    var parentHeight = $("#bigpic")[0].clientHeight*3/4;
    dimensions.parentWidth = parentWidth;
    
    if (originalWidth >= parentWidth || originalHeight >= parentHeight)
    {
      if (originalWidth >= originalHeight) 
      {
        // quer:
        var w = parentWidth;
        var aspectRatio = originalWidth/originalHeight;
        var h = parentWidth/aspectRatio;
  
        if (h >= parentHeight) 
        {
          dimensions.height = parentHeight;
          dimensions.width = parentHeight*aspectRatio;
        }
        else
        {
          dimensions.height = h;
          dimensions.width = parentWidth;
        }
      }
      else if (originalHeight > originalWidth) 
      {
        // hoch:
        var h = parentHeight;
        var aspectRatio = originalHeight/originalWidth;
        var w = parentHeight/aspectRatio;
        
        if (w >= parentWidth) 
        {
          dimensions.width = parentWidth;
          dimensions.height = parentWidth*aspectRatio;
        }
        else
        {
          dimensions.width = w;
          dimensions.height = parentHeight;
        }
      }
    }
    else
    {
      dimensions.width = originalWidth;
      dimensions.height = originalHeight;
    }

    dimensions.left = ($("#bigpic")[0].clientWidth - dimensions.width)/2;
    return dimensions;
  };


  // opener:
  $("#topnavi").fadeIn(1800, function() {
    $("#content").load("services/content.php", {"getcontent": "welcomepage"}, function() {
      $("#content").slideDown(1100);
    });
  });  
  
  // click on a navigation element
  $(".topnavielem").click(function() {
    var url = "services/content.php";
    var params = "";
    var callback = null;
    switch($(this).attr("id")) {
      case "picslink"     : params = {"getcontent": "albumoverview"};
                            callback = albumClickHandler;
                            break;
      case "bloglink"     : params = {"getcontent": "welcomepage"};
                            break;
      case "aboutlink"    : params = {"getcontent": "aboutpage"};
                            break;
      default             : params = {"getcontent": "default"};
    }
    if(params) {
      $("#content").load(url, params, callback);
    } else {
      $("#content").empty();
    }
  });
  
  
});