var utils = {
  backgroundWidth: 1600,
  backgroundHeight: 900,
  ratio: 0,
  mode: '',
  backgroundCountedWidth: 0,
  backgroundLeftDelta: 0
};

utils.centerBackground = function() {
  $('#background').css('left', '0px');
  var windowwidth = $(window).width();
  var backgroundW = $('#background img').width();

  if (backgroundW < windowwidth && backgroundW != 0)
  {
    this.backgroundLeftDelta = Math.round((windowwidth - backgroundW) / 2);
    $('#background').css('left', this.backgroundLeftDelta+'px'); 
  }
  else
    this.backgroundLeftDelta = 0;
  
  var backgroundW2 = $('#background img').width();
  
  if (backgroundW != backgroundW2)
  {
    if (backgroundW2 < windowwidth && backgroundW2 != 0)
    {
      this.backgroundLeftDelta = Math.round((windowwidth - backgroundW2) / 2);
      $('#background').css('left', this.backgroundLeftDelta+'px'); 
    }
    else
      this.backgroundLeftDelta = 0;    
  }
};

utils.nordnungScaleAction = function() {
  var mapLinkMoosePoints = "0,0,34,38";  
  this.scaleLink('map_link_moose', 'link_moose', 489, 239, 50, 50, mapLinkMoosePoints);
  
  var mapLinkPhonePoints = "444,125,149,14,72,270,162,270,367,342";  
  this.scaleLink('map_link_phone', 'link_phone', 0, 1147, 453, 345, mapLinkPhonePoints);
  
  var mapLinkMobilePoints = "98,32,185,134,226,99,134,2";   
  this.scaleLink('map_link_mobile', 'link_mobile_pad', 304, 454, 689, 596, mapLinkMobilePoints);
  
  var mapLinkPadPoints = "183,201,653,181,681,549,191,572";   
  this.scaleLink('map_link_pad', 'link_mobile_pad', 304, 454, 689, 596, mapLinkPadPoints);
  
  var mapLinkIphonePoints = "52,53,118,85,74,204,4,177";   
  this.scaleLink('map_link_iphone', 'link_mobile_pad', 304, 454, 689, 596, mapLinkIphonePoints);
  
  var mapLinkMusicPoints = "139,125,182,146,96,386,60,378";   
  this.scaleLink('map_link_music', 'link_mobile_pad', 304, 454, 689, 596, mapLinkMusicPoints);
  
  var mapLinkCoinPoints = "28,31,23";   
  this.scaleLink('map_link_coin', 'link_coin', 216, 1076, 58, 59, mapLinkCoinPoints);
  
  var mapLinkPicturePoints = "40,26,445,61,415,360,263,338,339,211,32,80,31,81";   
  this.scaleLink('map_link_picture', 'link_picture', 519, 1143, 457, 381, mapLinkPicturePoints);
  
  var mapLinkPhotoPoints = "74,108,287,225,215,346,6,224";   
  this.scaleLink('map_link_photo', 'link_picture', 519, 1143, 457, 381, mapLinkPhotoPoints);
  
  var mapLinkEnvelopePoints = "20,345,342,390,357,255,48,208";   
  this.scaleLink('map_link_envelope', 'link_envelope', 15, 0, 375, 391, mapLinkEnvelopePoints);
  
  var mapLinkcalcPoints = "40,12,166,5,185,172,113,189,44,182";   
  this.scaleLink('map_link_calc', 'link_envelope', 15, 0, 375, 391, mapLinkcalcPoints);
  
  var mapLinkeffiePoints = "180,78,264,67,269,111,186,121";   
  this.scaleLink('map_link_effie', 'link_envelope', 15, 0, 375, 391, mapLinkeffiePoints);
  
  var mapLinkfishPoints = "258,238,315,228,365,202,365,184,311,179,243,229";   
  this.scaleLink('map_link_fish', 'link_envelope', 15, 0, 375, 391, mapLinkfishPoints);
    
  var mapLinksenekaPoints = "40,12,166,5,185,172,113,189,44,182";   
  this.scaleLink('map_link_seneka', 'link_seneka', 0, 732, 152, 242, mapLinksenekaPoints);
  
  var mapLinkbooksPoints = "3,4,171,286";   
  this.scaleLink('map_link_books', 'link_books', 15, 375, 177, 289, mapLinkbooksPoints);
  
  var mapLinkNewspaperPoints = "25,4,296,34,284,159,13,128";   
  this.scaleLink('map_link_newspaper', 'link_newspaper', 704, 306, 311, 168, mapLinkNewspaperPoints);
  
  var mapLinkCupPoints = "77,4,110,19,123,35,128,54,161,56,163,77,124,85,111,107,93,127,70,134,47,133,21,118,8,94,7,64,15,43,28,26,49,8";   
  this.scaleLink('map_link_cup', 'link_cup', 355, 1398, 171, 139, mapLinkCupPoints);
  
  this.ratio = $('#background img').width() / this.backgroundWidth;

  this.scaleLink('map_link_moose', 'link_moose', 489, 239, 50, 50, mapLinkMoosePoints);
  this.scaleLink('map_link_phone', 'link_phone', 0, 1147, 453, 345, mapLinkPhonePoints);
  
  this.scaleLink('map_link_mobile', 'link_mobile_pad', 304, 454, 689, 596, mapLinkMobilePoints);
  this.scaleLink('map_link_pad', 'link_mobile_pad', 304, 454, 689, 596, mapLinkPadPoints);
  this.scaleLink('map_link_iphone', 'link_mobile_pad', 304, 454, 689, 596, mapLinkIphonePoints);
  this.scaleLink('map_link_music', 'link_mobile_pad', 304, 454, 689, 596, mapLinkMusicPoints);
  
  this.scaleLink('map_link_coin', 'link_coin', 216, 1076, 58, 59, mapLinkCoinPoints);
  
  this.scaleLink('map_link_picture', 'link_picture', 519, 1143, 457, 381, mapLinkPicturePoints);
  this.scaleLink('map_link_photo', 'link_picture', 519, 1143, 457, 381, mapLinkPhotoPoints);
  
  this.scaleLink('map_link_envelope', 'link_envelope', 15, 0, 375, 391, mapLinkEnvelopePoints);
  this.scaleLink('map_link_calc', 'link_envelope', 15, 0, 375, 391, mapLinkcalcPoints);
  this.scaleLink('map_link_effie', 'link_envelope', 15, 0, 375, 391, mapLinkeffiePoints);
  this.scaleLink('map_link_fish', 'link_envelope', 15, 0, 375, 391, mapLinkfishPoints);
  
  this.scaleLink('map_link_seneka', 'link_seneka', 0, 732, 152, 242, mapLinksenekaPoints);
  this.scaleLink('map_link_books', 'link_books', 15, 375, 177, 289, mapLinkbooksPoints);
  
  this.scaleLink('map_link_newspaper', 'link_newspaper', 704, 306, 311, 168, mapLinkNewspaperPoints);
  
  this.scaleLink('map_link_cup', 'link_cup', 355, 1398, 171, 139, mapLinkCupPoints);
  
  this.scaleCanvas('mobile_canvas', 323, 569, 65, 65);
  this.scaleCanvas('pad_canvas', 530, 677, 430, 315);
  this.scaleCanvas('pad_canvas2', 530, 677, 430, 315);    
  this.scaleCanvas('iphone_canvas', 380, 471, 95, 110);
  
  this.scaleCanvas('moose', 489, 239, 50, 50);
  
  this.scaleCanvas('logo_aha', 0, 695, 215, 80);
  
  
  this.scaleCanvas('link_paper', 619, 89, 150, 34);      
  this.scaleCanvas('link_paper_en', 653, 89, 150, 28);      
  this.scaleCanvas('link_paper_de', 681, 89, 150, 33);      
  this.scaleCanvas('link_paper_ch', 714, 89, 150, 34);      
};

