/*global $, $$, $A, Ajax, Effect, Element, Event */
/*global overLay, slides, menu*/

/////////////////////////////////////////////////////////////////////
// GENERIEKE FUNCTIES
/////////////////////////////////////////////////////////////////////
/*members $_domReady, $_readyCallbacks, $_timer, addEventListener, bind, 
    callee, done, each, extend, observe, onDOMReady, push, readyState, test, 
    userAgent
*/
Object.extend(Event, {
    
    $_domReady : function() {  

     if (arguments.callee.done){ return;}
     arguments.callee.done = true;  
   
     if (this.$_timer){  clearInterval(this.$_timer);}
       
     this.$_readyCallbacks.each(function(f) { f(); });
     this.$_readyCallbacks = null;  
 },  
   onDOMReady : function(f) {  
     if (!this.$_readyCallbacks) {  
       var domReady = this.$_domReady.bind(this);  
         
       if (document.addEventListener){
         document.addEventListener("DOMContentLoaded", domReady, false);  
       }
        // for Internet Explorer (using conditional comments) 
        /*@cc_on @*/
        /*@if (@_win32)
        document.write('<script id=__ie_onload defer src=""><\/script>');
        var script = document.getElementById("__ie_onload");
        script.onreadystatechange = function() {
            if (this.readyState === "complete") {
                domReady(); // call the onload handler
            }
        };
        /*@end @*/

         if (/WebKit/i.test(navigator.userAgent)) {   
           this.$_timer = setInterval(function() {  
             if (/loaded|complete/.test(document.readyState)){ domReady();}
           }, 10);  
         }  
           
         Event.observe(window, 'load', domReady);  
         Event.$_readyCallbacks =  [];  
     }  
     Event.$_readyCallbacks.push(f);  
   }  
});  
/////////////////////////////////////////////////////////////////////
// SPECIFIEKE FUNCTIES
/////////////////////////////////////////////////////////////////////
///////////////////////////////////////////
// overLay
///////////////////////////////////////////
/*global overLay */
var overLay = {};

overLay.open = function(){
    var e1, embedObj, e2;
    if($('overlayDIV') === null){
    	overLay.create();
    }
    
    if($('overlayDIV') && $('overlayDIV').getStyle('opacity') < 0.1){//check if exist && visible... no nead to open if already visible
	   e1 = new Effect.Appear('overlayDIV', 
	       {
	       	duration: 0.3, 
	       	from:0.0, 
	       	to:0.4, 
	       	queue: 'end'
	       }
	   );
    }

    if($('overlayWrapper') && $('overlayContainer').getStyle('opacity') < 0.1){// check if exist && visible... no nead to open if already visible
    	embedObj = $('overlayWrapper').getElementsByTagName('embed');
    	e2 = new Effect.Appear('overlayContainer', 
    	   {
    	   	   duration: 0.3, 
    	   	   from:0.0, 
    	   	   to:1.0,
    	   	   queue: 'end',
    	   	   beforeStart: function(){
    	   	   	   if(embedObj.length){
                        $A(embedObj).each(function(obj){
                            if($(obj).getStyle('display') === 'inline'){
                                $(obj).setStyle({display:'none'});
                            }
                        });
                    }
    	   	   },
    	   	   afterFinish: function(){
                   if(embedObj.length){
                        $A(embedObj).each(function(obj){
                            if($(obj).getStyle('display') === 'none'){
                                $(obj).setStyle({display:'inline'});
                            }
                        });
                    }
    	   	   }
	   	   }
   	   );
	}	
};

overLay.close = function(){
    var embedObj, e1, e2;
    
    if($('overlayWrapper')){
        embedObj = $('overlayWrapper').getElementsByTagName('embed');
        e1 = new Effect.Appear('overlayContainer', 
           {
                duration: 0.3, 
                from:1.0, 
                to:0.0,
                queue: 'end',
                beforeStart: function(){
                    if(embedObj.length){
                        $A(embedObj).each(function(obj){
                            if($(obj).getStyle('display') === 'inline'){
                                $(obj).setStyle({display:'none'});
                            }
                        });
                    }
                },
                afterFinish: function(){
                    $('overlayWrapper').remove();                       
                }
           }
       );
    } 
    if($('overlayDIV')){
    	e2 = new Effect.Appear('overlayDIV', 
            {
                duration: 0.3, 
                from:0.4, 
    	   	    to:0.0, 
    	   	    queue: 'end', 
    	   	    afterFinish: function(){
                    $('overlayDIV').remove();
                }
    	   }
    	);
	} 
};

