// Objekt mit Image & Window Funktionen
// Copyright 2009 Herbert Gebhart

gpimage.prototype= new gpobject;

//Konstruktor
//Parameter: imgid - id für diesen Bild
//	     imgfile - das zu verwendende File
function gpimage(imgid,imgfile,opac)
{
  this.id="";
  this.file="";
  this.preload=null; //Laden aktivieren
  this.divobj; //Objekt des DIV-Blocks nach dem Anlegen
  this.imgobj; //Objekt des Images nach dem Anlegen
  this.corropac; //für Array mit weiteren Objekten welche bei Opazitätsänderung mitgenommen werden sollen
  this.halign="left";
  this.valign="top";
  
  var fadeopacstep; 	//Parameter für Fade
  var fadeopacchangestep;
  var fadefunc; 	//Funktion am Ende des Fade
  var fading=false;	//Flag ob derzeit im Fading
   
  //Initialisierung der Klasse
  this.init = function(imgid,imgfile)
  {
    gpimage.prototype.init.call(this);
    this.id=imgid;
    this.file=imgfile;
    this.preload=new Image(); //Laden aktivieren
    this.preload.src=imgfile;
  }

  // Fensterbreite ermitteln
  this.windowwidth=function()
  {
    if( typeof(window.innerWidth ) == 'number' ) { return window.innerWidth; }  // NON-IE ohne Scrollbalken
    else if( document.documentElement && document.documentElement.clientWidth ) { return document.documentElement.clientWidth; }  // IE 6 + in 'standards compliant mode' ohne Scrollbalken
    else if( document.body && document.body.clientWidth ) { return document.body.clientWidth; }  // IE 4 compatible ohne Scrollbalken
    return 630;  //Defaultwert
  }
  // Fensterhöhe ermitteln
  this.windowheight=function()
  {
    if( typeof(window.innerHeight ) == 'number' )
      { return window.innerHeight; }  // NON-IE ohne Scrollbalken
    else if( document.documentElement && document.documentElement.clientHeight ) { return document.documentElement.clientHeight; }  // IE 6 + in 'standards compliant mode' ohne Scrollbalken
    else if( document.body &&  document.body.clientHeight ) { return document.body.clientHeight; }  // IE 4 compatible ohne Scrollbalken
    return 460;  //Defaultwert
  }

  //warten bis Bild im Dokument geladen ist, dann Funktion ausführen
  //Parameter: func - Funktion, wenn fertig geladen (bekommt dieses Objekt (this) übergeben)
  //	       funcdata - Daten für auzurufende Funktion
  //	       mythis - gpobject
  //Die Funktion bekommt folgende Werte übergeben:
  // mythis - gpobject
  // funcdata - Userdaten
  this.waitloaded=function(func,funcdata, mythis)
  {  
    if (mythis.imgobj.complete) { func(mythis,funcdata); }
    else // weiter warten
    {
      var userdata=new Array();
      userdata[0]=func;
      userdata[1]=funcdata;
      mythis.setevent(mythis.id+"waitload","timeout",50,mythis.imgobj,mythis.loadedeventhandler,userdata);
    }  
  }
  //Eventhandler für loaded
  this.loadedeventhandler=function(event,docobj,mythis,userdata)
  {
    if (mythis.imgobj.complete) { userdata[0](mythis,userdata[1]); }
    else { mythis.setevent(mythis.id+"waitload","timeout",50,mythis.imgobj,mythis.loadedeventhandler,userdata); }  // weiter warten
  }

  //Warten bis das Bild geladen ist und dynamisch in ein Element einfügen
  //Parameter:
  //docel - Dokumentenelement in welches das Bild eingefügt werden soll oder dessen id
  //opac - Transparenz bei Beginn
  this.insert=function(docel,opac)
  {
    if (typeof(docel)=="string") {docel=document.getElementById(docel);}
    if (opac==undefined) {opac=100;}

    this.divobj=document.createElement("div");
    this.divobj.gpobject=this;
    this.divobj.id=this.id + "div";
    this.divobj.style.position="absolute";
    this.divobj.style.left="0px";
    this.divobj.style.top="0px";
    //this.divobj.style.width="100%";
    //this.divobj.style.height="100%";
    //this.divobj.style.line-height="1.0em";
    this.imgobj=document.createElement("img");
    this.imgobj.gpobject=this;
    this.imgobj.id=this.id + "img";
    this.imgobj.src=this.preload.src
    //this.imgobj.style.left="0px";
    //this.imgobj.style.top="0px";
    this.imgobj.margin=0;
    this.imgobj.border=0;
    this.imgobj.style.overflow="visible";
    //Transparenz zunächst auf durchsichtig stellen
    this.imgobj.style.opacity=0;    // für IE
    this.imgobj.style.MozOpacity=0; //Opacity für Firefox
    this.imgobj.style.filter = "alpha(opacity=0)"; //für IE
    
    this.divobj.appendChild(this.imgobj);
    docel.appendChild(this.divobj);
    
    this.waitloaded(this.insertend,opac,this); //warten bis geladen und fertigstellen
  }

  //Beendet die Initialisierung nach dem Laden
  this.insertend=function(mythis,opac)
  {
    var iwidth=mythis.imgobj.width;
    var iheight=mythis.imgobj.height;
    mythis.divobj.style.width=iwidth;
    mythis.divobj.style.height=iheight;
    //mythis.divobj.style.minwidth=iwidth;
    //mythis.divobj.style.minheight=iheight;

    if (mythis.halign=="center") {mythis.divobj.style.left=-iwidth/2+"px";}
    if (mythis.valign=="middle") {mythis.divobj.style.top=-iheight/2+"px";}
    
    mythis.imgobj.style.opacity=opac/100;    // für IE
    mythis.imgobj.style.MozOpacity=opac/100; //Opacity für Firefox
    mythis.imgobj.style.filter = "alpha(opacity=" + opac + ")"; //für IE
  }

  //Bild im Fenster zentrieren und falls zu groß skalieren
  //Parameter: pwidth - eine vorgegebene Breite (bei 0 wird die Größe aus dem Bild genommen)
  //	       pheight - eine vorgegebene Höhe (...)
  this.centerwindow=function(pwidth,pheight)
  {
    var newleft =0, newtop =0, newwidth =0, newheight =0;  // Variablen für neue Breite & Position
    var wwidth = this.windowwidth();  // aktuelle Fenstergröße ermitteln
    var wheight= this.windowheight();
  
    var imgwidth, imgheight;  // neue  Bildbröße
    if (pwidth==0) {imgwidth = this.imgobj.width; imgheight = this.imgobj.height;}
    else {imgwidth = pwidth; imgheight = pheight;}
  
    var scalef = 1.0; // Skalierungsfaktor
    if (imgwidth>wwidth)   { scalef=wwidth/imgwidth; } // Skalierungsfaktor für horz.
    if (imgheight>wheight) { if ((wheight/imgheight) < scalef) { scalef=wheight/imgheight; } } // Skalierungsfaktor für vert.
  
    newwidth = imgwidth; newheight = imgheight
    if ((pwidth !=0) | (scalef != 1.0))  // Größe anpassen, wenn nötig d.h. wenn geändert oder übergeben
    {
      newwidth = Math.floor(newwidth * scalef); newheight = Math.floor(newheight * scalef);
      this.imgobj.width = newwidth;
      this.imgobj.height = newheight;
    }
  
    newleft = Math.floor((wwidth - newwidth) / 2); newtop = Math.floor((wheight - newheight) / 2);  // Position anpassen
    this.divobj.style.position="absolute";
    if (navigator.appName.indexOf("Microsoft")!=-1)
    {
      this.divobj.style.left = newleft;  //IE mault bei Pixelangabe
      this.divobj.style.top = newtop;
      this.divobj.style["line-height"]=newheight;  //gleich mal die Zeilenhöhe auf die aktuelle Bildgröße setzen
    }
    else
    {
      this.divobj.style.left = newleft + "px";
      this.divobj.style.top = newtop + "px"; 
      this.divobj.style["line-height"]=newheight + "px";
    }
  }

  //Position eines Bildes setzen
  //Parameter: left/top - die Position
  this.setpos=function(left,top)
  {
    if (navigator.appName.indexOf("Microsoft")!=-1)
    {
      this.divobj.style.left = newleft;  //IE mault bei Pixelangabe
      this.divobj.style.top = newtop;
    }
    else
    {
      this.divobj.style.left = newleft + "px";
      this.divobj.style.top = newtop + "px"; 
    }
  }

  //Position eines Bildes auf ein anderes kopieren
  //Parameter: srcimg - gpimage mit zu übernehmender Position
  this.copypos=function(srcimg)
  {
    this.divobj.style.left = srcimg.divobj.style.left;
    this.divobj.style.top  = srcimg.divobj.style.top;
  }

  //Opazität setzen
  //Parameter: newopac - neue Transparenz 0-100
  //Ergebnis: der neue Wert
  this.opacity=function(newopac)
  {

    if (newopac<0) {newopac=0;}
    if (newopac>100) {newopac=100;}
    newopac=parseInt(newopac); //zur Sicherheit immer ganzzahlig machen!

    this.imgobj.style.opacity=newopac/100;    // für IE
    this.imgobj.style.MozOpacity=newopac/100; //Opacity für Firefox
    this.imgobj.style.filter = "alpha(opacity=" + newopac + ")"; //für IE
    
    if (this.corropac!=undefined)
    {
      for (var i=0;i<this.corropac.length;i++)
      {
        this.corropac[i].style.opacity=newopac/100;    // für IE
        this.corropac[i].style.MozOpacity=newopac/100; //Opacity für Firefox
        this.corropac[i].style.filter = "alpha(opacity=" + newopac + ")"; //für IE
      }
    }
    return newopac;
  }

  //Die Transparenz um einen bestimmten Wert ändern
  //Parameter: opacstep - Transparenzschritt
  //Ergebnis: der neue Wert
  this.incOpacity=function(opacstep)
  {
    var opac=parseFloat(this.imgobj.style.opacity)*100 + opacstep;
    return this.opacity(opac);
  }

  //Bild ein-/ausblenden bis 0 oder 100%
  //Parameter:	opacstep - Schrittweite für Änderung der Transparenz (+ | -) (default=10)
  //		opacchancestep - Zeitschritt (ms) (default=100)
  //		endfunc - Funktion, nach Ende des Fade (bekommt dieses Objekt (this) übergeben)
  this.fade=function(opacstep,opacchangestep,endfunc)
  {
   fading=true;
   if (opacstep!=undefined) {fadeopacstep=opacstep;}
   if (opacchangestep!=undefined) {fadeopacchangestep=opacchangestep;}
   if (endfunc!=undefined) {fadefunc=endfunc;}
   
   if (fadeopacstep==0) {fadeopacstep=10;} //Defaultwerte
   if (fadeopacchangestep==0) {fadeopacchangestep=100;}
  
    var opac=this.incOpacity(fadeopacstep); // Opacität ändern
    var efunc=fadefunc;
    if (fadeopacstep>0) // Zeit-Event setzen, falls noch nicht fertig
         { if (opac==100) {fading=false; if (fadefunc!=undefined) { fadefunc=null; efunc(this); } }
           else { window.setTimeout("document.getElementById('" + this.id + "img').gpobject.fade()",fadeopacchangestep); }
         }
    else { if (opac==0) {fading=false; if (fadefunc!=undefined) { fadefunc=null; efunc(this); } }
           else { window.setTimeout("document.getElementById('" + this.id + "img').gpobject.fade()",fadeopacchangestep); }
         }
  }

if (arguments.length>0) this.init(imgid,imgfile,opac);
}//Ende der Klasse