function isIphone() {
  //return (navigator.platform == "iPhone") || (navigator.platform=="iPod");

  var ua = navigator.userAgent;
  return ((ua.indexOf("iPhone")>-1) || (ua.indexOf("iPod")>-1)) && ((ua.indexOf("AppleWebKit")>-1));
}
function isAndroid() {
  var ua = navigator.userAgent;
  return (ua.indexOf("Android")>-1) && (ua.indexOf("AppleWebKit")>-1);
}
function isMobile() {
  return isIphone() || isAndroid();
}


var ip_id=0;
var ipe_byid = new Object();

function Tab(title,url,jsAction,active) {
  this.type='tab';
  this.id = ip_id++;
  this.title=title;
  this.url=url;
  this.jsAction=jsAction;
  this.active=active;
  ipe_byid[this.id]=this;
  
  this.toString = function () {
    return '<td onclick="clickElem(this)" id="ipe_'+this.id+'" class="tab tab'+(this.active?"on":"off")+' tabcell">'+this.title+'</td>'
  }
  
  this.click = function() {
    this.tabgroup.setActive(this);
    if (this.jsAction) this.jsAction();
    else if (this.url) location = this.url;
  }
  this.refreshState=function() {
    var elem = document.getElementById("ipe_"+this.id);
    elem.className="tab tab"+(this.active?"on":"off")+" tabcell";
  }
}

function Button(title,url,jsAction,active) {
  this.type='button';
  this.id = ip_id++;
  this.title=title;
  this.url=url;
  this.jsAction=jsAction;
  this.active=active;
  ipe_byid[this.id]=this;
  
  this.toString = function () {
    var res = '<table onclick="clickElem(this)" class="button" id="ipe_'+this.id+'"><tr><td class="button buttonleft'+(this.active?"on":"off")+'"></td>';
    res += '<td class="button buttoncell buttonmiddle'+(this.active?"on":"off")+'">'+this.title+'</td>'
    res += '<td class="button buttonright'+(this.active?"on":"off")+'"></td></tr></table>';
    return res;


  }
  this.click = function() {
    if (this.jsAction) this.jsAction();
    else if (this.url) location = this.url;
  }
}



function TabGroup(tabs) {
  this.type='tabgroup';
  this.id = ip_id++;
  this.tabs=tabs;
  tabs[0].left=true;
  tabs[tabs.length-1].right=true;
  ipe_byid[this.id]=this;
  var i;
  for (i=0 ; i<this.tabs.length ; i++) {
    this.tabs[i].tabgroup=this;
  }
  
  this.toString = function() {
    var res = '<table class="tabs tabcell" id="ipe_'+this.id+'"><tr><td id="ipefc_'+this.id+'" class="tableft'+(tabs[0].active?"on":"off")+' tabcell"></td>';
    var i;
    for (i=0 ; i<this.tabs.length ; i++) {
      if (i>0) {
        res += '<td class="tabsep tabcell"></td>';
      }
      var tab = this.tabs[i];
      res+=tab.toString();
    }
    res += '<td id="ipelc_'+this.id+'" class="tabright'+(tabs[tabs.length-1].active?"on":"off")+' tabcell"></td></tr></table>';
    return res;
  }
  
  this.setActive=function(tab) {
    var i;
    for (i=0 ; i<this.tabs.length ; i++) {
      this.tabs[i].active = tab == this.tabs[i];
    }
    this.refreshState();
  }
  
  this.refreshState=function() {
    var elem = document.getElementById("ipefc_"+this.id);
    elem.className="tableft"+(tabs[0].active?"on":"off")+" tabcell";
    elem = document.getElementById("ipelc_"+this.id);
    elem.className="tabright"+(tabs[tabs.length-1].active?"on":"off")+" tabcell";
    var i;
    for (i=0 ; i<this.tabs.length ; i++) {
      this.tabs[i].refreshState();
    }
  }
}

function Toolbar(elements) {
  this.type='toolbar';
  this.id = ip_id++;
  this.elements=elements;
  this.toString = function() {
  ipe_byid[this.id]=this;
    var res = '<table class="toolbar"><tr>';
    var i;
    for (i=0 ; i<this.elements.length ; i++) {
      res += '<td class="toolbar" id="ipe_'+this.id+'">';
      res+=this.elements[i].toString();
      res += '</td>';
    }
    res += '</tr></table>';
    return res;
  }
}


function clickElem(elemHtml) {
  var elem = ipe_byid[elemHtml.id.substring(4)];
  elem.click();
}