overLay.attachControls = function() {
    var rightElement, leftElement; 
    
    if($('overlayContentIMG')){
	    if($('overlayContentIMG').childElements().length > 1 ){
	    	if($('overLay_prev') === null){
			    rightElement = document.createElement('a');
			    rightElement.setAttribute('id', 'overLay_next');
			    $(rightElement).setStyle({cursor: 'pointer'});
			    
			    leftElement = document.createElement('a');
			    leftElement.setAttribute('id', 'overLay_prev');
			    $(leftElement).setStyle({cursor: 'pointer'});
			    
			    $('overlayContainer').appendChild(leftElement);
			    $('overlayContainer').appendChild(rightElement);
			        
			    $('overLay_prev').observe('click', overLay.slideContent);
			    $('overLay_next').observe('click', overLay.slideContent);
	    	}else{
		    	$('overLay_prev').setStyle({'display':'block'});
	            $('overLay_next').setStyle({'display':'block'});
	    	}          
	    }else if($('overLay_prev') && $('overlayContentIMG').childElements().length <= 1 ){
	        $('overLay_prev').setStyle({'display':'none'});
	        $('overLay_next').setStyle({'display':'none'});          
	    }
    }
};

overLay.slideContent = function(event){
    var element, idParts, direction, divList, divZ, Z, effectDuration, e1;
    
    element   = Event.element(event);
    idParts   = element.id.split('_');
    direction = idParts[1];

    divList = $$('#overlayContentIMG div');

    divList.each( function(div, index){
        divZ = parseInt(div.getStyle('z-index'));
        if(divZ === 1000){overLay.disapearDiv = $(div);}
        if(direction === 'next'){
            if(divZ === 1000){
                Z = 1000-(divList.length-1);
            }else{
                Z = divZ+1;
            }
        }else if(direction === 'prev'){
            if(divZ+(divList.length-1) == 1000){
                Z = 1000;
            }else{
                Z = divZ-1;
            }
        }
        div.setStyle({zIndex:Z});
        if(parseInt(Z) === 1000){
            overLay.apearDiv = $(div);
        }
    });

    
    effectDuration = 0.7;
    if(overLay.apearDiv.getElementsByTagName('embed').length){
        effectDuration = 0.0;
    }

    e1 = new Effect.Appear(overLay.apearDiv, // Appear || BlindDown || SlideDown
        {
            duration: effectDuration,
            queue: 'end',
            afterFinish: function(){
                $(overLay.disapearDiv).setStyle({display:'none'});
            }
        }
    );
};

overLay.create = function(){
    var overlayWrapper, overlayContainer, overlayTab, overlayContentIMG, overlayContent, overlayDIV, closeElement;
    
    overlayWrapper = document.createElement('div');
    $(overlayWrapper).setAttribute('id', 'overlayWrapper');
    $(overlayWrapper).setStyle(
        {
            position:'absolute',
            zIndex:'998',
            top:'50%', 
            left: '0px',
            width: '100%',
            height: '0px'
        }
    );
    
    overlayContainer = document.createElement('div');
    $(overlayContainer).setAttribute('id', 'overlayContainer');
    $(overlayContainer).setStyle(
        {
            zIndex:'999',
            width:'473px', 
            marginLeft:'-236px',
            height:'538px', 
            top:'-269px',
            left:'50%', 
            position:'absolute',
            backgroundColor:'transparent',
            opacity : 0
        }
    );

    overlayTab = document.createElement('div');
    $(overlayTab).setAttribute('id', 'overlayTab');
    $(overlayTab).setStyle(
        {
            background: '#FFF',
            position: 'absolute',
            top: '14px'
        }
    );

    overlayContentIMG = document.createElement('div');
    $(overlayContentIMG).setAttribute('id', 'overlayContentIMG');
    $(overlayContentIMG).setStyle({overflow:'hidden'});

    overlayContent = document.createElement('div');
    $(overlayContent).setAttribute('id', 'overlayContent');

    overlayWrapper.appendChild(overlayContainer);
    overlayContainer.appendChild(overlayTab);    
    overlayContainer.appendChild(overlayContent);
    overlayContainer.appendChild(overlayContentIMG);

    overlayDIV = document.createElement('div');
    $(overlayDIV).setAttribute('id', 'overlayDIV');
    $(overlayDIV).setStyle({
                                zIndex:'997',
                                width:'100%', 
                                height:'100%', 
                                position:'absolute',
                                opacity : 0
                            });

    document.body.insertBefore(overlayDIV, document.body.childNodes[0]);
    document.body.insertBefore(overlayWrapper, document.body.childNodes[0]);

    closeElement = document.createElement('a');
    closeElement.setAttribute('id', 'overLay_close');
    $(closeElement).setStyle({cursor: 'pointer'});
    $('overlayContainer').appendChild(closeElement);

    // watch for close events
    $(closeElement).observe('click', overLay.close);
    $('overlayDIV').observe('click', overLay.close);

    // TODO: fix code... close when ESC keydown not working in IE (and others?):-(
    //       not absolutely imperative, but a nice feature  :-)
    Event.observe(window, 'keydown', function(event){
        if(event.keyCode === 27 || event.keyCode === Event.KEY_ESC){
            overLay.close();
        }
    });
};