utils.ordnungScaleAction = function() {
  var mapLinkMoosePoints = "1,1,36,38";  
  this.scaleLink('map_link_moose', 'link_moose_or', 489, 239, 50, 50, mapLinkMoosePoints);
  
  var mapLinkPhonePoints = "7,34,314,35,323,271,116,272,45,310,11,178";  
  this.scaleLink('map_link_phone', 'link_phone_or', 0, 1267, 333, 316, mapLinkPhonePoints);    

  var mapLinkPaperPoints = "9,36,43,31,45,6,314,8,327,221,347,365,345,456,319,471,73,493,51,475,40,446,40,358";   
  this.scaleLink('map_link_paper', 'link_paper_or', 400, 0, 352, 500, mapLinkPaperPoints);
  
  var mapLinkMobilePoints = "2,2,61,143";   
  this.scaleLink('map_link_mobile', 'link_mobile_or', 294, 477, 63, 146, mapLinkMobilePoints);
  
  var mapLinkPadPoints = "13,14,491,12,495,377,13,378";   
  this.scaleLink('map_link_pad', 'link_pad_or', 494, 611, 509, 394, mapLinkPadPoints);
  
  var mapLinkIphonePoints = "10,7,496,382";   
  this.scaleLink('map_link_iphone', 'link_iphone_or', 294, 390, 84, 143, mapLinkIphonePoints);
  
  var mapLinkCoinPoints = "29,30,23";   
  this.scaleLink('map_link_coin', 'link_coin_or', 388, 675, 58, 59, mapLinkCoinPoints);
  
  var mapLinkPicturePoints = "5,9,460,6,464,322,9,328";   
  this.scaleLink('map_link_picture', 'link_picture_or', 540, 1120, 470, 338, mapLinkPicturePoints);
  
  var mapLinkEnvelopePoints = "6,5,321,140";   
  this.scaleLink('map_link_envelope', 'link_envelope_or', 312, 31, 326, 147, mapLinkEnvelopePoints);
  
  var mapLinksenekaPoints = "40,12,166,5,185,172,113,189,44,182";   
  this.scaleLink('map_link_seneka', 'link_seneka_or', 0, 732, 152, 242, mapLinksenekaPoints);
  
  var mapLinkeffiePoints = "17,11,296,221";   
  this.scaleLink('map_link_effie', 'link_effie_or', 38, 40, 309, 230, mapLinkeffiePoints);
  
  var mapLinkbooksPoints = "7,7,184,281";   
  this.scaleLink('map_link_books', 'link_books_or', 8, 357, 189, 286, mapLinkbooksPoints);
  
  var mapLinkfishPoints = "29,25,99,4,135,9,158,27,161,45,138,58,109,61,35,37";   
  this.scaleLink('map_link_fish', 'link_fish_or', 469, 357, 174, 92, mapLinkfishPoints);
  
  var mapLinkcalcPoints = "16,9,134,7,148,167,74,185,12,174,13,103";   
  this.scaleLink('map_link_calc', 'link_calc_or', 11, 1035, 158, 194, mapLinkcalcPoints);
  
  var mapLinkCameraPoints = "8,7,258,161";   
  this.scaleLink('map_link_camera', 'link_camera_or', 720, 330, 268, 180, mapLinkCameraPoints);
  
  var mapLinkMusicPoints = "8,4,265,47";   
  this.scaleLink('map_link_music', 'link_music_or', 440, 740, 276, 54, mapLinkMusicPoints);
  
  var mapLinkNewspaperPoints = "17,16,301,10,304,143,17,149";   
  this.scaleLink('map_link_newspaper', 'link_newspaper_or', 335, 1056, 322, 158, mapLinkNewspaperPoints);
  
  var mapLinkCupPoints = "58,9,84,10,102,23,109,30,137,13,148,30,143,46,118,59,114,94,110,117,95,134,67,137,38,137,11,113,7,93,10,52,14,28,29,11";   
  this.scaleLink('map_link_cup', 'link_cup_or', 338, 1426, 156, 150, mapLinkCupPoints);
  
  this.ratio = $('#background img').width() / this.backgroundWidth;
  
  this.scaleLink('map_link_moose', 'link_moose_or', 489, 239, 50, 50, mapLinkMoosePoints);
  this.scaleLink('map_link_phone', 'link_phone_or', 0, 1267, 333, 316, mapLinkPhonePoints);
  this.scaleLink('map_link_paper', 'link_paper_or', 400, 0, 352, 500, mapLinkPaperPoints);
  this.scaleLink('map_link_mobile', 'link_mobile_or', 294, 477, 63, 146, mapLinkMobilePoints);
  this.scaleLink('map_link_pad', 'link_pad_or', 494, 611, 509, 394, mapLinkPadPoints);
  this.scaleLink('map_link_iphone', 'link_iphone_or', 294, 390, 84, 143, mapLinkIphonePoints);
  this.scaleLink('map_link_coin', 'link_coin_or', 388, 675, 58, 59, mapLinkCoinPoints);
  this.scaleLink('map_link_picture', 'link_picture_or', 540, 1120, 470, 338, mapLinkPicturePoints);
  this.scaleLink('map_link_envelope', 'link_envelope_or', 312, 31, 326, 147, mapLinkEnvelopePoints);
  this.scaleLink('map_link_seneka', 'link_seneka_or', 0, 732, 152, 242, mapLinksenekaPoints);
  this.scaleLink('map_link_effie', 'link_effie_or', 38, 40, 309, 230, mapLinkeffiePoints);
  this.scaleLink('map_link_books', 'link_books_or', 8, 357, 189, 286, mapLinkbooksPoints);
  this.scaleLink('map_link_fish', 'link_fish_or', 469, 357, 174, 92, mapLinkfishPoints);
  this.scaleLink('map_link_calc', 'link_calc_or', 11, 1035, 158, 194, mapLinkcalcPoints);
  this.scaleLink('map_link_camera', 'link_camera_or', 720, 330, 268, 180, mapLinkCameraPoints);
  this.scaleLink('map_link_music', 'link_music_or', 440, 740, 276, 54, mapLinkMusicPoints);
  this.scaleLink('map_link_newspaper', 'link_newspaper_or', 335, 1056, 322, 158, mapLinkNewspaperPoints);
  this.scaleLink('map_link_cup', 'link_cup_or', 338, 1426, 156, 150, mapLinkCupPoints);
  
  this.scaleCanvas('mobile_canvas_or', 324, 488, 45, 54);
  
  this.scaleCanvas('pad_canvas_or', 511, 640, 461, 360);
  this.scaleCanvas('pad_canvas2_or', 511, 640, 461, 360);//421/38
  
  this.scaleCanvas('iphone_canvas_or', 332, 402, 66, 92);      
  
  this.scaleCanvas('moose_or',  489, 239, 50, 50);   
  
  this.scaleCanvas('link_paper', 619, 89, 150, 34);      
  this.scaleCanvas('link_paper_en', 653, 89, 150, 28);      
  this.scaleCanvas('link_paper_de', 681, 89, 150, 33);      
  this.scaleCanvas('link_paper_ch', 714, 89, 150, 34);       
};

