var Portfolio = new Class({
  size: false,
  currentMedia: false,
  loadingImages: [],
  loadedImages: [],

  initialize: function()
  {
    window.addEvent("resize", function() { this.do(); }.bind(this));
    this.do();
  },

  do: function()
  {
    var url = "/var/boompje.jpg";
    var img = $("tempMain").getElement("img");
    if (img.getAttribute("src") != url) img.setAttribute("src",url);
    this.size = $(document.body).getSize();
    var styles = { "width": this.size.x, "height": this.size.y };
    $("tempMain").setStyles(styles);

    if (this.size.x / this.size.y > 16 / 9) {
      var newSize = (this.size.x*9)/16;
      img.setAttribute("width", this.size.x);
      img.setAttribute("height", newSize);
      layer.setStyle("margin-left",0);
      layer.setStyle("margin-top",-((newSize-this.size.y)/2));
    } else {
      var newSize = (this.size.y*16)/9;
      img.setAttribute("height", this.size.y);
      img.setAttribute("width", newSize);
      layer.setStyle("margin-top",0);
      layer.setStyle("margin-left",-((newSize-this.size.x)/2));
    }


  //  if ($("menu")) this.init();
  },

  init: function() 
  {
    var anchors = $("menu").getElements("a[href^=/portfolio]");

    anchors.each(function(anchor) {
      anchor.addEvent("click", function() {
        portfolio.load(this.getAttribute("href"));
        return false;
      });
    }.bind(this));

    this.refresh();
    window.addEvent("resize", function() { this.refresh(); }.bind(this));
  },

  refresh: function()
  {
    this.size = $(document.body).getSize();
    var styles = { "width": this.size.x, "height": this.size.y };
    $("background").setStyles(styles);
    this.checkLayers();
  },

  load: function (url)
  {
    var htmlRequest = new Request.JSON({
      "url": "/data"+url,
      "onSuccess": function(data) {
        this.show(data);
      }.bind(this)
    });
    htmlRequest.send();
  },

  mouseMove: function (e)
  {
    var event = new Event(e);
    if (!this.currentMedia) return;
    var media = this.currentMedia;

    var maxx = (window.getSize().x / 2);
    var maxy = (window.getSize().x / 2);

    if ($("background").getStyle("display") == "none") return;
    
    var layers = $("background").getElements("div[class^=layer]");

    if (media.overlay[0]) {
      layers[1].setStyles({
        "left": (maxx-event.client.x)/maxx*50,
        "top": (maxy-event.client.y)/maxy*50,
      });
    }
    
    if (media.overlay[1]) {
      layers[2].setStyles({
        "left": (maxx-event.client.x)/maxx*100,
        "top": (maxy-event.client.y)/maxy*100,
      });
    }
  },

  imageLoad: function(layer, duration)
  {
    this.loadingImages.push({
      "layer": layer,
      "duration": duration
    });
    if (this.loadingImages.length >= 3) {
      this.loadingImages.each(function (img) {
        this.imageCallback(img.layer, img.duration);
      }.bind(this));
      this.loadingImages = [];
    }
  },

  imageCallback: function (layer, duration)
  {
    layer.set('morph',{duration: duration, transition: Fx.Transitions.Sine.easeOut});
    layer.morph({ "left": 0 });
  },

  show: function (portfolio)
  {
    var media = portfolio.media[0];
    this.currentMedia = media;
  
    var layers = $("background").getElements("div[class^=layer]");

    this.layerImg(layers[0],media.image);
    if (media.overlay[0]) this.layerImg(layers[1],media.overlay[0].image);
    if (media.overlay[1]) this.layerImg(layers[2],media.overlay[1].image);

    layers.each(function( layer ) { layer.setStyle("left", this.size.x); }.bind(this));

    var layer = layers[0];
    var img = layer.getElement('img');

    img.removeEvents('load');
    if (this.loadedImages.indexOf(img.getAttribute('src')) >= 0) {
      this.imageLoad(layers[0],400);
    } else {
      img.addEvent('load',function () { 
        this.imageLoad(layers[0],400);
      }.bind(this));
      this.loadedImages.push(img.getAttribute('src'));
    }

    if (media.overlay[0]) {
      layer = layers[1];
      img = layer.getElement('img');
      img.removeEvents('load');
      if (this.loadedImages.indexOf(img.getAttribute('src')) >= 0) {
        this.imageLoad(layers[1],500);
      } else {
        img.addEvent('load',function () { 
          this.imageLoad(layers[1],500);
        }.bind(this));
        this.loadedImages.push(img.getAttribute('src'));
      }
    }

    if (media.overlay[1]) {
      layer = layers[2];
      img = layer.getElement('img');
      img.removeEvents('load');
      if (this.loadedImages.indexOf(img.getAttribute('src')) >= 0) {
        this.imageLoad(layers[2],600);
      } else {
        img.addEvent('load',function () { 
          this.imageLoad(layers[2],600);
        }.bind(this));
        this.loadedImages.push(img.getAttribute('src'));
      }

    }
    /*
    if (media.overlay[0]) {
      this.layerImg(layers[1],media.overlay[0].image);
      var ml = layers[1].getStyle("margin-left"); if (!ml) ml = 0; else ml = parseInt(ml,10);
      var mt = layers[1].getStyle("margin-top"); if (!mt) mt = 0; else mt = parseInt(mt,10);
      var dur = 1000 * parseInt(media.overlay[0].speed,10);

      layers[1].set('morph',{duration: dur, transition: Fx.Transitions.Sine.easeOut});
      layers[1].morph({
        "margin-left": ml+parseInt(media.overlay[0].x,10),
        "margin-top": mt+parseInt(media.overlay[0].y,10)
      });
    }
    if (media.overlay[1]) {
      this.layerImg(layers[2],media.overlay[1].image);
      var ml = layers[2].getStyle("margin-left"); if (!ml) ml = 0; else ml = parseInt(ml,10);
      var mt = layers[2].getStyle("margin-top"); if (!mt) mt = 0; else mt = parseInt(mt,10);
      var dur = 1000 * parseInt(media.overlay[1].speed,10);

      layers[2].set('morph',{duration: dur, transition: Fx.Transitions.Sine.easeOut});
      layers[2].morph({
        "margin-left": ml+parseInt(media.overlay[1].x,10),
        "margin-top": mt+parseInt(media.overlay[1].y,10)
      });
    }
    */

    $("background").setStyle("display","");
    $("background").getElements("img").setStyle("display","");
  },

  checkLayers: function ()
  {
    var sizeInfo = this.getSize();
    var size = sizeInfo.size;
    $("background").getElements("img").each(function (img) {
      var src = img.getAttribute("src");
      if (src.length <= 0 || !src.search(/portfolio/)) return;
      this.layerImg(img.getParent(), src.substring(src.length-4-32));
    }.bind(this));
  },

  layerImg: function (layer, imageName)
  {
    var sizeInfo = this.getSize();
    var size = sizeInfo.size;
    var url = "/var/portfolio/"+size+"/"+imageName;
    var img = layer.getElement("img");
    if (img.getAttribute("src") != url) img.setAttribute("src",url);

    if (this.size.x / this.size.y > 16 / 9) {
      var newSize = (this.size.x*9)/16;
      img.setAttribute("width", this.size.x);
      img.setAttribute("height", newSize);
      layer.setStyle("margin-left",0);
      layer.setStyle("margin-top",-((newSize-this.size.y)/2));
    } else {
      var newSize = (this.size.y*16)/9;
      img.setAttribute("height", this.size.y);
      img.setAttribute("width", newSize);
      layer.setStyle("margin-top",0);
      layer.setStyle("margin-left",-((newSize-this.size.x)/2));
    }
  },

  getSize: function ()
  {
    var x = this.size.x; 
    var y = this.size.y;
    var size = "";

    if (x > 1600 || y > 900) size = "1920x1080";
    else if (x > 1280 || y > 720) size = "1600x900";
    else if (x > 1024 || y > 576) size = "1280x720";
    else size = "1024x576";

    var parts = size.split("x");

    return { "size": size, "x": parts[0], "y": parts[1] };
  }
});

var portfolio = false;
window.addEvent("domready", function() { portfolio = new Portfolio(); });