var MainLoad = Class.create({
    initialize: function(){
        new Demo();
    }
});
var Demo = Class.create({
    initialize: function(){
        this.bindLinks();
        var demos;
        var retrieved = false;
    },
    bindLinks: function(){
        if ($('retrieveDemos')) {
            var func = this.retrieveDemoObject.bind(this);
            $('retrieveDemos').observe('click', func, true);
        }
    },
    retrieveDemoObject: function(){
        if (!this.retrieved) {
            var func = this.buildDataObject.bind(this);
            var obj = {};
            obj.newType = 'Demo';
            obj.newMethod = 'retrieveDemos';
            ARRM.jsonRequest(obj, func);
        }
        else {
            this.buildDemos(this.demos);
        }
    },
    buildDataObject: function(obj){
        this.retrieved = true;
        this.demos = obj;
        this.buildDemos(this.demos);
    },
    buildDemos: function(obj){
        var lengthObj = obj.video.length;
        var mainDiv = new Element('div', {
            id: 'demosContainer'
        });
        var func = this.close.bind(this);
        var a = new Element('a', {
            href: "javascript: void(0);",
            title: 'sluiten'
        }).observe('click', func, false);
        var img = new Element('img', {
            src: "/img/close.gif",
            alt: "sluiten"
        }).setStyle("border: 0px;").addClassName('go_link');
        a.update(img);
        mainDiv.update(a);
        var demoDiv = new Element('div', {
            id: "demos"
        });
        var contentClassDiv = new Element('div', {
            id: "capture"
        }).addClassName('"content');
        var f = this.buildVideoPlayer(obj.video[1]);
        contentClassDiv.insert(f.h); //.insert(f.p);
        demoDiv.insert(contentClassDiv).insert(new Element('div').addClassName("divider"));
        var contentDiv = new Element('div').addClassName("content");
		demoDiv.insert(f.videoPlayerDiv);
        for (var x = 0; x < lengthObj; x++) {
            contentDiv.insert(this.buildVideoFragment(obj.video[x]));
        }
        demoDiv.insert(contentDiv).insert(new Element('div').addClassName("spacer"));
        mainDiv.insert(demoDiv);
        this.insertDemos(mainDiv);

 

    },
    buildVideoPlayer: function(obj){

        var videoScreenDiv = new Element('div', {
            id: "videoScreen"
        }).update();
        /*
		img = new Element('img', {
            src: '/img/stop.gif',
            alt: "stop"
        }).setStyle("border: 0px;");
        a = new Element('a', {
            href: "javascript:void(0);"
        }).update(img);
        var videoControlsDiv = new Element('div', {
            id: "videoControls"
        }).update(a);
        img = new Element('img', {
            src: '/img/play.gif',
            alt: "play"
        }).setStyle("border: 0px;");
        a = new Element('a', {
            href: "javascript:void(0);"
        }).update(img);
        */
//        videoControlsDiv.insert();
        var videoPlayerDiv = new Element('div', {
            id: "videoPlayer"
        }).update(videoScreenDiv);
  //      videoPlayerDiv.insert(videoControlsDiv);
        img = new Element('img', {
            src: '/img/videoThumb.jpg',
            alt: "play demo"
        }).setStyle("border: 0px;").addClassName("go_image");
        a = new Element('a', {
            href: "javascript:void(0);",
            title: "play demo"
        }).update(img);
        var p = new Element('p').update(a);
        p.insert(obj.description);
        var h = new Element('h1').update("Het Elux installatieconcept - Aansluitgemak in je hele huis!");
        obj = {};
        obj.videoPlayerDiv = videoPlayerDiv;
        obj.p = p;
        obj.h = h;
        return obj;
    },
    buildVideoFragment: function(obj){
        var div = new Element('div').addClassName("videoThumb");
        var img = new Element('img', {
            src: obj.imgLink,
            alt: "play demo"
        }).setStyle("border: 0px;").addClassName("go_image");
        var func = this.playVideo.bind(this, obj);
        var a = new Element('a', {
            href: "javascript:void(0);",
            title: "play demo"
        }).observe('click', func, true).update(img);
        var h = new Element('h3').update(obj.name);
        var p = new Element('p').update(obj.description);
        return div.update(a).insert(h).insert(p);
    },
    playVideo: function(obj){
        var x = this.buildVideoPlayer(obj);
	    //$('capture').show().update(x.videoPlayerDiv).insert(x.h).insert(x.p);
		this.swfObject = new SWFObject("/swf/demoPlayer.swf", "demoPlayer", "260", "212", "8", "#FFFFFF");
		this.swfObject.addParam("wmode", "opaque");
		this.swfObject.addVariable("videoPath", obj.videoLink);
		this.swfObject.write("videoScreen");
		$('videoScreen').show();
    },
	
    insertDemos: function(obj){
       this.ProtoLightbox = new ProtoLightbox(obj);
    },
    close: function(){
        this.ProtoLightbox.close();
    }
});
var ProtoLightbox = Class.create({
    initialize: function(obj){
        this.obj = obj;
        this.buildFloater();
    },
    buildFloater: function(){
        if (!$("floatDiv")) {
            this.createOverlay();
            this.w = new Element('div', {
                id: 'floatWrap'
            });
            document.body.appendChild(this.w);
            this.d = new Element("div", {
                id: "floatDiv"
            }).hide();
            $('floatWrap').update(this.d);
            this.appear();
        }
    },
    appear: function(){
        if (this.d) {
            $('floatDiv').update(this.obj);
            new Effect.Appear($('floatDiv'), {
                duration: 0.3
            });
        }
    },
    createOverlay: function(){
        this.o = new Element('div', {
            id: 'overlay'
        }).hide();
        document.body.appendChild(this.o);
        new Effect.Appear($('overlay'), {
            duration: 0.3,
            from: 0.0,
            to: 0.8
        });
        this.o.observe('click', (function(){
            this.close();
        }).bind(this));
    },
    close: function(){
        new Effect.Fade($('overlay'), {
            duration: 0.2,
            afterFinish: function(effect){
                $('overlay').remove();
            }
        });
        $('floatWrap').remove();
    }
});