/*********************************************************
 * 
 * Deze code is met veel plezier geschreven, getest en met trots 
 * opgeleverd door Aron Rotteveel van Vije Internetproducties.
 * Informatie:
 * 
 * Opdrachtgever: Hof Communicatie
 * Laatste update: 30 januari 2007
 * 
 * Voor vragen kunt u contact opnemen per e-mail (aron@vije.nl) of per telefoon (074-2673400).
 * Meer informatie over Vije Internetproducties vindt u op http://www.vije.nl
 *
 *********************************************************/

//////////////////////////////////////////////////////////////
// MENU HANDLER
//////////////////////////////////////////////////////////////

var MenuHandler = Class.create();
var menuCurrentlyScaling = false;
var currentlyCollapsing = false;
var expandTimeout = false;

MenuHandler.prototype = {
    
    initialize: function() {
        
        this.menu = $('menulist');
        this.text = $('innertext');
        this.image = $('topimagecontent');
        this.textcontainer = $('textcontainer');
        
        if (!this.menu) return false;
    
        var links = this.menu.getElementsByTagName('li');
        var numlinks = links.length;
    
        for (var i = 0; i < numlinks; i++) {
        
            var link = links[i].childNodes[0];
            
            if (!link || link.tagName.toLowerCase() != 'a') {
                continue;
            }
        
            Event.observe(link, 'click', this.changeMenuItem.bindAsEventListener(this));
                        
        }
        
    },
    
    changeMenuItem: function(e) {
        
        if (!e) var e = window.event;       
        
        var link = Event.element(e);        

        if (menuCurrentlyScaling || Element.hasClassName(link, 'active')) {
            Event.stop(e);
            return false;
        }
        
        menuCurrentlyScaling = true;
        
        var activelink = document.getElementsByClassName('active', this.menu)[0];
        Element.removeClassName(activelink, 'active');
        link.addClassName('active');
        
        this.current = link.innerHTML.replace(' ','_');
        
        var page = link.href.split('/');
        page = page[page.length-1];
        
		if (page=='') {
			page = 'home.php';
		}
        
        new Ajax.Request('/teksten/'+page, {
            method: 'get',
            onLoading: this.collapseText.bindAsEventListener(this),
            onComplete: this.expandText.bindAsEventListener(this)
        });
        
        Event.stop(e);
      
        
    },
    
    collapseText: function(e) {
        
        currentlyCollapsing = true;
        
        var effects = [];
        var width = this.textcontainer.offsetWidth;
        
        if (width == 850) {
            
            var percentage = 25;
            
        } else if (width == 1000) {
            
            var percentage = 21;
            
        } else {
            
            var percentage = 35;
            
        }
        
        effects.push(new Effect.Fade(this.image, { duration: 1 }));
        
        effects.push(
            new Effect.Fade(this.text, { 
                from: 1,
                to: 0,
                duration: 1,
                afterFinish: (function() {
                    this.text.innerHTML = '';
                    new Effect.Scale(this.textcontainer, percentage, { 
                        scaleY: false,
                        scaleMode: { originalWidth: width, originalHeight: 400 },
                        scaleContent: false,
                        duration: 1,
                        fps: 100,
                        afterFinish: function() {
                            currentlyCollapsing = false;
                        }
                    });
                }).bind(this)
            })
        );
        
        new Effect.Parallel(effects);
    },
    
    expandText: function(e) {
        
        /*
        if (expandTimeout && !currentlyCollapsing) {
            clearInterval(expandTimeout);
        }
        
        
        if (currentlyCollapsing) {
            
            expandTimeout = setTimeout((function() {
                this.expandText(e)
            }).bind(this), 50);
            
            return true;
        }
        */
        
        var response = e.responseText;
        var effects = [];
        
        switch (this.current) {

            case 'visie':
                var orig = 540;
                var percentage = 21;
            break;
            
            case 'contact':
                var orig = 540;
                var percentage = 25;
            break;
            
            case 'client_experience':
                var orig = 850;
                var percentage = 25;
            break;
            
            case 'hofmakerij':
                var orig = 680;
                var percentage = 21;
            break;
            
            default:
                var orig = 550;
                var percentage = 35;
            break;
            
        }
        
        var preloader = new Image();
        preloader.onload = (function() {
            
            this.image.src = '/img/top/'+this.current.toLowerCase()+'.jpg';
            
            effects.push(new Effect.Appear(this.image, { 
                duration: 1
            }));            
            
            effects.push(new Effect.Appear(this.text, { duration: 1}));
            
            new Effect.Parallel(effects, { 
                afterFinish: function() {
                    menuCurrentlyScaling = false;
                }
            });
            
        }).bind(this);    

        new Effect.Scale(this.textcontainer, 100, { 
            scaleY: false,
            scaleFrom: percentage,
            delay: 1,
            fps: 50,
            duration: 1,
            scaleContent: false,
            scaleMode: { originalWidth: orig, originalHeight: 400 },
            afterFinish: (function() {
                
                this.text.innerHTML = response;                                
                
                preloader.src = '/img/top/'+this.current.toLowerCase()+'.jpg';
                
            }).bind(this)
        });
        
    }
    
}

