/*
 * Object submenuKnop en methodes
 */
function submenuKnop(figuur, naam, xpos){
    this.figuur = figuur;
    this.text = naam;
    this.id = 'subknop' + naam;
    this.label = $('div#' + naam + ' h2').text();
    this.xpos = xpos;
    this.obj = document.getElementById(this.id);
}

submenuKnop.prototype = {
    topspace: 0,
    maak: function($parent){
        var instance = this;
        oDiv = document.createElement("div");
        oDiv.id = this.id;
        oDiv.setAttribute('class', 'submenuBtn');
        oDiv.onclick = function(){
            $('div#text').scrollTo($('#' + this.id.replace('subknop', '')), 750, {
                easing: 'elasout',
                margin: true
            })
        }
        oDiv.onmouseover = function(){
            $(this).children('img').attr('src', 'images/' + instance.figuur + '.png');
            $('#' + this.id + ' div').stop().animate({
		opacity: 1.0,
        },{
		duration: 500,
		queue: false,
	})};
        oDiv.onmouseout = function(){
            $(this).children('img').attr('src', 'images/' + instance.figuur + 'bw.png')
            $('#' + this.id + ' div').stop().animate({
		opacity: 0.32,
        },{
		duration: 300,
	})};
        oImg = document.createElement("img");
        oImg.setAttribute("src", 'images/' + this.figuur + 'bw.png');
        oImg.setAttribute("alt", this.label);
        oImg.setAttribute("title", this.label);
        
        oLabel = document.createElement("div");
        oLabel.innerHTML = this.label;
		  
        oLabel.style.top = (this.topspace + 40) + 'px';
        oLabel.style.left = (this.xpos + (70 - 150) / 2) + 'px';

        oDiv.appendChild(oLabel);
        oDiv.appendChild(oImg);
        $parent.append(oDiv);
    },
    toon: function(){
        var instance = this;
	$('#' + this.id + ' div').stop().show().animate({
 		opacity: 0.32,
	}, {
		duration: 800,
		queue:false,
        });
        
        $('#' + this.id + ' img').stop().show().animate({
            width: '65px',
	    height: '50px',
            opacity: 1.0,
            path: new $.path.bezier({
                start: {
                    x: $.random(this.xpos - 180, this.xpos - 10),
                    y: $.random(0, 80),
                    angle: $.random(0, 360)
                },
                end: {
                    x: this.xpos,
                    y: this.topspace,
                    angle: $.random(-125, 35),
                    length: $.random(0, 25) / 30
                }
            })
        }, {
	    duration: 450,
            queue: false,
        });
    },
    verberg: function(){
	$('#' + this.id + ' div').hide().stop();
        $('#' + this.id + ' img').hide().stop().animate({
 	    width: '8px',
            height: '8px',
            opacity: 0.0,
            path: new $.path.bezier({
                start: {
                    x: this.xpos,
                    y: this.topspace,
                    angle: $.random(-125, 25)
                },
                end: {
                    x: $.random(this.xpos + 10, this.xpos + 250),
                    y: $.random(0, 125),
                    angle: $.random(0, 360),
                    length: $.random(0, 25) / 30
                }
            })
        }, {
            duration: 1100,
	    queue:false,
        });
    }
}