overLay.checkTab = function(){
	var x1, x2, Nr, url;
	if($('overlayTab')){
		x1 = $('overlayTab').getWidth();
		$A($$('#overlayTab a')).each(function(link){
            if(link.getWidth() > x1){
            	x2 = link.getWidth();
            }
        });
        if(x2 > x1){
        	x1 = x2;
        }
        $('overlayTab').setStyle({left: '-' + (x1+20) + 'px'});
	}
}

overLay.contentFixer = function(ID, content, type){
    if($('overlayContainer') === null){
    	overLay.create();
    }

    switch (ID) {
        case 'Tab':
            ID = 'overlayTab';
            break;
        case 'Upper':
            ID = 'overlayContentIMG'
            $('overlayContentIMG').setStyle({'display':'block'});
            $('overlayContent').removeClassName('Large');
            break;
        case 'Lower':
            ID = 'overlayContent';
			$('overlayContentIMG').setStyle({'display':'block'});
			$('overlayContent').removeClassName('Large');
            break;
        case 'All':
        default:
            ID = 'overlayContent';
            $('overlayContentIMG').setStyle({'display':'none'});
            $('overlayContent').addClassName('Large');
        break;
    }
    
    if($(ID)){
        switch (type) {
            case 'add':
		        if(typeof(content) === 'string'){
		                $(ID).innerHTML += content; 
                }else if(typeof(content) === 'object'){
                    $(ID).appendChild(content);
                }
                break;
            case 'replace':
        		$(ID).update(content);
                break;
            default:
            break;
        }
    }
	
	// check if controlls need to be added
	overLay.attachControls();
	// adjust Tab width/location
	overLay.checkTab();
};

overLay.addContent = function(ID, content){
	overLay.contentFixer(ID, content, 'add');
};

overLay.replaceContent = function(ID, content){
    overLay.contentFixer(ID, content, 'replace');
};



///////////////////////////////////////////
// slides
///////////////////////////////////////////
var slides = {
    moveX: 310,
    Sliding: false,
    firstSlide_ID: 0,
    lastSlide_ID: 0
};

slides.create = function(slideItems){
    slides.attachDIVs(slideItems);
    slides.attachControls();
    slides.attachSlideHandler();
};

slides.CalculateContentWidth = function(element) {
    var slideContentWidth = 0;
    $(element).childElements().each(function(childElement){
           slideContentWidth += parseInt(childElement.getWidth());
        }
    );
    return slideContentWidth;
};

