/**
 * Dateiname       : javascript/PictureBox.js
 * Erzeugungsdatum : 07.02.2008
 * Autor           : Carsten Kube
 * Version         : 1.0
 * Letzte Akt.     : 28.02.2008 (CK)
 * 
 * (c) Copyright SECRA GmbH
 */

var secra, Geometry, Handler;
if(!secra) {secra = {};}
else if(typeof secra !== "object") {throw new Error("secra ist kein Objekt!");}
if(secra.PictureBox) {throw new Error("secra.PictureBox existiert bereits!");}

secra.PictureBox = function(imagefolder, bildpfadarray, container) {
  if(!Geometry) {throw new Error("Geometry.js (V1.0) nicht geladen!");}
  if(!Handler) {throw new Error("Handler.js (V1.0) nicht geladen!");}
  secra.PictureBox.objCounter += 1;
  this.objId = secra.PictureBox.objCounter;

  this.onopen  = null;
  this.onclose = null;
  this.imagefolder  = imagefolder;
  this.bilder       = bildpfadarray;
  this.bilderbackup = null;
  this.container    = container;
  if(typeof this.container === "string") {
    this.container  = secra.Secrautility.getElementById(this.container);
  }

  var agent           = navigator.userAgent.toLowerCase();
  this.isIE           = (agent.indexOf("msie") != -1) ? true : false;
  this.isOpera        = (agent.indexOf("opera") != -1) ? true : false;

  // Ausrichtung/Abmessungen
  this.topBorder        = 200;			
  this.leftBorder       = 40;       	
  this.titleMargin      = 5;  		
  this.imageTyp3Breite  = 53;	    
  this.abstandRandSeite = 0; 
  this.abstandRandOben  = 40;     

  // Grafiken
  this.imageVor1      = this.imagefolder+"arrowrightklein.gif"; // der "normale" Vor Button
  this.imageVor2      = this.imagefolder+"arrowrightklein.gif"; // Vor mit Highlight
  this.imageVor3      = this.imagefolder+"arrowright.gif";      // der über der Bildmitte liegende Infobutton rechts
  this.imageZurueck1  = this.imagefolder+"arrowleftklein.gif";  // der "normale" Zurück Button
  this.imageZurueck2  = this.imagefolder+"arrowleftklein.gif";  // Zurück mit Highlight
  this.imageZurueck3  = this.imagefolder+"arrowleft.gif";       // der über der Bildmitte liegende Infobutton links
  this.imageClose     = this.imagefolder+"close.gif";           // Close Button
  this.imageTop       = this.imagefolder+"header_bg2.gif";      // Rahmen oben
  this.imageBottom    = this.imagefolder+"header_bg.gif";       // Rahmen unten
  this.imageLeer      = this.imagefolder+"leer.gif";            // 100% durchsichige GIF! (nötig, damit der IE glaubt da sei etwas)
  this.imageLade      = this.imagefolder+"indicator.gif";

  // Farben
  this.fillColor        = "#FFFFFF";              // Füllfarbe des Hintergrundes des Content Layer
  // CSS Klassen
  this.titleTextClassId = "secraDivboxTitleText"; // CSS Klassenname für den Titeltext/Überschrift
  this.currentIndex     = 0;                      // aktuelles Bild
  this.richtung         = "";                     // merkt sich, wo mousemove event auftrat

  this.content        = document.createElement("div");
  this.title          = document.createElement("div");
  this.vor            = document.createElement("div");
  this.zurueck        = document.createElement("div");
  this.close          = document.createElement("div");
  this.buttonvor      = document.createElement("div");
  this.buttonzurueck  = document.createElement("div");
  this.right          = document.createElement("div");
  this.left           = document.createElement("div");

  this.content.id       = "secracontent";
  this.title.id         = "secratitle";
  this.vor.id           = "secravor";
  this.zurueck.id       = "secrazurueck";
  this.close.id         = "secraclose";
  this.buttonvor.id     = "secrabuttonvor";
  this.buttonzurueck.id = "secrabuttonzurueck";
  this.right.id         = "secrarightarrow";
  this.left.id          = "secraleftarrow";

  var thisObj = this;
  this.buttonvor.onmouseout       = function() { thisObj.hidePreview(); };
  this.buttonzurueck.onmouseout   = function() { thisObj.hidePreview(); };
  this.vor.onmouseout             = function() { thisObj.hidePreview(); };
  this.zurueck.onmouseout         = function() { thisObj.hidePreview(); };
  this.close.onclick              = function() { thisObj.hideLayer(); };
  this.buttonvor.onmousemove      = function() { thisObj.showNextPreview(); };
  this.vor.onmousemove            = function() { thisObj.showNextPreview(); };
  this.buttonzurueck.onmousemove  = function() { thisObj.showLastPreview(); };
  this.zurueck.onmousemove        = function() { thisObj.showLastPreview(); };
  this.right.onclick              = function() { thisObj.showNext(); };
  this.vor.onclick                = function() { thisObj.showNext(); };
  this.buttonvor.onclick          = function() { thisObj.showNext(); };
  this.left.onclick               = function() { thisObj.showLast(); };
  this.buttonzurueck.onclick      = function() { thisObj.showLast(); };
  this.zurueck.onclick            = function() { thisObj.showLast(); };
};
secra.PictureBox.objCounter = 0;

