var image=null;
var size=null;
var cover=null;
var serial=null;
var cont=null;

window.addEvent("domready", function(){
    $$("a.imagelink").each(function(el){
        var vars = panels[el.id.toString()];
        var source = ROOT + 'images/static/' + vars.folder + '/' + vars.shape;

        el._cleanup=function (){
          image.remove();
          image=null;
          cover.remove();
          cover=null;
          serial.remove();
          serial=null;
          size.remove();
          size=null;
        }

        el.onclick=function(){

            cover=new Element("div");
            cover.setStyles({
                position:"absolute",
                left:0,
                top:0,
                opacity:0,
                backgroundColor:"#FFFFFF",
                width:"100%",
                height:window.getScrollHeight()
            });
            cover.injectInside(document.body);
            new Fx.Styles(cover).start({
                opacity:[0,.8]
            });

            cont=new Element("div");
            cont.setStyles({
                position:"absolute",
                left:'50%',
                width:'700px',
                marginLeft:'-350px',
                top:window.getHeight()/2+document.documentElement.scrollTop-200
            });
            cont.injectInside(document.body);

            image=new Element("img");
            image.setStyles({
                opacity:0,
                border:"solid 2px #333",
                width:"400px;"
            });
            image.fader=new Fx.Styles(image);
            image.onload=function(){
                new Fx.Styles(serial).start({
                    opacity:[0, 1]
                });
                this.fader.start({
                    opacity:[0,1]
                });
            }
            image.src=this.href;
            image.injectInside(cont);

            size=new Element("img");
            size.setStyles({
                opacity:0,
                border:"solid 2px #333",
                width:"200px",
                marginLeft:"50px"
            });
            size.fader=new Fx.Styles(size);
            size.onload=function(){
                this.fader.start({
                    opacity:[0,1]
                });
            }
            size.src=ROOT + 'images/static/' + vars.folder + '/' + vars.shape;
            size.injectInside(cont);

            serial=new Element("h1");
            serial.setStyles({
                width:"100%",
                textAlign:"center",
                color:"#000",
                opacity:0
            });
            serial.innerHTML=this.id + ' ' + vars.area + 'm²';
            serial.injectInside(cont);

            cover.onclick=function(){
              el._cleanup();
            }
            image.onclick=function(){
              el._cleanup();
            }

            return false;
        }
    });

    $$("div.holder a").each(function(el){
      var panel = $("panel");
      var size = $("size");
      var vars = panels[el.id.toString()];
      var source = ROOT + 'images/static/' + vars.folder + '/' + vars.shape;

      el.onmouseover = function(){
        panel.empty();
        size.empty();
        img = new Element('img', {id: 'panel-image', alt:'', src:source})
        img.injectInside(panel);
        size.innerHTML = 'Panel Size: ' + vars.area + 'm²';
      };
      el.onmouseout = function(){
        img.remove();
        panel.empty();
        size.empty();
      };
    });

});