slides.attachDIVs = function(slideItems){
    var slide_container;
    
    // Replace excisting content with our spiffy slideshow
    // $('slide_container').replace('<div id="main_loader"><img src="/img/loading_main.gif"></div>');  // loading...
    $('slide_container').remove();  
    $('Slide_Show').removeClassName('scroll');
    $('Slide_Show').setStyle({overflow:'hidden'});
    
    // Create the container for all the slides
    slide_container = document.createElement('div');
    slide_container.setAttribute('id', 'slide_container');
    $('Slide_Show').appendChild(slide_container);
    
    // Create a slide for every given item
    slideItems.each(function(slide){
        Nr = slide.id.split('_')[2];
        slides.currentNr = Nr;

        // Create the slide div
        var slideElement = document.createElement('div');
        slideElement.setAttribute('id', 'SlideNr_'+Nr);
        $(slideElement).addClassName('slide');
        
        // Create the div that holds the images for this slide
        var slideImgElement = document.createElement('div');
        $(slideImgElement).addClassName('slide_image');

        // Attach to the hook
        $('slide_container').appendChild(slideElement);

        // AJAX call to get content for each slide
        url = '/tekst/'+Nr+'/item:frontpage'
        var BLA = new Ajax.Request(url, {
            onLoading:function(transport) {
                // Loading...
            },
            onFailure: function(transport) {
                // Failure...
            },
            onSuccess: function(transport) {
                responseText = transport.responseText;
                var data = eval('('+responseText+')');

                if(data.IMG){
                    // attach images
                    var Z = 100;                            
                    data.IMG.each(function(img){
                        if(Z === 100){IMGdisplay = 'block';}else{IMGdisplay = 'none';}
                        var slideIMGdiv = document.createElement('div');
                            $(slideIMGdiv).setStyle({zIndex:Z, left: 0, height: '210px', display: IMGdisplay});

                        var slideIMGlink = document.createElement('a');
                            slideIMGlink.setAttribute('href', '/tekst/'+img.id);
                            $(slideIMGlink).observe('click', slides.overLay.bindAsEventListener());

                        var slideIMGimage = document.createElement('img');
                        slideIMGimage.setAttribute('src', '/resize/padded_1/height_210/width_240'+img.src);

                        slideIMGlink.appendChild(slideIMGimage);
                        slideIMGdiv.appendChild(slideIMGlink);
                        slideImgElement.appendChild(slideIMGdiv);
                        Z = Z-1;
                    });
                 }
                
                // if more than one image in this slide attach controls
                if(data.IMG.length > 1){
                    slides.attachSlideControls($(slideImgElement).parentNode);
                }

                // create the slide title
                var slideTitleElement = document.createElement('div');
                  $(slideTitleElement).addClassName('slide_title');
                
                if(data.titleIMG){          // title is an image 
                      var slideTitleIMG = document.createElement('img');
                          slideTitleIMG.setAttribute('src', data.titleIMG.src);
                        $(slideTitleIMG).setStyle({width: data.titleIMG.width+'px', height: data.titleIMG.height+'px'});
                        slideTitleElement.appendChild(slideTitleIMG);
                }else if(data.titleTXT){   // title is text
                      var slideTitleElement = document.createElement('h1');
                      slideTitleElement.innerHTML = data.titleTXT;
                }else{                     //no title
                    var slideTitleElement = document.createElement('p');
                    slideTitleElement.appendChild(document.createTextNode(' '));
                        }
                        slideElement.appendChild(slideTitleElement);
                    }
                });
                slideElement.appendChild(slideImgElement);
 
        // mark first current_slide
        if(slide.className.match('active')){
            $(slideElement).addClassName('current_slide');
        }
    });
    //replace width with calculated width
    $(slide_container).setStyle({width: this.CalculateContentWidth('slide_container') + (slideItems.length*8) + 'px'}); // *8 = fudge factor
};

slides.attachControls = function() {
    var controlElement, prevElement, nextElement;
    
    controlElement = document.createElement('div');
    controlElement.setAttribute('id', 'HTML_Slide_Controls');

    prevElement = document.createElement('a');
    prevElement.setAttribute('id', 'HTMLslides_Prev');
    $(prevElement).setStyle({cursor: 'pointer'});
    
    nextElement = document.createElement('a');
    nextElement.setAttribute('id', 'HTMLslides_Next');
    $(nextElement).setStyle({cursor: 'pointer'});
    
    controlElement.appendChild(prevElement);
    controlElement.appendChild(nextElement);
    $('Slide_Show').parentNode.appendChild(controlElement);

    $('HTMLslides_Prev').observe('click', slides.goSlide);
    $('HTMLslides_Next').observe('click', slides.goSlide);
};

slides.attachSlideControls = function(element) {
    var Nr, controlElement, prevElement, nextElement; 
    Nr = element.id.split('_')[1];
    
    controlElement = document.createElement('div');
    $(controlElement).addClassName('Slide_Control');

    prevElement = document.createElement('a');
    prevElement.setAttribute('id', 'HTMLslide_Prev_'+Nr);
    $(prevElement).addClassName('slide_control_prev');
    $(prevElement).setStyle({cursor: 'pointer'});
    
    nextElement = document.createElement('a');
    nextElement.setAttribute('id', 'HTMLslide_Next_'+Nr);
    $(nextElement).addClassName('slide_control_next');
    $(nextElement).setStyle({cursor: 'pointer'});
    
    controlElement.appendChild(prevElement);
    controlElement.appendChild(nextElement);
    $('SlideNr_'+Nr).appendChild(controlElement);

    $('HTMLslide_Prev_'+Nr).observe('click', slides.slideSlideContent);
    $('HTMLslide_Next_'+Nr).observe('click', slides.slideSlideContent);
};