secra.PictureBox.prototype.init = function() {
  this.content.style.cssText        = "z-index: 101; visibility: hidden; overflow: visible; position:absolute; width : 1px; height: 1px; left: 300px; top: 300px; background: url("+this.imageLade+") no-repeat 50% 50%;";
  this.title.style.cssText          = "z-index: 102; visibility: hidden; position:absolute;";
  this.vor.style.cssText            = "cursor: pointer; background: url("+this.imageLeer+") no-repeat;z-index: 106; visibility: hidden; position:absolute; overflow: visible;";
  this.zurueck.style.cssText        = "cursor: pointer; background: url("+this.imageLeer+") no-repeat;z-index: 106; visibility: hidden; position:absolute; overflow: visible;";
  this.buttonzurueck.style.cssText  = "width:28px; height:25px;cursor: pointer; background: url("+this.imageZurueck1+") no-repeat;z-index: 105; visibility: hidden; position:absolute; overflow: visible;";
  this.buttonvor.style.cssText      = "width:28px; height:25px;cursor: pointer; background: url("+this.imageVor1+") no-repeat;z-index: 105; visibility: hidden; position:absolute; overflow: visible;";
  this.right.style.cssText          = "width:53px; height:46px;cursor: pointer; background: url("+this.imageVor3+") no-repeat;z-index: 105; visibility: hidden; position:absolute; overflow: visible;";
  this.left.style.cssText           = "width:53px; height:46px;cursor: pointer; background: url("+this.imageZurueck3+") no-repeat;z-index: 105; visibility: hidden; position:absolute; overflow: visible;";
  this.close.style.cssText          = "width:26px; height:19px;cursor: pointer; background: url("+this.imageClose+") no-repeat;z-index: 111; visibility: hidden; position:absolute; overflow: visible;";

	// Inhalt zuweisen
  this.content.innerHTML        = '<img id="secraheader" src="' +
                                  this.imageTop+'" border="0" />' +
                                  '<table width="100%" border="0" cellpadding="0" cellspacing="0">' +
                                  '<tr><td align="center" valign="middle">' +
                                  '<img id="secrathe_image" onload="this.style.visibility = \'visible\';"/>' +
                                  '</td></tr></table>' +
                                  '<img id="secrafooter" src="' +
                                  this.imageBottom+'" border="0" />';

  this.title.innerHTML          = '<span class="' +
                                  this.titleTextClassId +
                                  '" id="secratitletext">Lade...</span>';

  this.container.appendChild(this.content);
  this.container.appendChild(this.title);
  if(this.bilder.length > 1) {
    this.container.appendChild(this.vor);
    this.container.appendChild(this.zurueck);
    this.container.appendChild(this.buttonvor);
    this.container.appendChild(this.buttonzurueck);
    this.container.appendChild(this.right);
    this.container.appendChild(this.left);
  }
  this.container.appendChild(this.close);
  this.container.style.visibility = "visible";
  var thisObj = this;
  Handler.add(window, "resize", function(){ /* closure */ thisObj.show();});
};

secra.PictureBox.prototype.open = function(index) {
  // Indexkorrektur (defensive programming)
  index = Math.abs(index % this.bilder.length);
  this.currentIndex = index; // aktuelles Bild merken für die Navigation
  if(typeof this.onopen === "function")
  {
    this.onopen();
  }
  this.init();
  this.show();
};

