/**
 * Basic JavaScript of APit
 * @author Douwe Homans
 * @description Super Cool!
 */


//General
var debugContent	=	"";
var bodyContent		=	"";
var apitContent     =   null;
var apitvars        =   {};
//var apit            = {};

	
// domReady function adds all kinds of event-handlers to the dom.
// It should be run after initial loading of the site, and also every time the dom gets altered
	
function domReady(){
	
    // Remove debug-info from DOM and store in variable debugContent if it exists
    if ($$('div.apit_debug_temp')) {
        $$('div.apit_debug_temp').each(function(item){
            debugContent += item.get('html');
            item.dispose();
        });
        $$('div.apit_debug_temp').dispose();
    }

    // Remove apit-alerts from DOM and alert them
    if ($$('.apit_alert')) {
        $$('.apit_alert').each(function(item){
	    //alert(item.get('html'));
            apitAlert(item.dispose());
        });
    }

    // Remove all existing event handlers
    $$('*').removeEvents();

    document.addEvent('keydown', function(event){
        // Show apit if the user hits control shift q
        if (event.key == 'q' && event.control && event.shift) {
            toggleapit();
            return false;
        }

	//tijdelijk apitalert
	if (event.key == 'a' && event.control && event.shift){
            apitAlert("<h1>Titel</h1><p>Dit is het verhaal dat ik aan het <i>Schrijven</i> ben!a</p>");
            return false;
        }
});
        

	
    // if apit was active on last page (before browser refresh) make sure it is also active on this page!
    if (Cookie.read('apitActive') == 'true') {
        toggleapit();
        // toggleapit() will fire domaltered!
    }
    else {
        // Fire the domaltered event
        window.fireEvent('domaltered');
    }

}


// apitCSS function
function apitCSS(value) {

    // if there is not a apit.css yet, add it through assets
    if(!$$('link[title=apit]').getLast()) {
        var apitCSS = new Asset.css(SITE_ROOT + 'apit_public/css/apit.css',{
            'title': 'apit'
        });
    }

    // Go through all <link> tags and disable/enable the correct ones
    $$('link').each(function(item,index){

        if (value) {
            if (item.get('title') == 'apit') {
                item.set('disabled',false);
            }
            else {
                item.set('disabled',true);
            }
        }
        else {
            if (item.get('title') == 'apit') {
                item.set('disabled',true);
            }
            else {
                item.set('disabled',false);
            }
        }

    });
}


// toggle apit function
function toggleapit(){
	
    // if apit is visible, deactivate
    if($('apit')){
        deactivateAPit();
        // Alter cookie value for apitActive
        Cookie.write('apitActive', 'false',{
            path: SITE_ROOT
        });
    }
    else {
        // If apitContent has been set, reactivate APit interface without Ajax request
        if (apitContent) {
            activateAPit();
            Cookie.write('apitActive', 'true',{
                path: SITE_ROOT
            });
            return;
        }
		// Otherwise, get APit interface from server
        var HTMLRequest = new Request.HTML({
            url:'?',
            method:'post'
        });
        HTMLRequest.addEvent('success',function(responseTree, responseElements, responseHTML, responseJavaScript){
            // Always set cookie
            Cookie.write('apitActive', 'true',{
                path: SITE_ROOT
            });

            // if the user is not allowed to see apit, responseHTML will be "noapit"
            if (responseHTML == "noapit") {
                // Show login form overlay and return
                showApitLoginForm();                
                return;
            }
            // Otherwise, responseHTML contains content from apit
                
            // Get responseElements
            var elements = responseElements;
            // Quick fix: debug content should be stripped before injecting apit into body
            stripDebugContent(elements);

            if (!elements[0]) {
                alert('geen response element met APit interface!');
                return;
            }
                        
            // Set apitContent with first reponse element
            apitContent = elements[0];
            // activate APit interface
            activateAPit();

            // Debug content must be injected back into HTML after stripping it from response content
            injectDebugContent();					
        });

        // Send HTML request
        HTMLRequest.send('apit=true');

		
    }

}

function activateAPit() {
    // Toggle APit CSS files
    apitCSS(true);

    // Store the body as it is known in the body variable
    // This way we can place it back after we make apit invisible again
    bodyContent = $(document.body).get('html');
    // Empty HTML body
    $(document.body).empty();
    // replace site contents with apitContent
    apitContent.inject(document.body);

    // Add any additional JS files needed for APit interface
    addApitCoreJS();

    // Fire dom altered event
    window.fireEvent('domaltered');
    if (apitvars.mod == 'debug') {
        injectDebugContent();
    }
    
    // Check if cookie is set with last active apitmod
//    var mod = Cookie.read('apitvars.mod');
//    if (mod) {
//        //    $('apit_menu').getElement('li[apitmod=' + mod + ']').fireEvent('click');
//    }

}