utils.documentReady = function(mode) {
  this.mode = mode;
  
  this.centerBackground();

  this.ratio = $('#background img').width() / this.backgroundWidth; 
  
  if (mode == 'nordnung')
  {
    utils.nordnungScaleAction();

    $('#mobile_canvas').click(function(e){ window.location.href = "prezentacje"; });
    $('#pad_canvas').click(function(e){ window.location.href = "galeria"; });
    $('#pad_canvas2').click(function(e){ window.location.href = "galeria"; });
    $('#iphone_canvas').click(function(e){ window.location.href = "aktualnosci"; });
    
    $('#moose').click(function(e){ window.location.href = "glowna_ordnung"; });
    $('#ant').click(function(e){ window.location.href = "onas_pl"; });
    
    $('#container_modal').click(function(e){ if(e.target != this) return; window.location.href = "glowna"; });
  }
  else
  {
    utils.ordnungScaleAction();
    
    $('#pad_canvas_or').click(function(e){ window.location.href = "galeria"; });
    $('#pad_canvas2_or').click(function(e){ window.location.href = "galeria"; });
    $('#mobile_canvas_or').click(function(e){ window.location.href = "prezentacje"; });
    $('#iphone_canvas_or').click(function(e){ window.location.href = "aktualnosci"; });
    
    $('#moose_or').click(function(e){ window.location.href = "glowna"; });
    $('#ant_or').click(function(e){ window.location.href = "onas_pl"; });    
  }

  mobile.documentReady();
  pad.documentReady();
  iphone.documentReady();
  
  $(window).resize(function() {
    utils.resize();
  });
};