slides.slideSlideContent = function(event){
    var element, idParts, direction, Nr, divList, divZ, Z, e1;
    
    element   = Event.element(event);
    idParts   = element.id.split('_');
    direction = idParts[1];
    Nr        = idParts[2];

    divList = $$('#SlideNr_' + Nr + ' .slide_image div');

    divList.each( function(div, index){
        divZ = parseInt(div.getStyle('z-index'));
        if(divZ === 100){
        	slides.disapearDiv = $(div);
    	}

        if(direction === 'Next'){
            if(divZ === 100){
                Z = 100-(divList.length-1);
            }else{
                Z = divZ + 1;
            }
        }else if(direction === 'Prev'){
            if(divZ + (divList.length-1) === 100){
                Z = 100;
            }else{
                Z = divZ-1;
            }
        }
        div.setStyle({zIndex:Z});
        if(parseInt(Z) === 100){
            slides.apearDiv = $(div);
        }
    });

    e1 = new Effect.Appear(slides.apearDiv, // Appear || BlindDown || SlideDown
        {
            queue: 'end',
            afterFinish: function(){
                $(slides.disapearDiv).setStyle({display:'none'});
            }
        }
    );
};

slides.slidesList = function(IdOnly){
    var allSlides, slideList;
    
    allSlides = $$('.slide');
    if(IdOnly === true){
        slideList = new Array();
        if (allSlides && allSlides.length > 0) {
            allSlides.each( function(slide){
                slideList.push(slide.id.split('_')[1]);
            });
        }
    }else{
        slideList = allSlides;
    }

    return slideList;
};

slides.attachSlideHandler   = function() {
	var slidesList, allSlides, currentSlide, currentSlide_ID, moveX, e1; 
	
    slidesList          = slides.slidesList(true);
    allSlides           = slides.slidesList(false);
    slides.firstSlide_ID    = parseInt(slidesList.shift());
    slides.lastSlide_ID     = parseInt(slidesList.pop());
    currentSlide        = $$('div.current_slide')[0];
    currentSlide_ID     = parseInt(currentSlide.id.split('_')[1]);
    
    if(currentSlide_ID != slides.firstSlide_ID){ //move to the right slide
        moveX = -((currentSlide_ID-1)*slides.moveX);
        e1 = new Effect.MoveBy('slide_container', 0, moveX, {transition: Effect.Transitions.sinoidal, duration: 1, queue:'end'})
    }
};

slides.goSlide = function(event){
    var slidesList, direction, currentSlide, currentSlide_ID, gotoSlideID;
    
    Event.stop(event);
        
    slidesList = slides.slidesList(true);
    gotoSlideID = -1;
    direction = Event.element(event).id.split('_')[1];

    currentSlide    = $$('div.current_slide')[0];
    if(currentSlide && slides.Sliding === false){
	    currentSlide_ID = parseInt(currentSlide.id.split('_')[1]);
	    
	    if(direction === 'Next'){
	    	gotoSlideID = slidesList.slice(currentSlide_ID).shift();
	    }else if(direction === 'Prev'){
		    slidesList.slice(currentSlide_ID).each(function(i){
		    	slidesList = slidesList.without(i, currentSlide_ID);
		    });
	        slidesList = slidesList.without(currentSlide_ID);
	        gotoSlideID = slidesList.pop();
	    }
	    if(gotoSlideID && gotoSlideID != -1){
	        slides.goToSlide(gotoSlideID);
	    }
    }else{
    	// busy
    }
};

