Script.include('utilities/overlay');

$(window).addEvent('domready', function(){
    initRightColumn();
    if( $('opdrachtstatusbox') ) {
        initInleveren();
    }
});

//var right_column_sizes = {
//    status: { visible: false },
//    nodig: { visible: false },
//    tryouts: { visible: false }
//};

var right_column_sizes = [];
var right_column_boxes = [];

function initRightColumn() {
    // Elke div met de class .right_column_box_content zal in een box aan de rechterkant worden gezet
    var contents = $$('.right_column_box_content');

	$each(contents, function(item) {
        // New box
		var newbox = $('right_column_box_template').clone().inject($('right_column_container'));
        item.inject(newbox);
        newbox.addClass('right_column_box_inserted');
        
        // Make visible
        newbox.removeClass('hidden')
        item.removeClass('hidden');

        // Remember coordinates
        var coordinates = newbox.getCoordinates( $('right_column_container') );
        var size = newbox.getComputedSize();
        newbox.store('position', { left: coordinates.left, top: coordinates.top, width: size.width, height: size.height } );
        newbox.store('size', { width: size.totalWidth, height: size.totalHeight } );
        right_column_boxes.push(newbox);
    });

    $each(right_column_boxes, function(item) {
        var position = $H(item.retrieve('position'));
        var size = item.retrieve('size');
        item.setStyles( position.combine( {position: 'absolute', margin: '0px' } ) );
    });

}

function initOpdracht() {

        $('opdrachtstatusbox').store('status', 'hidden');
        $('benodigdhedenbox').store('status', 'hidden');
        $('tryoutsbox').store('status', 'hidden');

        var opdrachtStatus = $$('.pagina .opdrachtstatus');
        if ((opdrachtStatus != null) && (opdrachtStatus.get('html') != '')) {
            $('opdrachtstatusbox-content').adopt(opdrachtStatus);

            $('opdrachtstatusbox').store('status', 'visible');
            $('opdrachtstatusbox').removeClass('hidden');
            opdrachtStatus.removeClass('hidden');

            var pos = $('opdrachtstatusbox').getCoordinates( $('right_column_container') );
            right_column_sizes.status = {
                pos: {top: pos.top, left: pos.left},
                dim: $('opdrachtstatusbox').getComputedSize(),
                visible: true
            };
            initInleveren();
        }

        var benodigdheden = $$('.pagina .benodigdheden');
        if ((benodigdheden != null) && (benodigdheden.get('html') != '')) {
            $('benodigdhedenbox-content').adopt(benodigdheden);

            $('benodigdhedenbox').store('status', 'visible');
            $('benodigdhedenbox').removeClass('hidden');
            benodigdheden.removeClass('hidden');

            var pos = $('benodigdhedenbox').getCoordinates( $('right_column_container') );
            right_column_sizes.nodig = {
                pos: {top: pos.top, left: pos.left},
                dim: $('benodigdhedenbox').getComputedSize(),
                visible: true
            };
        }

        var tryouts = $$('.pagina .tryouts');
        if ((tryouts != null) && (tryouts.get('html') != '')) {
            $('tryouts-content').adopt(tryouts);

            $('tryoutsbox').store('status', 'visible');
            $('tryoutsbox').removeClass('hidden');
            tryouts.removeClass('hidden');

            var pos = $('tryoutsbox').getCoordinates( $('right_column_container') );
            right_column_sizes.tryouts = {
                pos: {top: pos.top, left: pos.left},
                dim: $('tryoutsbox').getComputedSize(),
                visible: true
            };
        }

        if( right_column_sizes.status.visible ) {
            right_column_sizes.status.pos.top += 20;
            $('opdrachtstatusbox').setStyles( $H(right_column_sizes.status.pos).combine( {position: 'absolute'}) );
        }
        if( right_column_sizes.nodig.visible ) {
            if( right_column_sizes.status.visible ) {
                right_column_sizes.nodig.pos.top =
                    right_column_sizes.status.pos.top + right_column_sizes.status.dim.totalHeight + 20;
            } else {
                right_column_sizes.nodig.pos.top += 20;
            }
            $('benodigdhedenbox').setStyles( $H(right_column_sizes.nodig.pos).combine( {position: 'absolute'}) );
        }
        if( right_column_sizes.tryouts.visible ) {
            if( right_column_sizes.nodig.visible ) {
                right_column_sizes.tryouts.pos.top = right_column_sizes.nodig.pos.top + right_column_sizes.nodig.dim.totalHeight + 20;
            } else {
                if( right_column_sizes.status.visible ) {
                    right_column_sizes.tryouts.pos.top = right_column_sizes.status.pos.top + right_column_sizes.status.dim.totalHeight + 20;
                } else {
                    right_column_sizes.tryouts.pos.top += 20;
                }
            }
            $('tryoutsbox').setStyles( $H(right_column_sizes.tryouts.pos).combine( {position: 'absolute'}) );
        }
}

function initInleveren() {
        //$('showInleveren').setStyles({border: '1px solid #f00'});
        $('showInleveren').addEvent('click', function() {
            //$$('.pagina').loadU
            var pagina_id = $(this).getAttribute('pagina_id');
            
            my_overlay.load('html/inleveren/submit?id='+pagina_id);
            my_overlay.show();
        });
}

function moveRightColumn( top, height ) {
    // van top tot top+height moet het vrij zijn
    var new_top = 0;

    $each( right_column_boxes, function(item) {
        var position = item.retrieve('position');
        var size = item.retrieve('size');
        if (new_top) {
            item.morph( { top: new_top } );
            new_top += size.height + 20;
        } else if (position.top + size.height + 20 > top) {
            item.morph( { top: top + height + 20 } );
            new_top = top + height + 40 + size.height;
        }
    });

}

function moveRightColumnBack() {

    $each(right_column_boxes, function(item) {
        var position = item.retrieve('position');
        item.morph( position );
    });
}

var minhelp = 0;
var helpPaddingTop = 7;

function toggleHelp(id) {
	if(!minhelp) {
        $('helpbox').removeClass('hidden');
		var size = $('helpbox').getCoordinates( $('right_column_container') );
		minhelp = size.top + 20;
        $('helpbox').addClass('hidden');
        $('helpbox').setStyles( {position: 'absolute', top: minhelp} );
	}

	var helpButton = $(id+'-button');
	var helpBox = $('helpbox');
	
	var pos = helpButton.getCoordinates( $('right_column_container') );

//	position help...
	var top = Math.max( minhelp, pos.top - 3 );
	helpBox.setStyles( { top: top } );
	
//  position opdrachtstatusbox en benodigdhedenbox
//	var top = 
	
	
	if(helpBox.currentHelpId == id) {
		helpBox.toggleClass('hidden');
        moveRightColumnBack();
        helpBox.currentHelpId = -1;
	} else {
		$('helpbox-content').innerHTML = $(id).innerHTML;
		helpBox.currentHelpId = id;
		helpBox.setStyles({opacity:0}).removeClass('hidden').morph({opacity: 1});
        moveRightColumnBack();
        moveRightColumn( top, $('helpbox').getComputedSize().totalHeight );
	}
}

$(window).addEvent( 'domready', function() {
	$$('.slide').each( function( elm ) {
		elm.setStyles( { display: 'block' } ).slide('hide');
	} );
} );

function toggle( id ) {
	$(id).get('reveal').toggle(); //slide('toggle');
}