var initFlash = new function()
{
  this.UseFlash = function()
  {
    if (0)
      return false;
    return swfobject.hasFlashPlayerVersion ("8");
  }
}

var browserInit = new function ()
{
  this.init=function(root)
  {
    if (navigator.appName == "Microsoft Internet Explorer")
    {
      var css=document.createElement('link');
      css.setAttribute("rel", "stylesheet")
      css.setAttribute("type","text/css");
      css.setAttribute("href", root + "IE.css");
      document.getElementsByTagName("head")[0].appendChild(css)

      var searchString = "MSIE";
      var dataString = navigator.appVersion;
      var index = dataString.indexOf(searchString);
      var version = 10;
      if (index != -1);
        version = parseFloat(dataString.substring(index+searchString.length+1));
      if (version < 7)
      {
        var css=document.createElement('link');
        css.setAttribute("rel", "stylesheet")
        css.setAttribute("type","text/css");
        css.setAttribute("href", root + "IE6.css");
        document.getElementsByTagName("head")[0].appendChild(css)
      } // if
    } // if
  }
}

var banner = new function ()
{
  this.InitFlash= function()
  {
    banner.resizeBanner ();
  }

  this.UseHTML5 = function (root)
  {
    var css=document.createElement('link');
    css.setAttribute("rel", "stylesheet")
    css.setAttribute("type","text/css");
    css.setAttribute("href", root + "banner.css");
    document.getElementsByTagName("head")[0].appendChild(css)

    var b = GetObjectByRef ("bannerOuter");
    b.removeChild (b.children[0]);
    this.frame = document.createElement('div');
    this.frame.className = 'BannerFrame';
    b.appendChild (this.frame);
    /*
    var xml=new XMLHttpRequest();
    xml.open("GET","banner.xml",false);
    xml.send();
    */
    var xml=$.ajax({type: "GET", url: "banner.xml", dataType: "xml", success: function(xml) {banner.parseXml (xml);}});
  }

  this.parseXml=function (xmlDoc)
  {
    //var xmlDoc=xml.responseXML;
    var jFrame = $('#bannerOuter').children ().first ();
    var jXml = $(xmlDoc).find ('Data').first ().children ();
    jXml.each(function(index, elem)
      {
        var child = $(this);
        if (child.prop ('tagName') == 'Lijn')
          jFrame.append ($('<div>', {'class': 'BannerItem', 'html' : child.text ()}));
      });
    this.shownItemIndex = -1;
    if (this.frame.children.length > 0)
      this.animateBanner ();
  }

  this.animateBanner=function ()
  {
    var child;
    if (this.frame.children.length == 1)
    {
      child = this.frame.children [0];
      switch (this.shownItemIndex)
      {
      case 0:
        setAnimation (child, "hideBannerItem 3s");
        child.style.left = "-100%";
        this.shownItemIndex = -1;
        setTimeout (function () {banner.animateBanner ();}, 3500);
        break;
      case -1:
        setAnimation (child, "showBannerItem 3s");
        child.style.left = "20px";
        this.shownItemIndex = 0;
        setTimeout (function () {banner.animateBanner ();}, 10000);
      } // case
    }
    else
    {
      if (this.shownItemIndex >= 0)
      {
        child = this.frame.children [this.shownItemIndex];
        setAnimation (child, "hideBannerItem 3s");
        child.style.left = "-100%";
      }
      if (++this.shownItemIndex >= this.frame.children.length)
        this.shownItemIndex = 0;
      child = this.frame.children [this.shownItemIndex];
      setAnimation (child, "showBannerItem 5s");
      child.style.left = "20px";
      setTimeout (function () {banner.animateBanner ();}, 10000);
    } // if
  }

  function setAnimation (object, animation)
  {
    //object.style.OAnimation = animation;
    object.style.WebkitAnimation = animation;
    //object.style.MozAnimation = animation;
    //object.style.msAnimation = animation;
    object.style.animation = animation;
  }

  this.resizeBanner = function ()
  {
    var width = GetObjectByRef  ("body").offsetWidth - 305;
    if (width < 500)
      width = 500;
    GetObjectByRef  ("bannerOuter").style.width = width +  "px";
  }

  this.init = function (root)
  {
    if (initFlash.UseFlash ())
      this.InitFlash (root)
    else
      this.UseHTML5 (root);
  }

} // banner

