Demos = Class.create();
Demos.prototype = {
	controller: null,
	initialize: function(){
		this.initList();
		this.active = 0;
        this.oldActive = 0;
		this.demoBox = $('demo');
		this.listBox = $('demolist');
        this.allowClick = false;
	},
	initList: function(){
		new Ajax.Request('demos.json', { 
			method:'get' ,
			onSuccess: function(transport) {
                var json = transport.responseText.evalJSON();
                this.items = json.items;
                var hash = document.location.hash;
                var found = false;
                for (var i = 0; i < this.items.length; i++){
                    if (hash == this.items[i].hash){
                        this.active = i;
                        this.oldActive = i;
                        found = true;
                    }
                }
                if (found == false)
                document.location.hash = this.items[this.active].hash;
                this.initRender();	
            }.bind(this),
			onFailure: function() {
				window.status="Demo load failure";
				this.demoBox.innerHTML="Demo load failure";
			}.bind(this)
		});
	},
	initRender: function(){
        // build the menu
		var innerList = new Array();
		for (var i = 0; i < this.items.length; i++){
			var listItem = Builder.node('div', {'class':'listitem'},
				Builder.node('a', {'href' : this.items[i].hash, 'title' : this.items[i].title, 'id' : 'demo'+i}, 
				Builder.node('img', {'id': 'dimg'+i, 'src' : 'images/'+this.items[i].thumb, 'alt' : this.items[i].title}))
			);
			innerList.push(listItem);
		}
		this.listBox.appendChild(Builder.node('div', {'class':'innerlist', 'id':'innerlist'}, innerList));
		var targetWidth = 210 * this.items.length;
		this.innerlist = $('innerlist');
		var listItems = Element.childElements(this.innerlist);
		for (i = 0; i < this.items.length; i++){
			var thisDiv = Element.childElements(listItems[i]);
			thisDiv[0].observe('click', this.clickItem.bind(this));		
		}
        // activate it now
		this.markActive();
    
        // if it wider we need to show the arrows
		Element.setStyle(this.innerlist, {'width':targetWidth+'px'});
		if (targetWidth > 630){
			Element.setStyle(this.listBox, {'left':'0px'});
			Element.insert(this.listBox, {'before':Builder.node('div', {'class':'demobackward', 'id':'demobackward'}, 
				Builder.node('a', {'href':'javascript:LiveDemos.scrollBackward()'}, 
				Builder.node('img', {'src':'images/l.jpg', 'width':55, 'height':100, 'border':0, 'id':'backimage'})
			))});
			Element.insert(this.listBox, {'after':Builder.node('div', {'class':'demoforward', 'id':'demoforward'}, 
				Builder.node('a', {'href':'javascript:LiveDemos.scrollForward()'}, 
				Builder.node('img', {'src':'images/r.jpg', 'width':55, 'height':100, 'border':0, 'id':'forwardimage'})
			))});
			this.scrollable = true;
			Element.makePositioned(this.innerlist);
			var pos = Element.positionedOffset(this.innerlist);
			pos[0] = Math.max(pos[0] - (210 * this.active), (-210*this.items.length)+630);
			this.myMove = new Effect.Move(this.innerlist, {duration: 0.0, x: pos[0], y: pos[1], mode: 'absolute'});	
			setTimeout(this.disableMaxedArrows.bind(this), 25);		
		} else {
			var offset = Math.floor((630-targetWidth)/2)
			Element.setStyle(this.innerlist, {'padding-left':offset+'px'});
		}
        
        // begin with a clear demo
        this.clearDemo();
	},
	clickItem: function(event){
        if(this.allowClick){
            var ele = Event.element(event).identify();
            this.active = ele.substring(4);
            if (this.active != this.oldActive){
                this.oldActive = this.active;
                this.markActive();
                this.setDemo();
                this.allowClick = false;
            }
        }
	},
	scrollBackward: function(){
		var pos = Element.positionedOffset(this.innerlist);
		if (this.scrollable && pos[0] < 0){
			pos[0] = pos[0] + 210;
			this.myMove = new Effect.Move(this.innerlist, {duration: 0.5, x: pos[0], y: pos[1], mode: 'absolute'});
			this.scrollable = false;
			setTimeout(this.setScrollable.bind(this), 510);
		}
	},
	scrollForward: function(){
		var pos = Element.positionedOffset(this.innerlist);
		if (this.scrollable && pos[0] > (-210*this.items.length)+630){
			pos[0] = pos[0] - 210;
			this.myMove = new Effect.Move(this.innerlist, {duration: 0.5, x: pos[0], y: pos[1], mode: 'absolute'});
			this.scrollable = false;
			setTimeout(this.setScrollable.bind(this), 510);
		}
	},
	setScrollable: function(){
		this.scrollable = true;
		this.disableMaxedArrows();
	},
	disableMaxedArrows: function(){
		var pos = Element.positionedOffset(this.innerlist);
		if (pos[0] >= 0){
			$('backimage').setOpacity(0.2);	
		} else {
			$('backimage').setOpacity(1.0);
		}
		if (pos[0] <= (-210*this.items.length)+630){
			$('forwardimage').setOpacity(0.2);	
		} else {
			$('forwardimage').setOpacity(1.0);	
		}
	
	},
	setDemo : function(){
		this.mainFade = Effect.Fade(this.demoBox, {duration: 0.5, to:0.1});
		setTimeout(this.clearDemo.bind(this), 510);
	},
	clearDemo : function(){
        // clear what is there
		while (this.demoBox.firstChild)
            this.demoBox.removeChild(this.demoBox.firstChild);
		
        var thisItem = this.items[this.active];
       // var h = (typeof thisItem.playfull != "undefined" && thisItem.playfull)? 472 : 360;
        if (typeof thisItem.playfull == "undefined" || !thisItem.playfull)
        {
            // build the left div
            var leftDiv = Builder.node('div', {'class':'demoleft'});
            var innerLeft = Builder.node('div', {'style':'padding:10px'});
            leftDiv.appendChild(innerLeft);
            var title=Builder.node('h2');
            title.innerHTML=thisItem.title;
            var desc=Builder.node('p');
            desc.innerHTML=thisItem.text;
            this.demoBox.appendChild(leftDiv);
            innerLeft.appendChild(title);
            innerLeft.appendChild(desc);
            if (thisItem.secondary.length > 0){
                for (var i = 0; i < thisItem.secondary.length; i++){
                    // add a button for each secondary item
                    var navDown = Builder.node('div', {'class':'nav-down'});
                    var navLink = Builder.node('a', {'href':thisItem.secondary[i].url});
                    var navLeft = Builder.node('div', {'class':'nav-left'});
                    var navMain = Builder.node('div', {'class':'nav-main'});
                    navMain.innerHTML = thisItem.secondary[i].label;
                    var navRight = Builder.node('div', {'class':'nav-right'});
                    navDown.appendChild(navLink);
                    navLink.appendChild(navLeft);
                    navLink.appendChild(navMain);
                    navLink.appendChild(navRight);
                    innerLeft.appendChild(navDown);
                }
            }
        }
        if (typeof thisItem.playfull != "undefined" && thisItem.playfull)
            var rightDiv = Builder.node('div', {'class':'demoright', 'id':'demoright', 'style':'width:850px'});
        else
            var rightDiv = Builder.node('div', {'class':'demoright', 'id':'demoright'});
		this.demoBox.appendChild(rightDiv);
        this.mainFade = Effect.Fade(this.demoBox, {duration: 0.25, to:1.0});
		setTimeout(this.makeUnified.bind(this), 250);
		setTimeout(this.waitClick.bind(this), 500);
	},
	makeUnified : function(){
        var thisItem = this.items[this.active];
        var demoRight = $('demoright');
        var file = thisItem.primary;
        var w = (typeof thisItem.playfull != "undefined" && thisItem.playfull)? 840 : 620;
        var h = 349; //(typeof thisItem.playfull != "undefined" && thisItem.playfull)? 472 : 360;
        if (thisItem.type != 'u3d')
            demoRight.insert('<img src="'+file+'">');
        else
        {
            var unityPlayer = new Element('div');
            unityPlayer.id = 'unityPlayer';
            var missing = new Element('div');
            var link = new Element('a');
            link.href = 'http://unity3d.com/webplayer/';
            link.title = "Unity Web Player. Install Now!";
            missing.insert(link);
            var img = new Element('img');
            img.src = "http://webplayer.unity3d.com/installation/getunity.png";
            link.insert(img);
            unityPlayer.insert(missing);
            demoRight.insert(unityPlayer);
            if (typeof unityObject != "undefined") {
                unityObject.embedUnity("unityPlayer", file, w, h);
            }
            
        }
	},
    waitClick : function(){
        this.allowClick = true;
    },
	markActive : function(){
		var listItems = Element.childElements(this.innerlist);
		for (var i = 0; i < this.items.length; i++){
			if (i == this.active){
				listItems[i].childElements()[0].childElements()[0].setOpacity(0.5);
			} else {
				listItems[i].childElements()[0].childElements()[0].setOpacity(1.0);
			}	
		}
	}
}

Event.observe(window, 'load', function() {
	window.LiveDemos = new Demos();
}, false);