Event.observe(window, 'load', function() {
	
    Strokes.initialize();
	//MainButtons.initialize();
	//SmallButtons.initialize();
	Logo.initialize();
	Footer.initialize();
	
	$('backgroundWrap').setOpacity(0);
	$('loader').remove();
	
    Strokes.displayAll();
    /*setTimeout(function() {
        MainButtons.displayAll();
    }, 2000);*/
});

Logo = {
	
	items: {
		'thinkcitrix': {
			visible: true
		},
		'benefits': {},
		'freedom': {},
		'green': {},
		'security': {}
	},
	
	initialize: function() {
		
		for (var subject in this.items) {
		
			var item = this.items[subject];
			var element = $('logo' + subject.capitalize());
			
			if (!item.visible) {
				element.hide();
			} else {
				this.currentLogo = item;
			}
			
			item.element = element;
		}
	},
	
	show: function(which) {
		
		var item = this.items[which];
		
		new Effect.BlindUp(this.currentLogo.element, {
			duration: 0.2,
			afterFinish: function() {
				new Effect.BlindDown(item.element, {
					duration: 0.2
				});
			}
		});
		
		this.currentLogo = item;
	}
};

MainButtons = {
    
    items: {
        'thinkcitrix': {},
        'partners': {}/*,
        'schedule': {}*/
    },
    
    initialize: function() {
        
        for (var itemName in this.items) {
            
            var item = this.items[itemName];
            item.element = $('btn' + itemName.capitalize());
            
            item.element.setStyle({
                right: -(item.element.offsetWidth)+'px',
                width: '1px',
                height: '1px'
            });
        }
    },
	
    displayAll: function() {

		var i = 1;
		
        for (var itemName in this.items) {
            this.displayButton(itemName, (i++)*0.1);
        }
    },
    
    displayButton: function(itemName, delay) {
        
        var item = this.items[itemName];
        
		new Effect.Morph(item.element, {
			delay: delay, 
			style: 'right: 0; width: 204px; height: 29px;',
			duration: 0.4
		});
    },
	
    hideAll: function() {

		var i = 1;
		
        for (var itemName in this.items) {
            this.hideButton(itemName, -(i * 50), (i++)*0.1);
        }
    },
    
    hideButton: function(itemName, top, delay) {
        
        var item = this.items[itemName];
        
		new Effect.Morph(item.element, {
			delay: delay, 
			style: 'top: '+top+'px; opacity: 0;',
			duration: 0.4,
			afterFinish: function() { item.element.hide(); }
		});
    }
};

Footer = {
	
	initialize: function() {
		this.element = $('footer');
	},
	
	display: function() {
		
		new Effect.Morph(this.element, {
			style: 'bottom: 0px',
			duration: 0.4
		});
	}
};