function showTopImage(image, element) {
    
    var clickedlink = element.href;
    var current = $('topimagecontent');
    var link = current.src;
    var src = link.split('/');
    src = src[src.length-1];
    
    if (src == image) return false;
    
   
    var preloader = new Image();
    preloader.onload = function() {
        current.src = '/img/hofmakerij/'+image;        
        Element.setOpacity(current, 1);
        Element.show(current);
    }
    
    Effect.Fade(current, {
    	afterFinish: function() {
	    	preloader.src = '/img/hofmakerij/'+image;    
    	}
    });
    
    
    

            
}

var currentlyToggledFields = [];
var currentlyActiveLinks = [];
function showFields(which, columnIndex, link) {
    
    which = $(which);
    
    if (!which) return false;
    
    changeActiveLink(columnIndex, link);
    
    if (currentlyToggledFields[columnIndex]) {
        Element.hide(currentlyToggledFields[columnIndex]);
        currentlyToggledFields[columnIndex] = false;
    }
    
    if (columnIndex == 2 && currentlyToggledFields[3]) {
    	Element.hide(currentlyToggledFields[3]);
    }
    
    Element.show(which);
    currentlyToggledFields[columnIndex] = which;
    
    
}

function changeActiveLink(columnIndex, link) {
    if (currentlyActiveLinks[columnIndex]) {
        Element.removeClassName(currentlyActiveLinks[columnIndex], 'activelink');
    }
    
    Element.addClassName(link, 'activelink');
    currentlyActiveLinks[columnIndex] = link;
}

var ervaringToggled;
function toggleErvaring(term, internal) {
    
    var link = term;
    
    if (ervaringToggled && !internal) {
        toggleErvaring(ervaringToggled, true);
        if (ervaringToggled == term) {
            ervaringToggled = false;
            return false;
        }
    }
   
    if (!internal) {
        ervaringToggled = term;
    } 
    
    while (term = term.nextSibling) {
        if (!term.tagName) continue;
        
        if (term.tagName.toLowerCase() == 'div' && term.className == 'definitions') {
            term.style.top = 25;
            term.style.left = 0;
            changeActiveLink(2, link);        
            Element.toggle(term);            
            break;
        }
        
    }
    
            
    

    
}

//////////////////////////////////////////////////////////////
// EVENT HANDLERS
//////////////////////////////////////////////////////////////

Event.observe(window, 'load', function() {
	new MenuHandler();
});



/************************ Portfolio **************************************/

var currentportfolioitem = false;
var currentportfolioparent = false;
var portfolio_usercontrol = false;
var portfolio_attached = false;

function PortfolioOpen() {
	
	portfolio_usercontrol=false;

	Effect.Appear('overlay', {
		duration:0.7,
		from: 0,
		to: 0.6
	});

	Effect.Appear('portfolio_box', {
		duration:0.7,
		from: 0,
		to: 1,
		queue: 'end'
	});

	attachPortfolio();

}

function PortfolioClose() {
	clearInterval();
	
	Effect.Appear('portfolio_box', {
		duration:0.7,
		from: 1,
		to: 0
	});

	Effect.Appear('overlay', {
		duration:0.7,
		from: 0.6,
		to: 0,
		queue: 'end',
		afterFinish: function() {
			$('overlay').hide();
			$('portfolio_box').hide();
		}
	});
}