secra.PictureBox.prototype.show = function() {
  var i, faktor;
  // TODO
	if(this.bilderbackup === null){
		this.bilderbackup = [];
		for(i=0; i<this.bilder.length; i++){
			this.bilderbackup[i] = [];
			this.bilderbackup[i][1] = this.bilder[i][1];
			this.bilderbackup[i][2] = this.bilder[i][2];
		}
	} else {
		for(i=0; i<this.bilder.length; i++){
			this.bilder[i][1] = this.bilderbackup[i][1];
			this.bilder[i][2] = this.bilderbackup[i][2];
		}
	}
  this.vor.style.left = "-3000px";
  this.zurueck.style.left = "-3000px";

  // Bild laden	
  if(!this.isOpera){
    secra.Secrautility.getElementById("secrathe_image").style.visibility = "hidden";
  }
  this.content.style.backgroundColor = this.fillColor;
  secra.Secrautility.getElementById("secrathe_image").src = this.bilder[this.currentIndex][0];

  var highest = Geometry.getViewportHeight();
  var widest = Geometry.getViewportWidth();
  // prüfen, ob Bereich überhaupt für die Anzeige reicht
  if(highest<this.topBorder){
    // zu klein
    return;
  }
  if(widest<this.leftBorder){
    // zu klein
    return;
  }

  // prüfen, ob Bild zu hoch ist
  if(this.bilder[this.currentIndex][2]>(highest-this.topBorder)){
    faktor = (highest - this.topBorder) / this.bilder[this.currentIndex][2];
    this.bilder[this.currentIndex][2] = (highest - this.topBorder);
    this.bilder[this.currentIndex][1] = this.bilder[this.currentIndex][1] * faktor;
  }

  // prüfen, ob Bild zu breit ist
  if(this.bilder[this.currentIndex][1]>(widest-this.leftBorder)){
    faktor = (widest - this.leftBorder) / this.bilder[this.currentIndex][1];
    this.bilder[this.currentIndex][1] = (widest - this.leftBorder);
    this.bilder[this.currentIndex][2] = 	this.bilder[this.currentIndex][2] * faktor;
  }

  this.setPos(); // Elemente arrangieren

  if(!this.isIE){
    // position: fixed; verwenden => Firefox, Opera
    this.content.style.position = "fixed";
    this.title.style.position = "fixed";
    this.zurueck.style.position = "fixed";
    this.vor.style.position = "fixed";
    this.buttonzurueck.style.position = "fixed";
    this.buttonvor.style.position = "fixed";
    this.close.style.position = "fixed";
    this.right.style.position = "fixed";
    this.left.style.position = "fixed";
  }

  // Titel
  secra.Secrautility.getElementById("secratitletext").innerHTML = this.bilder[this.currentIndex][3] + " (" + (this.currentIndex+1) + "/" + this.bilder.length + ")";

  // sichtbar schalten
  this.content.style.visibility = "visible";
  this.title.style.visibility = "visible";
  this.zurueck.style.visibility = "visible";
  this.vor.style.visibility = "visible";
  this.buttonzurueck.style.visibility = "visible";
  this.buttonvor.style.visibility = "visible";
  this.close.style.visibility = "visible";

  // Vorschau ausblenden - Seite wurde gewechselt
  this.hidePreview();

  // CheckImageSize
  secra.Secrautility.getElementById("secrathe_image").style.width = this.bilder[this.currentIndex][1]+"px";
  secra.Secrautility.getElementById("secrathe_image").style.height = this.bilder[this.currentIndex][2]+"px";
};

secra.PictureBox.prototype.showNextPreview = function() {
  this.richtung = "rechts";
  var index = this.currentIndex + 1;
  if(index<0){
    index = this.bilder.length-1;
  }
  if(index>this.bilder.length-1){
    index = 0;
  }	
  this.showPreview(index);
};

secra.PictureBox.prototype.showLastPreview = function() {
  this.richtung = "links";
  var index = this.currentIndex - 1;
  if(index<0){
    index = this.bilder.length-1;
  }
  if(index>this.bilder.length-1){
    index = 0;
  }	
  this.showPreview(index);
};