slides.goToSlide = function(gotoSlideID){
	var gotoSlide_ID, currentSlide, currentSlide_ID, effectDuration, moveX;
    
    if(slides.Sliding === false){
    	effectDuration = 1;
        gotoSlide_ID = parseInt(gotoSlideID);
        currentSlide = $$('div.current_slide')[0];
        
        if(currentSlide){
            currentSlide_ID = parseInt(currentSlide.id.split('_')[1]);
            }else{
                currentSlide_ID = -1;
            }

        if( 
            (gotoSlideID == currentSlide_ID)    || 
            (gotoSlideID < slides.firstSlide_ID)|| 
            (gotoSlideID > slides.lastSlide_ID)
          ){
            //current item or beyond first or last slide
        }else{
            slides.Sliding = true;
            if(currentSlide_ID < gotoSlide_ID){
                //effectDuration = (currentSlide_ID-gotoSlide_ID)*-1;
                if(gotoSlideID === slides.lastSlide_ID && currentSlide_ID === (slides.lastSlide_ID-1)){
                	moveX = 0;
                }else if((gotoSlideID==slides.lastSlide_ID)){
                    moveX = (currentSlide_ID-(gotoSlide_ID)+2)*slides.moveX;
                }else{
                    moveX = (currentSlide_ID-(gotoSlide_ID))*slides.moveX;
                }
                direction = 'next';
            }else{
                //effectDuration = (currentSlide_ID-gotoSlide_ID);
                if((gotoSlideID === (slides.lastSlide_ID)-1)){
                    moveX = 0;
                }else if (currentSlide_ID==slides.lastSlide_ID){
                    moveX = (currentSlide_ID-(gotoSlide_ID)-2)*slides.moveX;
                }else{
                    moveX = (currentSlide_ID-(gotoSlide_ID))*slides.moveX;
                }
                direction = 'prev';
            }
            
            $(currentSlide).setStyle({marginRight:'0'});
            $(currentSlide).setStyle({cursor: 'default'});
            $(currentSlide).removeClassName('current_slide');
            
            /* SLIDE AND GROW EFFECTS */
            // Grow coming slide
            new Effect.Scale($('SlideNr_'+gotoSlide_ID), 131,
                {
                    duration: 0,
                    delay : effectDuration,
                    queue: 'start',
                    scaleContent: false,
                    scaleMode: {originalHeight: 253, originalWidth: 236},
                    beforeStart : function(){
                        if(direction === 'next'){
                            if($('SlideNr_'+(gotoSlide_ID-1))){
                            	$(currentSlide).setStyle({marginRight:'0px'});
                            }
                        }else if(direction === 'prev'){
                            if($('SlideNr_'+(gotoSlide_ID+1))){
                                $(currentSlide).setStyle({marginRight:'0px'});
                            }
                        }
                    },
                    afterFinish: function(){
                        $('SlideNr_'+gotoSlide_ID).addClassName('current_slide'); 
						if((gotoSlideID==slides.lastSlide_ID-1) && (currentSlide_ID==slides.lastSlide_ID)){
							// ?
						}
                        $('SlideNr_'+gotoSlide_ID).setStyle({cursor: 'pointer'});
                        $A($('menu').getElementsByTagName('a')).each(
                            function(l) {
                                Element.removeClassName(l, 'active');
                            }
                        );
                        $('menu_item_'+gotoSlideID).addClassName('active');
                    }
                }
		    );

            new Effect.MoveBy('slide_container', 0, moveX, 
                {
                    transition: Effect.Transitions.sinoidal,
                    duration: effectDuration,
                    queue: 'start',
 
                            beforeStart : function(){
                                    $('SlideNr_'+(gotoSlide_ID)).setStyle({marginRight:'72px'});
                    },
                    afterFinish : function(){
                        slides.Sliding = false;
                    }
                }
            );
        }
    }else{
       // busy doing a slide, so do nothing...
    }
};

slides.overLay = function(event){
    var element, Nr, url;
    
    Event.stop(event);
    element = Event.element(event);
    if(!element.parentNode.parentNode.parentNode.parentNode.className.match('current_slide')){
        // scroll next slide into place
        Nr = element.parentNode.parentNode.parentNode.parentNode.id.split('_').last();
        slides.goToSlide(Nr);  
    }

    url = element.parentNode.href;  //'/tekst/'+Nr;
    overLay.loadSlide(url, true);
};

