// Objekt für Imagebutton
// Copyright 2009 Herbert Gebhart

gpbutton.prototype= new gpimage;

//Konstruktor
//Parameter: imgid - id für diesen Bild
//	     defarray - ein Definitions-Array mit folgenden Angaben:
//		defarray
// z.B:
//var gpbutton= [ ["css/buttons.png", "css/basic.png",ClickFunction,0,halign,valign], //Buttonbild, Einleitungsbild, [Click-Funktion],[Timeout für Einleitungsbild (ms)],[halign],[valign]
//                ["css/buttons1.png", "132,436, 377,436, 255,267",ClickFunction], //Mouseover-Bilder (1-n), Polygon-Koordinaten, Click-Funktion|Verweis
//                ...
//                ["css/buttonsnn.png", "468,196, 393,429, 270,259",ClickFunction]
//              ]
//
//Die Click-Funktionen der Buttons bekommen das 'gpobjekt' und die Laufnummer übergeben.

function gpbutton(imgid,defarray)
{
  var startimg;
  var started=true;	//Flag ob schon über Startbild hinweg
  var starting=0;	//Startmodus 0-kein 1-2 Phase

  this.definition;
  this.mapobj; 		//Objekt des Images nach dem Anlegen
  this.hibuttons; 	//Liste aller Bilder für Preload
  this.buttontexts=new Array();	//Liste aller Buttontexte (div) 0-(n-1)
  this.mapareas; 	//einzelne Map-Felder

  //Initialisierung der Klasse
  this.init = function(imgid,defarray)
  {
    if (defarray[0][1]=="") {gpbutton.prototype.init.call(this, imgid,defarray[0][0]);} //Basisbild anlegen
    else
    { startimg=new Image(); //Preloadbild anlegen
      startimg.src=defarray[0][1];
      started=false;
      gpbutton.prototype.init.call(this, imgid,startimg.src);
    }
  
    this.definition=defarray;
    if(this.definition[0][4]) {this.halign=this.definition[0][4];}
    if(this.definition[0][5]) {this.valign=this.definition[0][5];}

    this.mapobj; //Objekt des Images nach dem Anlegen
    this.hibuttons = new Array(); //Liste aller Bilder für Preload
    for (var i=0;i<(this.definition.length);i++)
    {
      this.hibuttons[i]=new Image(); this.hibuttons[i].src= this.definition[i][0]; //Basis und Highlight Bilder laden (Wegen Startbild gibt es das Basisbild halt doppelt)
    }
  }

  //Legt das Bild im Dokument an und erzeugt auch die Map ((name=imgid+'map')
  //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);}

    this.mapobj=document.createElement("map");
    this.mapobj.gpobject=this;
    this.mapobj.name=this.id + "map";
    this.mapobj.id=this.id + "map";

    var maparea;
    this.mapareas=new Array();
    for (var i=1;i<this.definition.length;i++)
    {
      maparea=document.createElement("area");
      maparea.gpobject=this;
      maparea.id=this.id + "map" + i;
      maparea.shape="poly";
      maparea.coords=this.definition[i][1];
      if (this.definition[i][5]) { maparea.alt=this.definition[i][5]; } //Buttontext als 'alt' notieren
      else { maparea.alt="Button" + i; }
      this.mapareas[i]=maparea;
      this.mapobj.appendChild(maparea);
    }
    docel.appendChild(this.mapobj);

    gpbutton.prototype.insert.call(this,docel,opac); //Bild anlegen
    this.imgobj.setAttribute("usemap", "#" + this.id + "map", 0); //geht nur mit setAttribute!?
   }

  //Beendet die Initialisierung nach dem Laden
  this.insertend=function(mythis,opac)
  {
    gpbutton.prototype.insertend.call(mythis,mythis,opac); //Bild initialisieren
  
    for (var i=1;i<mythis.definition.length;i++)
    { 
      mythis.setevent(mythis.id+"mapclick"+i,"click",0,mythis.mapareas[i],mythis.mapclickhandler,"map");
      mythis.setevent(mythis.id+"mapover"+i,"mouseover",0,mythis.mapareas[i],mythis.mapmouseoverhandler,"map");
      mythis.setevent(mythis.id+"mapout"+i,"mouseout",0,mythis.mapareas[i],mythis.mapmouseouthandler,"map");
    }
    
    //Texte, falls vorhanden anlegen und nachträglich ins Bildobjekt eintragen
    var ndiv;
    var ntext;
    var nid;
    for (var i=1;i<mythis.definition.length;i++)
    {
      if (mythis.definition[i][5]!="")
      { ndiv=document.createElement("div");
        ndiv.gpobject=mythis;
        ntext=document.createTextNode(mythis.definition[i][5]);
        ndiv.appendChild(ntext);
        ndiv.id=mythis.id + 'txt' + i; //Endung muß gleich lang wie 'map' sein
        ndiv.style.position="absolute";
        ndiv.style.left=mythis.definition[i][3] + "px";
        ndiv.style.top=mythis.definition[i][4] + "px";
        ndiv.className="gpbuttontext";
        if (!started)
        {
          ndiv.style.opacity=0;    // für IE
          ndiv.style.MozOpacity=0; //Opacity für Firefox
          ndiv.style.filter = "alpha(opacity=0)"; //für IE
        }
        mythis.divobj.appendChild(ndiv);
        mythis.buttontexts[i-1]=ndiv;
        
        //Die Events auch für die Texte eintragen
        mythis.setevent(mythis.id+"mapclick"+i,"click",0,ndiv,mythis.mapclickhandler,"map");
        mythis.setevent(mythis.id+"mapover"+i,"mouseover",0,ndiv,mythis.mapmouseoverhandler,"map");
        mythis.setevent(mythis.id+"mapout"+i,"mouseout",0,ndiv,mythis.mapmouseouthandler,"map");
      } 
    }

    //bei Vorschaubild ausser der Map auch das restliche Bild eintragen und gegebenenfalls ein Time-Out
    if (!started)
    { mythis.setevent(mythis.id+"image","click",0,mythis.imgobj,mythis.mapclickhandler,"image");
      if (mythis.definition[0][3])
      { if (mythis.definition[0][3]>0) { window.setTimeout("evobj=document.getElementById('" + mythis.id + "img').gpobject;evobj.startingfunc(evobj);",mythis.definition[0][3]); }
      }
    } 

  }

  this.mapmouseoverhandler=function(event,maparea,eventobj,userdata)
  {
    if (started)
    {
      var i=parseInt(maparea.id.substring(eventobj.id.length+3));
      eventobj.imgobj.src=eventobj.hibuttons[i].src
    }
  }
  this.mapmouseouthandler=function(event,maparea,eventobj,userdata)
  {
    if (started) { eventobj.imgobj.src=eventobj.hibuttons[0].src }
  }
  
  this.mapclickhandler=function(event,docobj,eventobj,userdata)
  {
    if (starting!=0) {return null;} // zurück wenn gerade im Fading
    if(!started) {eventobj.startingfunc(eventobj);}
    else
    {
      if (userdata== "map") //nur Map-Events ausführen
      { var i=parseInt(docobj.id.substring(eventobj.id.length+3));
        if (eventobj.definition[i][2]) //angegebene Funktion oder Link ausführen
        { switch (typeof(eventobj.definition[i][2]))
          { case "function":
              eventobj.definition[i][2](eventobj,i);
              break;
            case "string":
              if (typeof(eventobj.definition[i][2])!="") {location.href=eventobj.definition[i][2];}
              break;
            default:
              break;
          }
        }
      }
    }
  }
  
  //UP zum Starten des eigentlichen Buttonbildes
  //Nach Fade funktioniert this nicht -> den übergebenen Caller hernehmen!
  this.startingfunc=function(eventobj)
  {
    if (!started)  // nur wenn noch nicht gestartet
    {
      starting += 1
      switch (starting)
      { case 1:
          eventobj.fade(-5,100,eventobj.startingfunc);
          break;
        case 2:
          eventobj.imgobj.src=eventobj.hibuttons[0].src
          if (eventobj.buttontexts.length>0) {eventobj.corropac=eventobj.buttontexts;}
          eventobj.fade(5,100,eventobj.startingfunc);
          break;
        case 3:
          starting=0;
          started=true;
          eventobj.corropac=undefined //keine Transparenz-Änderung mehr
          eventobj.removeevent(this.id+"image")
          break;
      }
    }
  }

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