function Frame (frameIndex)
{
  this.frameIndex = frameIndex;
  this.images = new Array ();
  this.loaded = -1;
}

var animation = new function ()
{
  this.InitFlash= function()
  {
  }

  this.UseHTML5 = function (root)
  {
    var css=document.createElement('link');
    css.setAttribute("rel", "stylesheet")
    css.setAttribute("type","text/css");
    css.setAttribute("href", root + "animation.css");
    document.getElementsByTagName("head")[0].appendChild(css)

    var animationFrame = $("#Animation");
    animationFrame.children ().remove ();
    var frame = $('<div>', {'class': 'AnimationFrame'});
    animationFrame.append (frame);
    frame.append ($('<img>', {'class': 'ImgH', 'src' : 'Images/h.png', 'height': '382px'}));
    frame.append ($('<img>', {'class': 'ImgP', 'src' : 'Images/p.png', 'height': '382px'}));

    //GetObjectByRef ("Debug").innerHTML += "<br>showPhotos";
    setTimeout (function () {animation.showPhotos ();}, 4000);
  }

  this.showPhotos=function ()
  {
    this.rotateFrame = 0;
    this.rotateID = -1;
    var animationFrame = $("#Animation");
    animationFrame.children ().first ().hide ("slow");
    var frame = $('<div>', {'class': 'PhotoFrame', 'style': 'display:none'});
    animationFrame.append (frame);
    //var photoFrame = $('<img>', {'class': 'PhotoFrame', 'src' : 'Images/photoFrame.png', 'height': '514px', 'width': '815px'});
    //frame.append (photoFrame);
    var jCanvas = $('<canvas>', {'id': 'Photo1', 'class': 'Canvas'});
    jCanvas [0].width = '855';
    jCanvas [0].height = '514';
    frame.append (jCanvas);
    frame.show ("slow");

    this.L11 = 5;
    this.L12 = 230;
    this.L13 = 332;
    this.L22 = 450;
    this.L23 = 580;
    this.L31 = 88;
    this.L33 = 390;
    this.L43 = 790;
    this.L52 = 740;

    this.T11 = 5;
    this.T12 = 175;
    this.T13 = 248;
    this.T22 = 140;
    this.T33 = 319;
    this.T34 = 480;
    this.T41 = 100;

    this.cornerRadius = 15;

    this.frames = new Array ();
    var xml=$.ajax({type: "GET", url: "photos.php", dataType: "xml", success: function(xml) {animation.loadFrames (xml);}});
  }

  this.loadFrames = function (xmlDoc)
  {
    //var xmlDoc=xml.responseXML;
    var jXml = $(xmlDoc).find ('Data').first ().children ();
    jXml.each(function(index, elem)
      {
        var child = $(this);
        if (child.prop ('tagName').substr (0, 5) == 'Kader')
        {
          var frameIndex = parseInt (child.prop ('tagName').substr (5));
          if (frameIndex > 0)
          {
            var i = animation.frames.length;
            if (i == 0)
              i = 1;
            for (; i <= frameIndex; ++i)
              animation.frames [i] = new Frame (i);
            animation.loadPhotos (animation.frames [frameIndex], child);
          } // if
        } // if
      });
  }

  this.loadPhotos = function (frame, xmlFrame)
  {
    var photos = xmlFrame.children ();
    photos.each (function (index, elem)
    {
      var photo = $(this);
      if (photo.prop ('tagName') == 'Image')
      {
         var image = new Image ();
         image.frame = frame;
         image.onload = function () {animation.photoLoaded (this);};
         image.src = 'ImagesRaster/' + frame.frameIndex + '/' + photo.text ();
         frame.images.push (image);
      } // if
    });
  }

  this.photoLoaded = function (photo)
  {
    if (photo.frame.loaded < 0)
    {
      photo.frame.loaded = 0;
      this.drawImage (photo, 0.1);
    }
  }

  this.drawImage = function (imageObj, alpha)
  {
    var jCanvas = $('#Photo1');
    var canvas = jCanvas [0];
    var context = canvas.getContext('2d');
    var frameID = imageObj.frame.frameIndex;
    /*if (alpha == 0.1)
    {
      var d = new Date ();
      var s = "<br />" + d.toString () + " " + frameID + " " + this.rotateFrame + "[";
      var i;
      for (i = 1; i < 5; ++i)
        s += " " + this.frames [i].loaded;
      s += "]";
      GetObjectByRef ("Debug").innerHTML += s + " " + imageObj.src;
    }*/

    context.save();
    context.beginPath();
    this.createClip (context, frameID);
    context.lineWidth = 10;
    context.strokeStyle = '#BAB4B0';
    //context.stroke ();

    context.clip ();

    context.globalAlpha = alpha;
    try
    {
      context.drawImage(imageObj, this.ImageLeft(frameID), this.ImageTop (frameID));
    }
    catch (e)
    {
      //GetObjectByRef ("Debug").innerHTML += e.name + " " + e.message;
    }
    context.restore();

    context.globalAlpha = 1;
    //context.drawImage (this.frameImage, 0, 0);
    this.drawBorders (context);

    if (alpha < 1)
      setTimeout (function() {animation.drawImage (imageObj, alpha + 0.05);}, 150);
    else
    {
      var i;
      for (i = 1; i < animation.frames.length; ++i)
      {
        if (animation.frames [i].loaded < 0)
        {
          if (animation.frames [i].images.length > 0)
          {
            animation.frames [i].loaded = 0;
            //GetObjectByRef ("Debug").innerHTML += "<br>drawImage " + i + " " + 0;
            setTimeout (function() {animation.drawImage (animation.frames [i].images [0], 0.1);}, 150);
            return;
          } // if
        } // if
      } // for
      if (this.rotateID < 0)
      {
        //GetObjectByRef ("Debug").innerHTML += "<br>Start rotating";
        this.rotateID = setTimeout (function () {animation.rotateImage ();}, 5000);
      }
    } // if
  }

  this.rotateImage = function ()
  {
    if (++this.rotateFrame >= this.frames.length)
      this.rotateFrame = 1;
    ++this.frames [this.rotateFrame].loaded;
    if (this.frames [this.rotateFrame].loaded >= this.frames [this.rotateFrame].images.length)
      this.frames [this.rotateFrame].loaded = 0;
    //GetObjectByRef ("Debug").innerHTML += "<br >Load " + this.rotateFrame + " " + this.frames [this.rotateFrame].loaded;
    this.drawImage (this.frames [this.rotateFrame].images [this.frames [this.rotateFrame].loaded], 0.1);
    this.rotateID = -1;
  }

  this.drawBorders = function ()
  {
    var jCanvas = $('#Photo1');
    var canvas = jCanvas [0];
    var context = canvas.getContext('2d');

    context.save();
    context.beginPath();
    var frameID;
    for (frameID = 1; frameID <= 5; ++frameID)
      this.createClip (context, frameID);
    context.lineWidth = 10;
    var grad = context.createLinearGradient(50, 50, 500, 500);
    grad.addColorStop(0, "#7B6E67");
    grad.addColorStop(0.5, "#C1BBB7");
    grad.addColorStop(1, "#7B6E67");
    context.strokeStyle = grad;
    //context.strokeStyle = '#BAB4B0';
    context.stroke ();
    context.restore();
  }

  this.ImageLeft = function (frameID)
  {
    switch (frameID)
    {
    case 1: return this.L11;
    case 2: return this.L13;
    case 3: return this.L31;
    case 4: return this.L22;
    case 5: return this.L33;
    } // switch
  }

  this.ImageTop = function (frameID)
  {
    switch (frameID)
    {
    case 1: return this.T11;
    case 2: return this.T11;
    case 3: return this.T12;
    case 4: return this.T41;
    case 5: return this.T33;
    } // switch
  }

  this.arcTo = function (context, x1, y1, x2, y2, radius)
  {
    try
    {
      context.arcTo (x1, y1, x2, y2, radius); // does not exists in Opera
    }
    catch (e)
    {
      context.lineTo (x1, y1);
      context.lineTo (x2, y2);
    }
  }

  this.lineWithArcRT = function (context, x, y, dx, dy)
  {
    this.arcTo (context, x, y, x, y + this.cornerRadius, this.cornerRadius);
  }
  this.lineWithArcRB = function (context, x, y, dx, dy)
  {
    this.arcTo (context, x, y, x - this.cornerRadius, y, this.cornerRadius);
  }
  this.lineWithArcLT = function (context, x, y, dx, dy)
  {
    this.arcTo (context, x, y, x + this.cornerRadius, y, this.cornerRadius);
  }
  this.lineWithArcLB = function (context, x, y, dx, dy)
  {
    this.arcTo (context, x, y, x, y - this.cornerRadius, this.cornerRadius);
  }
  this.lineWithArcLTR = function (context, x, y, dx, dy)
  {
    this.arcTo (context, x, y, x, y + this.cornerRadius, this.cornerRadius);
  }
  this.lineWithArcRBR = function (context, x, y, dx, dy)
  {
    this.arcTo (context, x, y, x, y - this.cornerRadius, this.cornerRadius);
  }

  this.createClip = function (context, frameID)
  {
    switch (frameID)
    {
    case 1:
      context.moveTo(this.L11 + this.cornerRadius, this.T11);
      this.lineWithArcRT (context, this.L13, this.T11);
      this.lineWithArcRB (context, this.L13, this.T12);
      this.lineWithArcLTR (context, this.L12, this.T12);
      this.lineWithArcRB (context, this.L12, this.T13);
      this.lineWithArcLB (context, this.L11, this.T13);
      this.lineWithArcLT (context, this.L11, this.T11);
      break;

    case 2:
      context.moveTo(this.L13 + this.cornerRadius, this.T11);
      this.lineWithArcRT (context, this.L23, this.T11);
      this.lineWithArcRB (context, this.L23, this.T22);
      this.lineWithArcLTR (context, this.L22, this.T22);
      this.lineWithArcRB (context, this.L22, this.T12);
      this.lineWithArcLB (context, this.L13, this.T12);
      this.lineWithArcLT (context, this.L13, this.T11);
      break;

    case 3:
      context.moveTo(this.L31 + this.cornerRadius, this.T13);
      this.lineWithArcRBR (context, this.L12, this.T13);
      this.lineWithArcLT (context, this.L12, this.T12);
      this.lineWithArcRT (context, this.L22, this.T12);
      this.lineWithArcRB (context, this.L22, this.T33);
      this.lineWithArcLTR (context, this.L33, this.T33);
      this.lineWithArcRB (context, this.L33, this.T34);
      this.lineWithArcLB (context, this.L31, this.T34);
      this.lineWithArcLT (context, this.L31, this.T13);
      break;

    case 4:
      context.moveTo(this.L22 + this.cornerRadius, this.T22);
      this.lineWithArcRBR (context, this.L23, this.T22);
      this.lineWithArcLT (context, this.L23, this.T41);
      this.lineWithArcRT (context, this.L43, this.T41);
      this.lineWithArcRB (context, this.L43, this.T33);
      this.lineWithArcLB (context, this.L22, this.T33);
      this.lineWithArcLT (context, this.L22, this.T22);
      break;

    case 5:
      context.moveTo(this.L33 + this.cornerRadius, this.T33);
      this.lineWithArcRT (context, this.L52, this.T33);
      this.lineWithArcRB (context, this.L52, this.T34);
      this.lineWithArcLB (context, this.L33, this.T34);
      this.lineWithArcLT (context, this.L33, this.T33);
      break;
    } // switch
  }

  this.init = function (root)
  {
    if (initFlash.UseFlash ())
      this.InitFlash (root)
    else
      this.UseHTML5 (root);
  }

} // animation


function openPage (url, venster)
{
  if (arguments.length == 1)
    var target = '_self';
  else
    var target = venster;
  window.open(url, target);
}

function onBodyResize ()
{
  banner.resizeBanner ();
}