secra.PictureBox.prototype.showPreview = function(index) {
  var diffX, diffY, xpos;
  var SECRAwdiv2 = this.getMaxImageWidth() / 2;
  // Position bestimmen
  if(this.bilder.length>2){
    if(this.currentIndex === 0 && index == this.bilder.length-1){
      xpos = parseInt(this.content.style.left, 10);
    } else if(this.currentIndex == this.bilder.length - 1 && index === 0){
      xpos = parseInt(this.content.style.left, 10) + parseInt(this.content.style.width, 10) - SECRAwdiv2;		
    } else if(index<this.currentIndex){
      xpos = parseInt(this.content.style.left, 10);
    } else {
      xpos = parseInt(this.content.style.left, 10) + parseInt(this.content.style.width, 10) - SECRAwdiv2;		
    }
	} else {
    if(this.richtung=="links"){
      xpos = parseInt(this.content.style.left, 10);
    } else {
      xpos = parseInt(this.content.style.left, 10) + parseInt(this.content.style.width, 10) - SECRAwdiv2;						
    }
  }
  var ypos = parseInt(this.content.style.top, 10) + 20;

  if(!this.isIE && !this.isOpera){
    diffX = 1;
    diffY = 1;
  } else {
    diffX = 0;
    diffY = 0;
  }

  var l = xpos + diffX;
  var t = ypos + diffY;
  //this.abstandRandOben = parseInt(this.content.style.height, 10)/2 - 40;
  this.left.style.left = l + this.abstandRandSeite + "px";
  this.left.style.top = t + this.abstandRandOben + "px";
  this.right.style.left = l - this.abstandRandSeite + (parseInt(this.content.style.width, 10)*0.5) - this.imageTyp3Breite + "px";
  this.right.style.top = t + this.abstandRandOben + "px";
  if(this.bilder.length>2){
    if(this.currentIndex === 0 && index == this.bilder.length-1){
      this.left.style.visibility = "visible";
      this.buttonzurueck.style.visibility = "hidden";
      this.buttonvor.style.visibility = "visible";
    } else if(this.currentIndex == this.bilder.length - 1 && index === 0){
      this.right.style.visibility = "visible";
      this.buttonvor.style.visibility = "hidden";
      this.buttonzurueck.style.visibility = "visible";
    } else if(index<this.currentIndex){
      this.left.style.visibility = "visible";
      this.buttonzurueck.style.visibility = "hidden";
      this.buttonvor.style.visibility = "visible";
    } else {
      this.right.style.visibility = "visible";
      this.buttonvor.style.visibility = "hidden";
      this.buttonzurueck.style.visibility = "visible";
    }
  } else {
    if(this.richtung=="links"){
      this.left.style.visibility = "visible";
      this.buttonzurueck.style.visibility = "hidden";
      this.buttonvor.style.visibility = "visible";
    }else{
      this.right.style.visibility = "visible";
      this.buttonvor.style.visibility = "hidden";
      this.buttonzurueck.style.visibility = "visible";
    }
  }
};

secra.PictureBox.prototype.hidePreview = function() {
  // Pfeile verstecken
  this.left.style.visibility = "hidden";
  this.right.style.visibility = "hidden";
  this.buttonvor.style.visibility = "visible";
  this.buttonzurueck.style.visibility = "visible";
};

secra.PictureBox.prototype.showNext = function() {
  // nächstes Bild im Index anzeigen
  if(this.bilder.length-1>this.currentIndex){
    this.currentIndex += 1;
  } else {
    this.currentIndex = 0;
  }
  this.show();
};

secra.PictureBox.prototype.showLast = function() {
  // vorheriges Bild im Index anzeigen
  if(this.currentIndex>0){
    this.currentIndex -= 1;
  } else {
    this.currentIndex = this.bilder.length-1;
  }
  this.show();
};

secra.PictureBox.prototype.hideLayer = function() {
  this.content.style.visibility = "hidden";
  this.title.style.visibility = "hidden";
  this.zurueck.style.visibility = "hidden";
  this.vor.style.visibility = "hidden";
  this.close.style.visibility = "hidden";

  this.content.style.width = 1+"px";
  this.content.style.height = 1+"px";

  this.removeSingleElement(this.content);
  this.removeSingleElement(this.title);
  if(this.bilder.length > 1) {
    this.removeSingleElement(this.vor);
    this.removeSingleElement(this.zurueck);
    this.removeSingleElement(this.buttonvor);
    this.removeSingleElement(this.buttonzurueck);
    // Pfeile entfernen
    this.removeSingleElement(this.right);
    this.removeSingleElement(this.left);
  }
  this.removeSingleElement(this.close);

  if(typeof this.onclose === "function")
  {
    this.onclose();
  }
};