utils.resize = function() {
  var windowheight = window.innerheight;
  
    utils.centerBackground();

    this.ratio = $('#background img').width() / this.backgroundWidth; 
    
    if (this.mode == 'nordnung')
    {
      utils.nordnungScaleAction();    
    }
    else
    {
      utils.ordnungScaleAction();
    }  
};

utils.scaleLink = function(mapId, imgId, t, l, w, h, points) {
  var points = points.split(",");
  
  //alert(points);
  for(var j = 0; j < points.length; j++) {
    points[j] = Math.round(+points[j] * this.ratio);
  }
  
  $('#'+mapId).attr('coords', points.join(","));  
  
  $('#'+imgId).css('width', (w * this.ratio)+'px');
  //$('#'+imgId).css('height', (h * this.ratioX)+'px');
  $('#'+imgId).css('left', (this.backgroundLeftDelta + l * this.ratio)+'px');
  $('#'+imgId).css('top', (t * this.ratio)+'px');  
};

utils.scaleCanvas = function(id, t, l, w, h) {
  $('#'+id).css('width', (w * this.ratio)+'px');
  $('#'+id).css('height', (h * this.ratio)+'px');
  $('#'+id).css('left', (this.backgroundLeftDelta + l * this.ratio)+'px');
  $('#'+id).css('top', (t * this.ratio)+'px');    
};