Strokes = {

    items: {
        'thinkcitrix': {
            leftBlock: {},
            rightBlock: {}
        },
        'benefits': {
            button: {
                start: -150,
                end: 598
            },
            image: {
                top: -22
            },
            leftBlock: {},
            rightBlock: {}
        },
        'freedom': {
            button: {
                start: 915,
                end: 418
            },
            image: {
                top: -70
            },
            leftBlock: {},
            rightBlock: {}
        },
        'green': {
            button: {
                start: 915,
                end: 254
            },
            image: {
                top: -140
            },
            leftBlock: {},
            rightBlock: {}
        },
        'security': {
            button: {
                start: 915,
                end: 511
            },
            image: {
                top: 0
            },
            leftBlock: {},
            rightBlock: {}
        }
    },
    
    initialize: function() {
        
        for (var subject in this.items) {

			var item		= this.items[subject];

            item.element             = $('stroke'+subject.capitalize());
            if (item.button) {
                item.button.element  = item.element.getElementsBySelector('div.button')[0];
            }
            if (item.image) {
                item.image.element       = item.element.getElementsBySelector('div.background img')[0];
            }
            item.leftBlock.element   = item.element.getElementsBySelector('div.leftblock')[0];
            item.rightBlock.element  = item.element.getElementsBySelector('div.rightblock')[0];
            
        // Alle elementen binnen de item goed zetten
            
			if (item.button) {
                item.button.element.style.left = item.button.start+'px';
			    item.element.setOpacity(0);
            } else {
                item.element.hide();
            }
            if (item.image) {
                item.image.element.style.top = item.image.top+'px';
            }
            item.leftBlock.element.hide();
            item.rightBlock.element.hide();
        }
        
    },
    
    displayAll: function() {
        
		var i = 1;
		
        for (var subject in this.items) {
            if (this.items[subject].button) {
                this.displayStroke(subject, (i++)*0.2);
            }
        }
    },
	
	displayStroke: function(which, delay) {
		
		var item = this.items[which];
        
		new Effect.Morph(item.element, {
			delay: delay, 
			style: 'opacity: 1',
			afterFinish: function() {
				
				new Effect.Morph(item.button.element, {
					style: 'left: '+item.button.end+'px;'
				});
			}
		});
	},
	
	swapSubject: function(to) {
        
		if (!this.expanded) {
			return this.expand(to);
		}
		
        if (this.expanding || this.swapping || to == this.currentSubject) {
            return false;
        }
        
        this.swapping = true;
        
        var currentItem = this.items[this.currentSubject];
        var item        = this.items[to];
        
        if (!currentItem || !to) {
            return false;
        }
	    
	// Eerst moeten de blokken van de huidige item verdwijnen
	
        var blockEffects = [
            new Effect.BlindUp(currentItem.leftBlock.element, {sync: true}),
            new Effect.BlindUp(currentItem.rightBlock.element, {sync: true})
        ];
        
        new Effect.Parallel(blockEffects, {
            duration: 1,
            afterFinish: function() {
	    
	        // Als de blokken verdwenen zijn moeten de achtergrond en de strook verdwijnen
        	
	            var hideEffects = [
	                new Effect.Morph(currentItem.element, {sync: true, style: 'top: 130px; height: 0px;'}),
	                new Effect.Morph('backgroundWrap', {sync: true, style: 'opacity: 0'})
	            ];
    	    
                new Effect.Parallel(hideEffects, {
                    duration: 1,
                    afterFinish: function() {
                    
                        $(document.body)
                                .removeClassName(this.currentSubject)
                                .addClassName(to);
                                        
                        item.element
                                .show()
                                .setOpacity(0);
        	    
                    // De uit te klappen item moet uitklappen infaden en uitklappen

                        var expandEffects = [
                            new Effect.Morph(item.element, {sync: true, style: 'opacity: 1; top: 260px; height: 300px;'}),
                            new Effect.Morph('backgroundWrap', {sync: true, style: 'opacity: 1'})
                        ];
                        
                        if (item.image) {
                            expandEffects.push(new Effect.Morph(item.image.element, {sync: true, style: 'top: 0px;'}));
                        }
                        
                        Logo.show(to);
                        
                        new Effect.Parallel(expandEffects, {
                            duration: 1,
                            afterFinish: function() {
        
                            // Na het infaden moeten de twee blokken tevoorschijn komen
                            
                                var blockEffects = [
                                    new Effect.BlindDown(item.leftBlock.element, {sync: true}),
                                    new Effect.BlindDown(item.rightBlock.element, {sync: true})
                                ];
                            
                                new Effect.Parallel(blockEffects, {
                                    duration: 1,
                                    afterFinish: function() {
                                        
                                        this.currentSubject = to;
                                        this.swapping = false;
                                        
                                    }.bind(this)
                                });
                                
                            }.bind(this)
                        });
                    }.bind(this)
                });
            }.bind(this)
        });
        
	},

    expand: function(which) {
        
        if (this.expanded) {
            return false;
        }
        
        this.expanded = true;
        this.expanding = true;
        
	// Er moet een array samengesteld worden met alle items die verborgen moeten worden
		
        var itemsToHide = [];
        for (var subject in this.items) {
            if (subject != which) {
                itemsToHide.push(this.items[subject]);
            }
        }
        
    // De te verbergen items kunnen niet alle items zijn
    
        if (itemsToHide.length == this.items.length) {
            return false;
        }
		
		var item = this.items[which];
        $(document.body).addClassName(which);
        this.currentSubject = which;
    
    // De te verbergen item moeten gelijktijdig uitfaden
        
        var hideEffects = [];
        itemsToHide.each(function(itemToHide) {
            hideEffects.push(new Effect.BlindUp(itemToHide.element, {sync: true}));
            if (itemToHide.button) {
                hideEffects.push(new Effect.BlindUp(itemToHide.button.element, {sync: true}));
            }
        });
        
        //MainButtons.hideAll();
        
        new Effect.Parallel(hideEffects, {
            duration: 1,
            afterFinish: function() {
        
            // De uit te klappen item moet uitklappen en zijn knop moet gelijktijdig uitfaden

                var expandEffects = [
                    new Effect.Morph(item.element, {sync: true, style: 'top: 260px; opacity: 1; height: 300px;'}),
                    new Effect.Morph('backgroundWrap', {sync: true, style: 'opacity: 1'})
                ];
                if (item.button && item.button.element) {
                    expandEffects.push(new Effect.Shrink(item.button.element, {sync: true}));
                }
                if (item.image && item.image.element) {
                    expandEffects.push(new Effect.Morph(item.image.element, {sync: true, style: 'top: 0px;'}));
                }
				
				//SmallButtons.displayAll();
				Footer.display();
				Logo.show(which);
            	
            	if (!item.element.visible()) {
            	    item.element.setOpacity(0);
            	    item.element.show();
            	}
            	
                new Effect.Parallel(expandEffects, {
                    duration: 1,
                    afterFinish: function() {
        
                    // Na het infaden moeten de twee blokken tevoorschijn komen
                    
                        var blockEffects = [
                            new Effect.BlindDown(item.leftBlock.element, {sync: true}),
                            new Effect.BlindDown(item.rightBlock.element, {sync: true})
                        ];
                    
                        new Effect.Parallel(blockEffects, {
                            duration: 1,
                            afterFinish: function() {
                                this.expanding = false;
                            }.bind(this)
                        });
                        
                    }.bind(this)
                });
                
            }.bind(this)
        });
    }

};