overLay.loadSlide = function(url, tab){
	var A1, data, Z, slideIMGdiv, IMGdisplay, videoParts, vid_id, temp, flash, slideIMGimage;;
    
    Nr= url.split('/').last();
    overLay.replaceContent('Upper', '<div id="overlay_loader"><img src="/img/loading.gif"></div>')
    overLay.open();
    
    A1 = new Ajax.Request(url, {
        onLoading:function(transport) {
            // loading...
        },
        onFailure: function(transport) {
            // failure..
        },
        onSuccess: function(transport) {
            data = transport.responseText;
            data = eval('('+data+')');

            // Set Text content
            data.content = '<h2>'+data.title+'</h2>' + data.content;

            // Set Tab content
            if(tab === true && data.TAB){
            	tabList = '<ul>';
            	for(TabNr in data.TAB) {
            		tabList += '<li><a href="/tekst/' + TabNr + '/"' + (TabNr === Nr?' class="active"':'') + '>' + data.TAB[TabNr] + '</a>';
            	}
            	tabList += '</ul>';

            	// Add Tab Contents to the overlay
                overLay.replaceContent('Tab', tabList);
                if($('overlayTab')){
                    $A($$('#overlayTab a')).each(function(link){
		                $(link).observe('click', function(event){
			                Event.stop(event);
			                $$('#overlayTab a.active')[0].removeClassName('active');
			                Event.element(event).addClassName('active');
			                url = Event.element(event).href.toString();
			                /*e1 = new Effect.Appear($(ID), 
			                    {
			                        duration: 0.8, 
			                        from:1.0, 
			                        to:0.0,
			                        queue: 'end',
			                        afterFinish : function(){
			                  */          overLay.loadSlide(url, false);
			                    /*        e2 = new Effect.Appear($(ID), {duration: 0.8, from:0.0, to:1.0,queue: 'end'});
			                        } 
			                    }
			                );*/
	                    });
                    });
                }
            }

            // Set Image content
            if(data.IMG && data.IMG.length > 0){
                Z = 1000;
                overLay.replaceContent('Upper', '')
                data.IMG.each(function(img, index){
                    slideIMGdiv = document.createElement('div');
                    if(Z == 1000){
                    	IMGdisplay = 'block';
                	}else{
                		IMGdisplay = 'none';
            		}
                    $(slideIMGdiv).setStyle({zIndex:Z, position:'absolute', display: IMGdisplay});
                    
                    if(img.video){
                    	videoParts = img.video.split('/');
                        vid_id = 'video_'+videoParts[3];
                        $(slideIMGdiv).setAttribute('id', vid_id);  
                        temp = videoParts[4].split('.');
                        temp.pop();
                        videoParts[4] = temp.join('.')+'.flv';
						flash =  '<EMBED ' +
                                  'type="application/x-shockwave-flash"'+
                                  'pluginspage="http://www.macromedia.com/go/getflashplayer"'+ 

                                  'ID="'+vid_id+'" ' +
                                  'NAME="video player" ' +
								  'SRC="/swf/flvplayer.swf"  ' +
                                  'quality="high"'+
                                  'bgcolor="#FFFFFF"'+ 

								  'WIDTH="370" ' +
								  'HEIGHT="320" ' +

								  'allowfullscreen="true" ' +

								  'flashvars="file='+img.video+'&'+
								  'image=/resize/padded_1/width_340/height_320'+img.src+'" >' +
								  '</EMBED>';

                        slideIMGdiv.innerHTML = flash;
                    }else{
                        slideIMGimage = document.createElement('img');
                        slideIMGimage.setAttribute('src', '/resize/padded_1/height_320/width_370'+img.src);                            	
                        $(slideIMGimage).setStyle({width: '370px', height: '320px'});                        
                        slideIMGdiv.appendChild(slideIMGimage);
                    }
                        // Add Image Contents to the overlay
                        overLay.addContent('Upper', slideIMGdiv);
                    Z = Z-1;
                });
	            // Add Text Contents to the overlay
	            overLay.replaceContent('Lower', data.content);
            }else{
	            // Add Text Contents to the overlay
	            overLay.replaceContent('All', data.content);
            }
        }
    });            
};

///////////////////////////////////////////
// MENU HANDLER
///////////////////////////////////////////
var menu = {};

menu.attachMenuHandler = function() {
    if($('menu')){
        var menuItems = $A($('menu').getElementsByTagName('a'));;
        if (menuItems && menuItems.length > 0) {
            slides.create(menuItems);
            menuItems.each( function(menuItem, key) {
                Event.observe(menuItem, 'click', function(event) {
                    Event.stop(event);
                    var menuItem_ID = menuItem.id.split('_')[2];   
                    slides.goToSlide(menuItem_ID);
                })
            });
        }    
    }
};

///////////////////////////////////////////
// ONLOAD HANDLERS
///////////////////////////////////////////
Event.onDOMReady(function() { 
    menu.attachMenuHandler();
});


///////////////////////////////////////////