var AWBlock = new Class({
    //sub elements
    element: null,
    heading: null,
    content: null,
    extra: null,
    name: null,

    //dragging
    drag: null,

    initialize: function(name){
        this.element = $('block-' + name);
        this.heading = $('heading-' + name);
        this.content = $('content-' + name); 
        this.extra = $$('#extra-' + name)[0];
        this.name = 'name';
        

        this.enableDrag();

        this.content.addEvent('mousedown', Manager.detachPanner);
        if(this.extra)
            this.extra.addEvent('mousedown', Manager.detachPanner);
        this.element.addEvent('mouseenter', function(elem){ this.addClass('hover'); });
        this.element.addEvent('mouseleave', function(){ this.removeClass('hover'); });
    },

    enableDrag: function(){
        this.drag = new Drag(this.element, {
                                handle: this.heading,
                                onBeforeStart: this.startDragging,
                                onComplete: this.stopDragging,
                                onCancel: this.stopDragging
                            });

        this.heading.store('drag', this.drag);
    },
    startDragging: function(elem){ 
        // detach the browser panner
        Manager.detachPanner();
        Manager.removeMores(elem.id.replace('block-', ''));

        // add dragging class to the element
        elem.addClass('dragging');

        // move it up the layer!
        elem.style.zIndex = Manager.zIndex++;
    },
    stopDragging: function(elem){
        // remove the dragging class
        elem.removeClass('dragging');

        // remove the dragging class of the upper parent if any
        if(Manager.upperParent != null){
            Manager.upperParent.removeClass('dragging');
            Manager.upperParent = null;
        }
    },
    // return position to the center of the element relative to 'canvas'
    scrollInfo: function(){
        var position = this.element.getPosition($('canvas'));
        var size = this.content.getSize();

        return {x: position.x + size.x / 2, y: position.y + size.y / 2 };
    },
    moveToFront: function(){
        this.element.style.zIndex = Manager.zIndex++;
    }
});