secra.PictureBox.prototype.setPos = function() {
  var SECRAtoppos, SECRAleftpos, SECRAw, SECRAh;

  // Abmessungen aus dem von PHP geschriebenen Array holen
  SECRAw = this.getMaxImageWidth(); //parseInt(this.bilder[this.currentIndex][1], 10);
  SECRAh = parseInt(this.bilder[this.currentIndex][2], 10);

  // Rahmen hinzufügen, wenn Bild kleiner als Max
  if(SECRAw>parseInt(this.bilder[this.currentIndex][1], 10)){
    secra.Secrautility.getElementById("secrathe_image").style.borderRight = "2px solid #C1C1C1";
    secra.Secrautility.getElementById("secrathe_image").style.borderLeft = "2px solid #C1C1C1";
  } else {
    secra.Secrautility.getElementById("secrathe_image").style.borderRight = "0px";
    secra.Secrautility.getElementById("secrathe_image").style.borderLeft = "0px";
  }

  // x,y Koordinaten der Bildbox ermitteln (zentriert)
  SECRAtoppos = Geometry.getViewportHeight() * 0.1;
  if(this.isIE){ // notwendig, da IE nicht position: fixed verwendet
    SECRAtoppos += Geometry.getVerticalScroll();
  }
  SECRAleftpos = (Geometry.getViewportWidth() - SECRAw)* 0.5;
  // Die Inhaltsbox (beinhaltet die 3 <img> Tags für Kopfgrafik, Bild und Fussgrafik.)
  this.content.style.top = SECRAtoppos + "px";
  this.content.style.left = SECRAleftpos + "px";
  this.content.style.height = SECRAh + 40 + "px";
  this.content.style.width = SECRAw + "px";
  // Dies ist der IMG Tag der Kopfgrafik
  secra.Secrautility.getElementById("secraheader").style.width = SECRAw + "px";
  secra.Secrautility.getElementById("secraheader").style.height = "20px";
  // Dies ist der IMG Tag der Fussgrafik
  secra.Secrautility.getElementById("secrafooter").style.width = SECRAw + "px";
  secra.Secrautility.getElementById("secrafooter").style.height = "20px";
  // Dies ist das DIV, das den Titel enthält
  this.title.style.top = SECRAtoppos + "px";
  this.title.style.left = (SECRAleftpos + this.titleMargin) + "px";
  // Der Zurück Bereich
  this.zurueck.style.left = SECRAleftpos + "px";//(SECRAleftpos + 2.5) + "px";
  this.zurueck.style.top = (SECRAtoppos + 20) + "px";//(SECRAtoppos + SECRAh - 30 + 40 - 2.5) + "px";	
  this.zurueck.style.height = SECRAh + "px";
  this.zurueck.style.width = (SECRAw / 2) + "px";
  // Der Vor Bereich
  this.vor.style.left = (SECRAleftpos + (SECRAw/2)) + "px";//(SECRAleftpos + SECRAw - 25 - 2.5) + "px";
  this.vor.style.top = (SECRAtoppos + 20) + "px";//(SECRAtoppos + SECRAh - 30 + 40 - 2.5) + "px";
  this.vor.style.height = SECRAh + "px";
  this.vor.style.width = (SECRAw / 2) + "px";
  // Der Zurück Button
  this.buttonzurueck.style.left = (SECRAleftpos) + "px";
  this.buttonzurueck.style.top = (SECRAtoppos + this.abstandRandOben + 20 + 23 - 9.5) + "px";	
  // Der Vor Button
  this.buttonvor.style.left = (SECRAleftpos + SECRAw - 28) + "px";
  this.buttonvor.style.top = (SECRAtoppos + this.abstandRandOben + 20 + 23 - 9.5) + "px";
  // Der Schliessen Button
  this.close.style.left = (SECRAleftpos + SECRAw - 26 - 10) + "px";
  this.close.style.top = (SECRAtoppos + 10) + "px";
  // nochmal der Titel
  this.title.style.width = (parseInt(secra.Secrautility.getElementById("secraheader").style.width, 10) - this.titleMargin) + "px";
  this.title.style.height = secra.Secrautility.getElementById("secraheader").style.height;
};

secra.PictureBox.prototype.getMaxImageWidth = function() {
  var maxw = 0;
  for(var i=0; i<this.bilder.length; i++){
    if(this.bilder[i][1]>maxw){
      maxw = this.bilder[i][1];
    }
  }
  return parseInt(maxw, 10);
};

secra.PictureBox.prototype.removeSingleElement = function(node) {
  // Entfernt ein einzelnes Element
  if(typeof node == 'object') {
    node.parentNode.removeChild(node);
  }
};

// Getter und Setter
secra.PictureBox.prototype.registerCallback = function(p) {
  for(var key in p)
  {
    if(typeof p[key] === "function")
    {
      this[key] = p[key];
    }
  }
};

secra.PictureBox.prototype.toString = function() {
  return "Object [PictureBox Id: "+this.objId+"]";
};