utils.documentReadyModal = function(mode) {
  
  this.centerBackground();
  //alert($('#background img').width());
  if (mode == 'nordnung')
    $('#container_modal').click(function(e){ if(e.target != this) return; window.location.href = "glowna"; });
  else
    $('#container_modal').click(function(e){ if(e.target != this) return; window.location.href = "glowna_ordnung"; });
  
  utils.centerElement('#container_modal .about');
  utils.centerElement('#container_modal .logo_aha');
  utils.centerElement('#container_modal .news_text');
  utils.centerElement('#container_modal .contact_text');
  utils.centerElement('#container_modal .contact_form');
  utils.centerElement('#container_modal .gallery_all');
  utils.centerElement('#container_modal .gallery_image');
  utils.centerElement('#container_modal .about_person');
  utils.centerElement('#container_modal .effie');
  utils.centerElement('#container_modal .nyf');
  utils.centerElement('#container_modal .newspaper');
  
  this.ratio = $('#background img').width() / this.backgroundWidth; 
  this.scaleCanvas('logo_aha', 0, 695, 215, 80);
  
  //container modal width
  //var windowheight = window.innerheight;
  
  //alert($('#background img').width());
  //alert($('#container_modal').width());
  //alert(windowheight);
  
  if ($('#background img').width() > $('#container_modal').width())
    $('#container_modal').width($('#background img').width());
  
  //alert($('#background img').width());
  //this.centerBackground();
     
};

utils.centerElement = function(pattern) {
  var elem = $(pattern); 
  if (elem.length > 0)
  {
    utils.backgroundCountedWidth = $('#background img').width();
    
    var pos = this.backgroundLeftDelta + Math.round(utils.backgroundCountedWidth/2 - elem.width()/2); 
    elem.css('left', pos+'px');
  }
};

var mobile = { 
  image1: null,
  image2: null,
  mobileCanvas: null,
  currentImage: null
};

mobile.documentReady = function() {
  if (utils.mode == 'ordnung')
  {
    mobileCanvas = document.getElementById("mobile_canvas_or");
    
    if (mobileCanvas.getContext) 
    {  
      image1 = new Image();
      image1.onload = this.imageLoaded;
      image1.src = "apl/html/images/ordnung/nokia_screen_1.png";
      
      image2 = new Image();    
      image2.src = "apl/html/images/ordnung/nokia_screen_2.png";
      
      currentImage = 2;
    }    
  }    
  else
  {
    mobileCanvas = document.getElementById("mobile_canvas");
    
    if (mobileCanvas.getContext) 
    {  
      image1 = new Image();
      image1.onload = this.imageLoaded;
      image1.src = "apl/html/images/nichtordnung/nokia_screen_1.png";
      
      image2 = new Image();    
      image2.src = "apl/html/images/nichtordnung/nokia_screen_2.png";
      
      currentImage = 2;
    }       
  }
};

mobile.imageLoaded = function() {
  if (utils.mode == 'ordnung')
  {
    setInterval(mobile.changeImageOrdnung, 1500);
    mobile.changeImageOrdnung();    
  } 
  else
  {  
    setInterval(mobile.changeImage, 1500);
    mobile.changeImage();
  }
};

mobile.changeImage = function() {
  //alert('change image');
  var context = mobileCanvas.getContext('2d');
  
  context.clearRect(0, 0, mobileCanvas.width, mobileCanvas.height);
  
  context.save();

  if (currentImage == 2)
  {
    context.drawImage(image1, 0, 0);
    currentImage = 1;
  }
  else
  {
    context.drawImage(image2, 0, 0);
    currentImage = 2;
  }
  
  context.restore();

};