Manager = {
    // initialize blocks
    blocks: {},

    more: {},

    // panner
    browserPanner: null,
    zIndex: 100,    
    initPanner: function(name){ 
        this.browserPanner = new Drag(name, {
    		'style': false,
    		'invert': true,
    		'modifiers': {
                'x': 'scrollLeft',
                'y': 'scrollTop'
    		},
    		onBeforeStart: Manager.startPanning,
            onComplete: Manager.stopPanning, 
		    onCancel: Manager.stopPanning
        });
        $(name).store('drag', this.browserPanner);
    },
    startPanning: function(elem){
        elem.addClass('draggingbrowser');
        Manager.removeMores('');
    },
    stopPanning: function(elem){
		elem.removeClass('draggingbrowser');

        // remove the dragging class of the upper parent if any
        if(Manager.upperParent != null){
            Manager.upperParent.removeClass('dragging');
            Manager.upperParent = null;
        }
    },
    detachPanner: function(){
        if(Manager.browserPanner)
            Manager.browserPanner.detach();
    },
    attachPanner: function(){
        if(Manager.browserPanner)
            Manager.browserPanner.attach();
    },
    
    // make an element DOM transparent for draggable objects
    upperParent: null,
    lookingThrough: false,
    dragTransparent: function(evt){
        // prevent looking through multiple elements at once (otherwise it will fail)
        if(Manager.lookingThrough)
            return;
        Manager.lookingThrough = true;

        // magic!
        Manager.setVisibility('hidden');
        var clickedElement = document.elementFromPoint(evt.client.x, evt.client.y);
        Manager.setVisibility('visible');
   
        // Opera sometimes selects the textnode, not the element
        if (clickedElement.nodeType == 3)
            clickedElement = clickedElement.parentNode;

        // If we register a click on the canvas, we'll pan :)
        if(clickedElement.id == "canvas")
		    clickedElement = $('browser');

        clickedElement = $(clickedElement);
        // start the dragging
        if(clickedElement.retrieve('drag'))
	    {
            Manager.upperParent = this;
    		
            this.addClass('dragging');
    		
            clickedElement.focus();
    		clickedElement.retrieve('drag').start(evt);
	    }

        // ok, the rest can start looking through again!
        Manager.lookingThrough = false;
    },
    // DIRTY! but hey, it works.. for now..
    setVisibility: function(set){
        if($('footer') != null){
            $('footer').style.visibility = set;
        }
        $('footer-underlay').style.visibility = set;
        $('footer-overlay').style.visibility = set;
        $('flamingo').style.visibility = set;
    },
    
    // wink!
    flamingoWink: function(){
        $('flamingo-wink').style.visibility = 'visible';
        Manager.flamingoUnWink.delay(200);
    },
    flamingoUnWink: function(){
        $('flamingo-wink').style.visibility = 'hidden';
        Manager.flamingoWink.delay($random(16000, 29000));
    },

    // Scroll to an element
    scrollTo: function(elem){
        var scrollInfo = elem.scrollInfo();

        //TODO: get this info fixed on resize? > test
        var browserInfo = $('browser').getSize();

        // move it up the layer!
        elem.moveToFront(); 

        // Scroll to the coordinates!
        var scrollFx = new Fx.Scroll($('browser')).start(scrollInfo.x - browserInfo.x / 2, scrollInfo.y - browserInfo.y / 2);

    },

    // Get an element next to me
    flyOver: function(to, target){
        Manager.blocks[target].element.style.zIndex = Manager.zIndex++;
        var moveFx = new Fx.Move(Manager.blocks[target].element, { 
                offset: Manager.blocks[to].element.getSize(), 
                relativeTo: Manager.blocks[to].element
            });
        moveFx.start();
    },

    // Check the form
    checkForm: function(name) {
        var namefield = 'tnaam';
        var mailfield = 'tmail';

        if(name == 'contact')
        {
            var namefield = 'naam';
            var mailfield = 'mail';
        } 

        var fout = false;
        if($(namefield).value.indexOf(' ') == -1)
        {
            $(namefield).addClass('fout');
            fout = true;
        } else {
            $(namefield).removeClass('fout');
        }

        var email = $(mailfield).value;
        if(email.indexOf('@') == -1 || email.indexOf('.') == -1 || email.length < 8)
        {
            $(mailfield).addClass('fout');
            fout = true;
        } else {
            $(mailfield).removeClass('fout');
        }

        if(!fout)
        {
            if(name == 'contact')
            {
                var myRequest = new Request({url: 'contact'});
                myRequest.send({
                    method: 'post',
                    data: 'naam=' + $(namefield).value + '&email=' + email + '&bericht=' + $('text').value
                });
            
                $(namefield).value = '';
                $(mailfield).value = '';
                $('text').value = '';
            } else if(name == 'ticket') {
                var myRequest = new Request.HTML({url: 'kaarten',
                    onComplete: function(a,b,h,c){ $('content-tickets').set('html', h); }
                        });
                myRequest.send({
                    method: 'post',
                    data: 'naam=' + $(namefield).value + '&email=' + email + '&aantal=' + $('taantal').value
                });
 
            }
        }

        return false;
    },

    // Expand the more info thingy
    expandMore: function(name, info){
        $('extra-' + name).load('info/' + name + '/' + info);
        
        $('extra-' + name + '-wrapper').tween('width', '370');
        Manager.more[name] = $('extra-' + name + '-wrapper');
    },

    // Remove the expanded 'more' thingies 
    removeMores: function(my){
        for(name in Manager.more)
        {
            if(name != my)
                Manager.more[name].tween('width', '0');
        }
    }
}
window.addEvent('domready', function() {
    // Add render engine name as a class to the body tag
	$(document.body).addClass(Browser.Engine.name);

    // Init the panner!
    Manager.initPanner('browser');

    // Init the blocks!
    var blocks = ['bandcontest', 'contact', 'locatie', 'tickets', 'informatie', 'geschiedenis', 'programma', 'bands', 'sponsoring'];
    for(var i = 0; i < blocks.length; i++)
        Manager.blocks[blocks[i]] = new AWBlock(blocks[i]);

    // Init the navigation buttons!
    var navigation = ['contact', 'locatie', 'informatie', 'geschiedenis', 'programma', 'bands', 'tickets', 'sponsoring']; 
    for(var i = 0; i < navigation.length; i++)
    {
        $('wijs-' + navigation[i]).addEvent('click', function(){ Manager.removeMores(''); Manager.scrollTo(Manager.blocks[this.id.replace('wijs-', '')]); });
    }

    // Make elements click through for draggable elements
    $('flamingo').addEvent('mousedown', Manager.dragTransparent);
    $('footer-overlay').addEvent('mousedown', Manager.dragTransparent);

    // Always re-attach the panner on mouse up
    document.addEvent('mouseup', Manager.attachPanner);

    // Let's wink! ;)
    Manager.flamingoWink.delay($random(2000, 6000));

    // Load gmap
    window.addEvent('domready', loadMap);
});

function test(a){
    $('extra-tickets-wrapper').tween('width', '370');
}

function loadMap(){
    var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(51.996534,4.370445), 14); 

    var lati = 51.996534;
    var longi = 4.370445;
    var descr = '<strong>Lijm &amp; Cultuur</strong>';

    var point = new GLatLng(lati, longi);
    var marker = new GMarker(point);
    GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(descr);
    });
    map.addOverlay(marker);
}
// DEBUG
if(typeof console == 'undefined')
{
    console = {
        "log": function(){}
    }
}