function deactivateAPit() {
    // If login screen was shown
    if ($('apit') && $('apit').hasClass('login')) {
        $('apit').dispose();
        return;
    }

    // Toggle apit CSS files to false
    apitCSS(false);
    // Remove apit div from HTML body and save to variable
    apitContent = $('apit').dispose();
    // Remove APit-specific javascript
    removeApitCoreJS();

//    addDebugMessage('apit geunset');

    // Re-insert stored HTML body content into body
    $(document.body).set('html',bodyContent);

    // Fire dom altered event
    window.fireEvent('domaltered');
}

function doHtmlRequest(url,method,data,replace){
    var HTMLRequest = new Request.HTML({
        'url':url,
        'method':method
    });
    var ajaxLoader = new Element('div',{
        'class': 'ajax-loading',
        'text': 'ajax loading...'
    });

    HTMLRequest.addEvent('success',function(responseTree, responseElements, responseHTML, responseJavaScript){
        ifajaxLoader.dispose();
        // strip debug content
        responseElements.each(function(item,index,array){
            if (item.hasClass('apit_debug_temp')) {
                debugContent+=item.get('html');
                item.destroy();
            }
        });
        if (!responseElements[0].getProperty('area')) {
            alert('responseHTML:'+ responseHTML);
            return;           
        }
        //alert('responseHTML:'+ responseHTML);
        responseElements[0].replaces(replace);

        // let the window know that the dom has been altered, so it is able to alter eventHandlers
        window.fireEvent('domaltered');
    });
    document.body.adopt(ajaxLoader);
    HTMLRequest.send(data);
}

function getAreaPath(el) {
    el = $(el);
    if (!el) {
        return null;
    }
    var area = el.getProperty('area');
    var context = [];
    if (area) {
        context.unshift(area);
    }
    var start = el;
    while (start) {
        var parent = start.getParent();
        if (!parent) {
            start = false;
            break;
        }
        area = parent.getProperty('area');
        if (area) {
            context.unshift(area);
        }
        start = parent;
    }
    return context.join('.');
}

function getArea(el) {
    el = $(el);
    if (!el) {
        return false;
    }

    var start = el;
    while (start) {
        var parent = start.getParent();
        if (!parent) {
            start = false;
            break;
        }
        var areavalue = parent.getProperty('area');
        if (areavalue) {
            return parent;
        }
        start = parent;
    }
    return null;
}


function getJSONForElement(elname,data,callback){
    // Look for context (area.area.area)
    var el = $(elname);
    if (!el) {
        alert('getJSONForElement: empty element (' + elname + '), could not be found');
        return false;
    }

    var area = getAreaPath(el);

    var jsonRequest = new Request.JSON({
        'url':'?',
        'method':'post'
    });

    jsonRequest.addEvent('success',function(responseJSON,responseText){
        //    addDebugMessage('JSON response: '+responseJSON+responseText);
        callback(responseJSON);
    });

    // Convert data to string if not already done by caller
    var q = null;
    if ($type(data) == 'object') {
        q = new Hash(data);
        if(Cookie.read('apitActive')=='true'){
            q.include('apit','true');
            q.include('mod',Cookie.read('apitvars.mod'));
        }
        q.include('area',area);
        // Add element data as query string
        q = q.toQueryString()+'&'+$(elname).toQueryString();
        //     addDebugMessage('JSON request data: '+q);
    }
    else {
        q = data;
    }
    //   alert('request data: ' + q);
    //   data += '&area=' + context.join('.');
    return jsonRequest.send(q);

}