mobile.changeImageOrdnung = function() {
  var context = mobileCanvas.getContext('2d');

  context.clearRect(0, 0, mobileCanvas.width, mobileCanvas.height);
  
  context.save();
  
  //context.scale(utils.ratio, utils.ratio);

  if (currentImage == 2)
  {
    context.drawImage(image1, 0, 0);
    currentImage = 1;
  }
  else
  {
    context.drawImage(image2, 0, 0);
    currentImage = 2;
  }
  
  context.restore();
};

var pad = { 
  imagesList: ['slide1.png', 'slide2.png', 'slide3.png', 'slide3.png', 'slide4.png', 'slide5.png', 'slide6.png', 'slide7.png', 'slide8.png', 'slide3.png', 'slide3.png', 'slide9.png', 'slide10.png', 'slide11.png','slide12.png'],
  images: {},
  canvas: null,
  canvas2: null,
  currentImage: null,
  currentImage2: null,
  globalAlpha: 0  
};

pad.documentReady = function() {
  var imagesLoaded = 0;
  
  if (utils.mode == 'ordnung')
  {
    pad.canvas = document.getElementById("pad_canvas_or");
    pad.canvas2 = document.getElementById("pad_canvas2_or");
    pad.currentImage = 1;
    pad.currentImage2 = 0;
    
    if (pad.canvas.getContext) 
    {  
      for (var i = 0; i < this.imagesList.length; i++)
      {
        pad.images[i] = new Image();         
        pad.images[i].onload = function() {
          imagesLoaded++;
          //alert(imagesLoaded+' '+pad.imagesList.length);
          if (imagesLoaded >= pad.imagesList.length)
          {
            pad.imageLoaded();
          }
        };
        pad.images[i].src = "apl/html/images/ordnung/slides/"+pad.imagesList[i];
      }
    }
  }    
  else
  {
    pad.canvas = document.getElementById("pad_canvas");
    pad.canvas2 = document.getElementById("pad_canvas2");
    pad.currentImage = 1;
    pad.currentImage2 = 0;
    
    if (pad.canvas.getContext) 
    {  
      for (var i = 0; i < this.imagesList.length; i++)
      {
        pad.images[i] = new Image();         
        pad.images[i].onload = function() {
          imagesLoaded++;
          //alert(imagesLoaded+' '+pad.imagesList.length);
          if (imagesLoaded >= pad.imagesList.length)
          {
            pad.imageLoaded();
          }
        };
        pad.images[i].src = "apl/html/images/nichtordnung/slides/"+pad.imagesList[i];
      }
    }    
  }
};

pad.imageLoaded = function() { 
  if (utils.mode == 'ordnung')
  {
    setInterval(pad.changeImageOrdnung, 123);
    pad.changeImage(); 
  } 
  else
  {
    setInterval(pad.changeImage, 123);
    pad.changeImage();
  }
};

pad.changeImage = function() { 
  var context = pad.canvas.getContext('2d');
  var context2 = pad.canvas2.getContext('2d');
  
  var tmpAlpha = pad.globalAlpha > 1 ? 1 : pad.globalAlpha;
  
  context.clearRect(0, 0, pad.canvas.width, pad.canvas.height);
  context.globalAlpha = tmpAlpha;
  context.save();
  
  //context.scale(utils.ratio, utils.ratio);
  
  if (pad.currentImage >= pad.imagesList.length)
    pad.currentImage = 0;
  
  //alert(this.currentImage);
  
  context.drawImage(pad.images[pad.currentImage], 0, 0);
  
  /* if (pad.globalAlpha >= 1)
    pad.currentImage++;*/
  
  context.restore();
  
  context2.clearRect(0, 0, pad.canvas.width, pad.canvas.height);
  context2.globalAlpha = 1 - tmpAlpha;
  context2.save();
  
  if (pad.currentImage2 >= pad.imagesList.length)
    pad.currentImage2 = 0;
  
  context2.drawImage(pad.images[pad.currentImage2], 0, 0);
  
  /* if (pad.globalAlpha > 1)
    pad.currentImage2++;*/
  
  context2.restore();
  
  //console.log(tmpAlpha);
  
  pad.globalAlpha += 0.2;
  
  if (pad.globalAlpha >= 1.6)
  {
    pad.globalAlpha = 0;
    pad.currentImage++;
    pad.currentImage2++;
  }    
};

