var data = [];

var index;

function showImageBox(tagid)
{
  

    showInfoBox(200,150);
    
    loadAnimation();

    dojo.xhrGet({

    url: url + "imagebox/"+tagid,

    handleAs: "json",

    load: function(responseObject, ioArgs)
    {

      // Bilddaten übernehmen
      data = responseObject;

      
      // Lightboxfläche berechnen
      var x = window.innerWidth - (window.innerWidth / 20) - 20;
      var y = window.innerHeight - (window.innerHeight / 10) - 50;

      // Box anzeigen
      showInfoBox(x,y);

      // Ladeanimation anhalten
      stopLoadAnimation();

      var view     = dojo.create("div", {id:"div_view"},"infobox");
      var slide    = dojo.create("div", {id:"div_slide"},"infobox");
      var nobr     = dojo.create("nobr",{id:"imgs"},"div_slide");
      var options  = dojo.create("div", {id:"div_opt"},"infobox");
      var close    = dojo.create("div", {id:"div_close"},"infobox");

      $("#div_view").css("height", y - 110);

      img_view = dojo.create("img", {id:"img_view"},"div_view");

      $("#img_view").attr("src","http://www.buchenstein.de/media/layoutimg/empty.png");

      close.innerHTML += '<center><a href="javascript:hideInfoBox()">Schlie&szlig;en</a></center>';

      for (var i = 0 ;i < data.images.length ; i++)
      {
                nobr.innerHTML += '<a href="javascript:viewImage(' + i + ')"><img src="' +  data.images[i].path.replace('img','thumbs') +  '" onMouseOver="focusImg(' + i +')" onMouseOut="deFocusImg(' + i +') "class="prevImage" id="img' + i +'" style="opacity:1" border="1"/></a>';
      }

      viewImage(0);

      //Dojo recommends that you always return(response); to propagate
      //the response to other callback handlers. Otherwise, the error
      //callbacks may be called in the success case.
      return responseObject;
    },

    error: function(error,ioArgs)
        {
            dojo.byId("infobox").innerHTML =
            "Fehler: Der Boxinhalt konnte nicht geladen werden.<br>" + error +"<br>" + ioArgs.xhr.status + ": " + ioArgs.xhr.statusText + "<br><a href='javascript:hideInfoBox()'>Schlie&szlig;en</a>";
            return responseObject;
        }

  });
   

}

function focusImg(i)
{
    $("#img" + i).css( "opacity", "0.6");
}

function deFocusImg(i)
{
    $("#img" + i).css("opacity", "1");
}


function resizeImageBox()
{
    
    var x = window.innerWidth - (window.innerWidth / 20) - 20;
    var y = window.innerHeight - (window.innerHeight / 10) - 50;
    
    resizeInfoBox(x,y);

    var imgheight = y - 110;
 
    $("#img_view").css("height", imgheight);

    $("#div_view").css("height", imgheight);
    $("#div_view").css("width", $("#img_view").css("width"));

    imgwidth = $("#imgs").css("width");

    if(imgwidth < x)
    {
        $("#div_slide").css( "width", imgwidth);
    }
    else
    {
        $("#div_slide").css( "width", x-20);
    }

    

    
}

function viewImage(i)
{
    if(index != i)
    {

        index = i;

        // Bild ausfaden
        $("#img_view").fadeOut(200,  function() {

            // Breite berechnen
            width = ( $("#div_view").css("height") / data.images[index].height ) * data.images[index].width;

            // Ansichtsbereich anpassen
            $("#img_view").css("width", width);
            $("#div_view").css("width", width);

            // Bildpfad setzen
            $("#img_view").attr("src", "" + data.images[index].path);

            // Falls Bild geladen
            $('#img_view').load(function() {

                // ImageBox anpassen
                resizeImageBox();

                // Einfaden
                $("#img_view").fadeIn(200);
            });

        });
    }
}