function replaceElement(elname,data,url) {
    // Look for context (area.area.area)
    var el = $(elname);
    if (!el) {
        alert('replaceElement: empty element (' + elname + '), could not be replaced');
        return false;
    }

    var area = getAreaPath(el);
    //   alert('element context: ' + context.join('.'));
    //   return;

    if (!url) {
        url = '?';
    }

    // Call Request.HTML
    var HTMLRequest = new Request.HTML({
        'url': url,
        'method':'post',
        link:'chain'
    });
    var ajaxLoader = new Element('div',{
        'class': 'ajax-loading',
        'text': 'Loading...'
    });
    // Replace el on success
    HTMLRequest.addEvent('success',function(responseTree, responseElements, responseHTML, responseJavaScript){
        ajaxLoader.dispose();
        // strip debug content
        stripDebugContent(responseElements);

	// strip alert content
        stripAlertContent(responseElements);

        if (responseElements[0].get('tag') == 'br') {
            alert('responseHTML:'+ responseHTML);
            return;
        }
     //   alert('responseHTML:'+ responseHTML);
        //      addDebugMessage(responseElements[0].get('html'));

        responseElements[0].replaces(el);

        // Remove all event handlers from all elements
        $$('*').removeEvents();
        // fire domaltered event to (re)add event handlers
        window.fireEvent('domaltered');
    });
    document.body.adopt(ajaxLoader);

    // Convert data to string if not already done by caller
    var q = null;
    if ($type(data) == 'object') {
        q = new Hash(data);
        if(Cookie.read('apitActive')=='true'){
            q.include('apit','true');
            q.include('mod',apitvars.mod);
        }
        q.include('area',area);
        q = q.toQueryString();
        
    }
    else {
        q = data;
        q += '&area='+area;
    }
    //   alert('request data: ' + q);
    //   data += '&area=' + context.join('.');
    return HTMLRequest.send(q);
}


function addDebugMessage(text) {
    var box = new Element('div',{
        'class':'messagebox'
    });
    var header = new Element('div',{
        'class':'messageheader'
    });
    header.set('text','JavaScript message');

    var message = new Element('div',{
        'class':'message'
    });

    message.set('text',text);

    box.adopt(header);
    box.adopt(message);

    var dummy = new Element('div');
    dummy.adopt(box);

    debugContent += dummy.get('html');
}

function stripDebugContent(elements) {
    elements.each(function(item,index,array){
        if (item.hasClass('apit_debug_temp')) {
            debugContent+=item.get('html');
            item.destroy();
        }
    });
    return;
    
    if (elements.hasClass('apit_debug_temp')) {
        debugContent += elements.get('html');
        elements.dispose();
        return;
    }
    elements.getElements('div.apit_debug_temp').each(function(item){
        debugContent += item.get('html');
        item.dispose();
    });

}

function stripAlertContent(elements) {
    elements.each(function(item,index,array){
        if (item.hasClass('apit_alert')) {
            apitAlert(item.dispose());
        }
    });
    return;

}

function injectDebugContent() {
    $('apit_main').set('html',"<div id='apit_debug'>"+debugContent+"&nbsp;</div>");
    var scroll = $('apit_main').getScrollSize();
    //    alert('scroll x y: ' + scroll.x + ' ' + scroll.y);
    $('apit_main').scrollTo(0,scroll.y);
    
    var cls = new Element('div', {
        'html': 'clear',
        'styles': {
            'position': 'fixed',
            'top' : 	'47px',
            'width':	'50px',
            'height' :	'10px',
            'right':	'0px',
            'cursor':   'pointer'
        },
        'events': {
            'click': function(){
                debugContent = '';
                $('apit_debug').empty();
            }
        }
    });
    $('apit_main').adopt(cls);
}

function apitCoreEventHandlers(){


    // Add event handlers to menu-items
    $$('li.menu').removeEvents().addEvent('click',function(event){
        var apitmod = this.getProperty('apitmod');
        apitvars.mod = apitmod;
        if (apitmod == 'debug') {
            injectDebugContent();
        }
        else {
            var data = {
                mod: apitmod
            };
            replaceElement($('apit_main'),data);
        }
    });

    // Close button
    $$('#apit_shutdown').removeEvents().addEvent('click', function(event){
        toggleapit();
    });

}

function setAPitCookie(name,value) {
    Cookie.write(name, value,{path: SITE_ROOT});
}

function apitAlert(node){

    if(!$('apit_alerts')){
	var apitAlerts = new Element('div', {
        'id':'apit_alerts'
    });
    	apitAlerts.inject(document.body);

    }

    apitAlerts = $('apit_alerts');

    if(!$(node)){
	var alertDiv = new Element('div', {
        'html' : node,
	'class':'apit_alert'
	});
    }else{
	var alertDiv=node;
    }

    alertDiv.inject(apitAlerts);
    alertDiv.fade('hide');
    alertDiv.fade('in');
    var fadeOut= function(){
	alertDiv.fade("out");
    }
    var shiftAlert= function(){
	alertDiv.setStyle('overflow','hidden');
	alertDiv.set('morph', {duration: 'normal', transition: 'sine'});
	alertDiv.morph({height: 0, 'margin-top': 0, 'margin-bottom': 0, 'padding-top':0, 'padding-bottom':0, 'border-top':0, 'border-bottom':0});
    };
    var disposeAlert = function(){
	alertDiv.dispose();
    }
    fadeOut.delay(3500);
    shiftAlert.delay(4000);
    disposeAlert.delay(4500);
}