function attachPortfolio() {
	if (portfolio_attached==true) {
		return;
	}
	portfolio_attached = true;
	if ($('portfolio_navigation')) {
		var portfolio = $('portfolio_navigation').getElementsByTagName('li');
        for (var i = 0; i < portfolio.length; i++) {

        	if (!currentportfolioitem) {
        		setPortfolioItem(portfolio[i], true);
        	}
        	Event.observe(portfolio[i], 'mouseover', function(e){
        		if (Event.element(e) != currentportfolioitem && Event.element(e) != currentportfolioparent) {
	        		Event.element(e).addClassName('active');
        		}
        	});
        	
        	Event.observe(portfolio[i], 'mouseout', function(e){
        		if (Event.element(e) != currentportfolioitem && Event.element(e) != currentportfolioparent) {
        			Event.element(e).removeClassName('active');
        		}
        	});

        	Event.observe(portfolio[i], 'click', function(e){
        		portfolio_usercontrol = true;
        		setPortfolioItem(Event.element(e));
        	});
        }
	}
	launchAutoPortfolio();
} 

function setPortfolioItem(e, fast) {
	
	// Classname 'active' verwijderen bij alle items
	var portfolio = $('portfolio_navigation').getElementsByTagName('li');
	var child_detector = false;
    for (var i = 0; i < portfolio.length; i++) {
    	$(portfolio[i]).removeClassName('active');
    	if (portfolio[i]==e && $(e).hasClassName('parent')) {
			child_detector = true;
    	} else if ($(portfolio[i]).hasClassName('parent')) {
			child_detector = false;    			
    	} else if (child_detector && $(portfolio[i]).hasClassName('child')) {
    		setPortfolioItem(portfolio[i]);
    		return;
    	}
    }

	currentportfolioitem = e;

	// Huidige item active class geven	
	$(currentportfolioitem).addClassName('active');
	
	// Wanneer child -> parent active class geven
	if ($(currentportfolioitem).hasClassName('child')) {
		var parent_detector = false;
		var portfolio = $('portfolio_navigation').getElementsByTagName('li');
        for (var i = portfolio.length-1; i >= 0; i--) {
        	if (portfolio[i] == currentportfolioitem) {
        	 	if (portfolio[i].hasClassName('child')) {
					parent_detector = true;
        	 	}
        	} else if (parent_detector && portfolio[i].hasClassName('parent')) {
        		$(portfolio[i]).addClassName('active');
        		currentportfolioparent = portfolio[i]; 
        		parent_detector = false;
        		continue;
        	}
        }
	}

	// childs inklappen
	var portfolio = $('portfolio_navigation').getElementsByTagName('li');
	var inside_parent = false;
    for (var i = 0; i < portfolio.length; i++) {
    	if (portfolio[i].hasClassName('active') && portfolio[i].hasClassName('parent')) {
    		inside_parent = true;
    	} else if (portfolio[i].hasClassName('parent')) {
			inside_parent = false;
		}    	
    	
		if ($(portfolio[i]).hasClassName('child')) {
			if (inside_parent) {
				$(portfolio[i]).show();
			} else {
				$(portfolio[i]).hide();
			}
		}
    }

	// Content laden en met een subtiele fade weergeven
	portfolio_id = currentportfolioitem.id;
	new Ajax.Request('/portfolio/'+portfolio_id+'/screen.html', {
        method: 'get',
        onLoading: function(response){},
        onComplete: function(response){
        	if (fast) {
       			$('portfolio_currentitem').innerHTML = response.responseText;
        	} else {
	        	Effect.Fade('portfolio_currentitem', {
	        		from: 1.0,
	        		to: 0.0,
	        		duration: 0.4,
	        		afterFinish: function() {
	        			$('portfolio_currentitem').innerHTML = response.responseText;
	        		}
	        	});
	        	Effect.Appear('portfolio_currentitem', {
	        		from: 0.0,
	        		to: 1.0,
	        		duration: 0.4,
	        		queue: 'end'
	        	});
        	}
        }
    });
}

function launchAutoPortfolio() {
	var switchinterval = 7; // in seconds

	new PeriodicalExecuter(function(pe) {
		if (portfolio_usercontrol) {
			return;
		}

		if (!currentportfolioitem) {
			var portfolio = $('portfolio_navigation').getElementsByTagName('li');
	        for (var i = 0; i < portfolio.length; i++) {
	        	if (!currentportfolioitem) {
	        		setPortfolioItem(portfolio[i], true);
	        	}
	        }
		}
		var portfolio = $('portfolio_navigation').getElementsByTagName('li');
        for (var i = 0; i < portfolio.length; i++) {
        	if (currentportfolioitem==portfolio[i]) {

        		if (i+1 == portfolio.length) {
        			nextitem = portfolio[0];
        		} else {
        			nextitem = portfolio[i+1];
        		}
        		setPortfolioItem(nextitem);
        		return;
        	}
        }		
	}, switchinterval );
}