pad.changeImageOrdnung = function() { 
  var context = pad.canvas.getContext('2d');
  var context2 = pad.canvas2.getContext('2d');

  var tmpAlpha = pad.globalAlpha > 1 ? 1 : pad.globalAlpha;
  
  
  context.clearRect(0, 0, pad.canvas.width, pad.canvas.height);
  context.globalAlpha = tmpAlpha;
  context.save();
  
  //context.scale(utils.ratio, utils.ratio);
  
  if (pad.currentImage >= pad.imagesList.length)
    pad.currentImage = 0;
  
  //alert(this.currentImage);
  //console.log(pad.currentImage);
  context.drawImage(pad.images[pad.currentImage], 0, 0);
  
 /* if (pad.globalAlpha >= 1)
    pad.currentImage++;*/
  
  context.restore();
  
  context2.clearRect(0, 0, pad.canvas.width, pad.canvas.height);
  context2.globalAlpha = 1 - tmpAlpha;
  context2.save();
  
  if (pad.currentImage2 >= pad.imagesList.length)
    pad.currentImage2 = 0;

  context2.drawImage(pad.images[pad.currentImage2], 0, 0);
  
 /* if (pad.globalAlpha > 1)
    pad.currentImage2++;*/

  //console.log(tmpAlpha);
  
  context2.restore();
  
  pad.globalAlpha += 0.2;
  
  if (pad.globalAlpha >= 1.6)
  {
    pad.globalAlpha = 0;
    pad.currentImage++;
    pad.currentImage2++;
  }    
};

var iphone = { 
    imagesList: ['iphone_screen1.png', 'iphone_screen2.png', 'iphone_screen3.png'],
    images: {},
    canvas: null,
    currentImage: null
};

iphone.documentReady = function() {
  var imagesLoaded = 0;
  
  if (utils.mode == 'ordnung')
  {
    iphone.canvas = document.getElementById("iphone_canvas_or");
    iphone.currentImage = 0;
    
    if (iphone.canvas.getContext) 
    {  
      for (var i = 0; i < this.imagesList.length; i++)
      {
        iphone.images[i] = new Image();         
        iphone.images[i].onload = function() {
          imagesLoaded++;
          //alert(imagesLoaded+' '+pad.imagesList.length);
          if (imagesLoaded >= iphone.imagesList.length)
          {
            iphone.imageLoaded();
          }
        };
        iphone.images[i].src = "apl/html/images/ordnung/"+iphone.imagesList[i];
      }
    }
  }    
  else
  {
    iphone.canvas = document.getElementById("iphone_canvas");
    iphone.currentImage = 0;
    
    if (iphone.canvas.getContext) 
    {  
      for (var i = 0; i < this.imagesList.length; i++)
      {
        iphone.images[i] = new Image();         
        iphone.images[i].onload = function() {
          imagesLoaded++;
          //alert(imagesLoaded+' '+pad.imagesList.length);
          if (imagesLoaded >= iphone.imagesList.length)
          {
            iphone.imageLoaded();
          }
        };
        iphone.images[i].src = "apl/html/images/nichtordnung/"+iphone.imagesList[i];
      }
    }    
  }
};

iphone.imageLoaded = function() { 
  if (utils.mode == 'ordnung')
  {
    setInterval(iphone.changeImageOrdnung, 2500);
    iphone.changeImageOrdnung(); 
  } 
  else
  {
    setInterval(iphone.changeImage, 2500);
    iphone.changeImage();
  }
};

iphone.changeImageOrdnung = function() { 
  var context = iphone.canvas.getContext('2d');
  
  context.clearRect(0, 0, iphone.canvas.width, iphone.canvas.height);
  
  context.save();
  
  if (iphone.currentImage >= iphone.imagesList.length)
    iphone.currentImage = 0;
  
  context.drawImage(iphone.images[iphone.currentImage], 0, 0);
  
  context.restore();
  
  iphone.currentImage++;
};

iphone.changeImage = function() { 
  var context = iphone.canvas.getContext('2d');

  context.clearRect(0, 0, iphone.canvas.width, iphone.canvas.height);
  
  context.save();
  
  if (iphone.currentImage >= iphone.imagesList.length)
    iphone.currentImage = 0;
  
  context.drawImage(iphone.images[iphone.currentImage], 0, 0);
  
  context.restore();
  
  iphone.currentImage++;
};

var formUtils = {
  inputClick: function(obj, startText) {
    input = $(obj);
    if (input.val() == startText)
      input.val('');
  }, 
  inputOut: function(obj, startText) {
    input = $(obj);
    if (input.val() == '')
      input.val(startText);
  } 
};