function apitModalAlert(title,message){
    alert('Modal: '+title+message);
}

function addApitCoreJS() {
    // insert additional javascript-files needed for APit
    var tempjs = [];
    tempjs.push('AList');
    tempjs.push('AForm');
    tempjs.push('AUsercontrol');
    tempjs.push('APagecontrol');
    tempjs.push('AElementcontrol');
    tempjs.push('AModelmanager');

    apitvars.javascripts = {};
    for (var i = 0;i < tempjs.length;i++) {
        // Get full path to js file in APit public
        var name = tempjs[i];
        var path = SITE_ROOT + 'apit_public/js/elements/'+ name +'.js';

        // Check if there are any existing js scripts with same path
        var exists = false;
        var scripts = $$('script');
        for (var j = 0;j < scripts.length;j++) {
            if (scripts[j].get('src') == path) {
                exists = true;
                //    addDebugMessage('already exists: '+scripts[j].get('src'));
                break;
            }

        }
        // If not yet available, add JS for APit interface
        if (!exists) {
            var file = new Asset.javascript(path);
            apitvars.javascripts[name] = file;
        }
    }

    //var AModelcontrolJS = new Asset.javascript('/apit_public/js/elements/AModelcontrol.js');
    //var AUsercontrolJS = new Asset.javascript('/apit_public/js/elements/AUsercontrol.js');

    // add menu event-handlers for apitCore
    window.addEvent('domaltered',apitCoreEventHandlers);
}

function removeApitCoreJS() {
    // Remove core APit event handlers (interface menu)
    window.removeEvent('domaltered',apitCoreEventHandlers);

    // remove additional javascript-files needed for APit
    for (var i in apitvars.javascripts) {
        var file = apitvars.javascripts[i];
        //    addDebugMessage('js file: '+i);
        // remove script tag from HEAD
        file.dispose();

        // Unset event handlers
        var type = eval('$type('+i+'EventHandlers)');
        if (type == 'function') {
            //    addDebugMessage(i+' heeft een eventhandler functie');
            window.removeEvent('domaltered',eval(i+'EventHandlers'));
        }

    }
}

function showApitLoginForm() {
    // show the apit login form
    // This means we add it to the dom tree, so it will be "added" to the page instead of replacing it!

    //create the div element
    // Add styles here manually because apit.css cannot be loaded yet
    var login = new Element('div', {
        'id':'apit',
        'class':'login',
        'styles': {
            'position': 'fixed',
            'background' : 'url("'+SITE_ROOT+'apit_public/img/loginwindow.png")',
            'top' : 	'50%',
            'left' :	'50%',
            'marginLeft': '-200px',
            'marginTop': '-100px',
            'width':	'400px',
            'height': 	'200px'
        }
    });

    //create a form
    var form = new Element('form', {
        'action' : '',
        'method':'post'
    });
    var username = new Element('input', {
        'type' : 'text',
        'name':'username',
        'styles': {
            'position': 'absolute',
            'top' : 	'92px',
            'left' :	'50px',
            'border':	'1px #90a0a6 solid',
            'height':	'16px',
            'text-align':'center',
            'width':	'300px'
        }
    });
    var password = new Element('input', {
        'type' : 'password',
        'name':'password',
        'styles': {
            'position': 'absolute',
            'top' : 	'154px',
            'left' :	'50px',
            'border':	'1px #90a0a6 solid',
            'height':	'16px',
            'text-align':'center',
            'width':	'300px'
        }
    });
    var submit = new Element('input', {
        'type' : 'submit',
        'name':'login',
        'value':'Log in!',
        'styles': {
            'position': 'absolute',
            'top' : 	'160px',
            'left' :	'50px',
            'border':	'1px #90a0a6 solid',
            'height':	'16px',
            'width':	'300px',
            'visibility':'hidden'
        }
    });
    username.inject(form);

    password.inject(form);
    submit.inject(form);
    form.inject(login);
    login.inject(document.body);
    login.fade('hide');
    login.fade('in');
    (function(){
        username.focus();
    }).delay(100);
}



// At initial loading of the site it is needed to run the domReady function

window.addEvent('domready', domReady);