// JavaScript Document

//define scrollbar variables
var slidercontainer = new Array();
var leftbutton = new Array();
var rightbutton = new Array();
var area = new Array();
var knob = new Array();
var slider = new Array();
var slidervalue = new Array();

var sectioncount = 0;

var jsimages = 0;

function loadimges(){
    var loadedImages = [];
    var gallery = $('gallery');
    
    /* testing:
     var path = 'fileadmin/img/';
     var images = [
     path + 'cardimg1.jpg',
     path + 'cardimg.jpg',
     path + 'cardimg3.jpg'
     ];
    */
    var currentIndex = 0;
    var nextIndex = 0;
    var fadeIn;
    var fadeOut;
    var effect;
    
	
    var fadeOutComplete = function(button, index, image){
        //fadeOut = undefined;
        fadeOut = null;
        $('gallery').getFirst().remove();
        image.inject(gallery);
        
        currentIndex = index;
        // set alttext and caption
        $('gallery').getFirst().setProperty('alt', alttext[currentIndex]);
        $('caption').getFirst().setText(caption[currentIndex]);
        
        $$('div.thumbactive').each(function(el){
            el.setProperty('class', 'thumb');
        });
        
        button.setProperty('class', 'thumbactive');
        
        var el = $('gallery').getFirst();
        var options = {
            duration: 500,
            onComplete: fadeInComplete
        };
        fadeIn = new Fx.Style(el, 'opacity', options);
        fadeIn.start(1);
    }
    
    var fadeInComplete = function(){
        fadeIn = undefined;
    }
    
    var clickHandler = function(event, index, image){
        event = new Event(event);
        var button = event.target;
        if (index != nextIndex) {
            nextIndex = index;
        }
        
        if ($defined(fadeOut)) {
            fadeOut.stop();
        }
        if ($defined(fadeIn)) {
            fadeIn.stop();
        }
        
        var currentOpacity = $('gallery').getFirst().getStyle('opacity').toFloat();
        
        if (index != currentIndex) {
            image.setStyle('opacity', 0);
            var el = $('gallery').getFirst();
            var options = {};
            options.duration = 500 * currentOpacity;
            options.onComplete = function(){
                fadeOutComplete(button, index, image);
            }
            fadeOut = new Fx.Style(el, 'opacity', options);
            fadeOut.start(0);
        }
        else 
            if (currentOpacity < 1) {
                var el = $('gallery').getFirst();
                var options = {};
                options.duration = 500 * (1 - currentOpacity);
                options.onComplete = fadeInComplete;
                fadeIn = new Fx.Style(el, 'opacity', options);
                fadeIn.start(1);
            }
    }
    
    var initializeImage = function(image, index){
        image.setStyles({
            'left': (gallery.getCoordinates().width / 2) - (image.width / 2),
            'top': (gallery.getCoordinates().height / 2) - (image.height / 2)
        });
    }
    
    var initializeButton = function(image, index){
        // do not display button if only one image is available
        if (loadedImages.length > 1) {
            var myEl = new Element('div', {
                'id': 'button' + index,
                'class': 'thumb'
            });
            myEl.injectInside('thumbnav');
            
            myEl.addEvent('click', function(e){
                clickHandler(e, index, image);
            });
            myEl.index = index;
            
            //set the first button to active
            if (index == 0) {
                myEl.setProperty('class', 'thumbactive');
            }
        }
    }
    
    var onProgressCounter = 0;
    var options = {};
    options.onProgress = function(index){
        onProgressCounter += 1;
        initializeImage(this, index);
        if (index == 0) {
            this.inject(gallery);
        }
    }
    options.onComplete = function(){
        loadedImages.each(initializeButton);
        // set alttext and caption
        $('gallery').getFirst().setProperty('alt', alttext[0]);
        $('caption').getFirst().setText(caption[0]);
    }
    
    loadedImages = new Asset.images(images, options);
}

function stroke(){
    // create highlighter and stroke elements
    new Element('div', {
        'id': 'highlighter'
    }).injectAfter('nav_main');
    new Element('div', {
        'id': 'stroke'
    }).injectInside('highlighter');
    
    // disable default css styles for a tags
    $('nav_main').getFirst().getChildren().each(function(el, index){
        el.getFirst().style.background = 'none';
    });
    
    
    window.addEvent('domready', function(){
        var target = $('stroke');
        var fx = new Fx.Styles(target, {
            duration: 1500,
            wait: false,
            transition: Fx.Transitions.Quart.easeOut
        });
        var box = $('highlighter');
        
        //var pos = $('current').getLeft() + (($('current').getSize().size.x - ($('current').getSize().size.x % 2)) / 2) - 12;
        var pos = $('current').getLeft()+9;
        
        target.setStyles({
            'top': box.getTop(),
            'left': pos
        });
        
        var temp = box.getTop();
        
        $('nav_main').getFirst().addEvent('mousemove', function(event){
            event = new Event(event);
            fx.start({
                'top': [temp],
                'left': [event.page.x]
            });
            event.stop();
        });
        $('nav_main').getFirst().addEvent('mouseout', function(event){
            event = new Event(event);
            fx.start({
                'top': [temp],
                'left': pos
            });
            event.stop();
        });
    });
}


function accordion(){
	window.addEvent('domready', function(){
	    var fixheight = 150;
		if ($('aboutus')) {
			fixheight = false;
		}		
        var accordion = new Accordion('h2.atStart', 'div.atStart', {
            opacity: false,
            fixedHeight: fixheight,
            onActive: function(toggler, element){
                toggler.setStyle('color', '#f36e11');
                toggler.setStyle('cursor', 'pointer');
                //toggler.setStyle('font-weight', 'bold');
                toggler.setStyle('background', '#fff url(fileadmin/img/arrow_down_v2.gif) center left no-repeat');
            },
            onBackground: function(toggler, element){
                toggler.setStyle('color', '#535353');
                //toggler.setStyle('font-weight', 'normal');
                toggler.setStyle('cursor', 'pointer');
                toggler.setStyle('background', '#fff url(fileadmin/img/arrow_right_v2.gif) center left no-repeat');
            }
        }, $('accordion'));
    });
}

function newsaccordion(){
	//alert('hallo');
	window.addEvent('domready', function(){
        var newsaccordion = new Accordion('h5.boxheadline', 'div.boxcontent_container', {
            opacity: false,
            onActive: function(boxheadline, boxcontent_container){
        	//boxheadline.setStyle('color', '#828385');
        	boxheadline.setStyle('cursor', 'pointer');
            //boxheadlinesetStyle('font-weight', 'bold');
        	boxheadline.setStyle('background', '#fff url(fileadmin/img/arrow_down_v2.gif) 5px 16px no-repeat');
            },
            onBackground: function(boxheadline, boxcontent_container){
            	//boxheadline.setStyle('color', '#828385');
                //boxheadline.setStyle('font-weight', 'normal');
            	boxheadline.setStyle('cursor', 'pointer');
            	boxheadline.setStyle('background', '#fff url(fileadmin/img/arrow_right_v2.gif) 7px 15px no-repeat');
            }
        }, $('clm1_cont'));
    });
}

function scrollbar(i, steps){
    slidervalue[i] = 0;
    window.addEvent('domready', function(){
        //create slider container
        slidercontainer[i] = new Element('div', {
            'id': 'slider' + i,
            'class': 'slider'
        }).injectAfter('cardcontainer' + i);
        
        
        
        //create slider and knob
        area[i] = new Element('div', {
            'id': 'area' + i,
            'class': 'area'
        }).injectInside('slider' + i);
        knob[i] = new Element('div', {
            'id': 'knob' + i,
            'class': 'knob'
        }).injectInside('area' + i);
        
        //create slider
        slider[i] = new Slider($('area' + i), $('knob' + i), {
            steps: steps,
            onChange: function(step){
                //$('upd').setHTML(step);
                $('scrollarea' + i).setStyle('left', -step);
                slidervalue[i] = -step;
            },
            onComplete: function(){
            }
        }).set(0);
    });
} //end function

function verticalScrollbar(steps){
    // create scrollbar elements
    window.addEvent('domready', function(){
        new Element('div', {
            'id': 'vslider'
        }).injectBefore('rtecont');
        new Element('div', {
            'id': 'varea'
        }).injectInside('vslider');
        new Element('div', {
            'id': 'vknob'
        }).injectInside('varea');
        //create slider
        var vslider = new Slider($('varea'), $('vknob'), {
            steps: steps,
            mode: 'vertical',
            onChange: function(step){
                //$('upd').setHTML(step);
                $('rteinside').setStyle('top', -step);
                //slidervalue[i]=-step;
            },
            onComplete: function(){
            }
        }).set(0);
    });
} //end function

function setLayout(i){
    //var cardcount = new Array();  
    $('cardcontainer' + i).style.overflow = 'hidden';
    $('cardcontainer' + i).style.height = '110px';
    $('cardcontainer' + i).style.border = 'none';
    
    // count images
    var cardcount = $('scrollarea' + i).getChildren().length;
    
    var scrollareawidth = 172 * cardcount;
    var cardcontainerwidth = $('cardcontainer' + i).getStyle('width').toInt();
    var steps = scrollareawidth - cardcontainerwidth;
    
    //alert(steps);
    
    $('scrollarea' + i).style.width = scrollareawidth + 'px';
    
    if (!(steps <= 0)) 
        scrollbar(i, steps);
    else 
        $('scrollarea' + i).removeProperty('style');
}

function setCardLayout(){
    $('rtecont').style.overflow = 'hidden';
    
    var scrollareaheight = $('rteinside').getSize().size.y;
    var rtecontheight = $('rtecont').getSize().size.y;
    var steps = scrollareaheight - rtecontheight;
    
    if (!(steps <= 0)) 
        verticalScrollbar(steps)
    else 
        $('rteinside').style.padding = '0 10px 0 0';
} //end function

window.onload = init;

function init(){
    stroke();
    // check if accordion div exists (layout check)
    if (!($('aboutus')))
    {
      if (window['accordion']) {
          sectioncount = $$('div.atStart').length;
          $$('div.atStart').each(function(el, index){
              setLayout(index);
          });
      }
    }
    // check if subclm div exists (layout check)
    if ($('subclm')) {
        setCardLayout();
        if (jsimages == 1) {
            //delete content
            $('gallery').getFirst().remove();
            $('thumbnav').empty();
            
            loadimges();
        }
    }
	// check if infobox div exists
    if ($('infobox')) {
        var ibxpos = (($E('body').getSize().size.x) / 2) - ($('infobox').getSize().size.x / 2);
        $('infobox').setStyle('left', ibxpos);
		$('infobox').setStyle('visibility', 'visible');
        //alert($('infobox').getSize().size.x);
        $('infobox').addEvent('click', function(){
            $('infobox').removeEvent();
			$('infobox').empty();
            $('infobox').remove();
        });
    }
    window.onresize = redraw;
}

function redraw(){
    //$('highlighter').empty();
    $('nav_main').getFirst().removeEvents('mousemove');
    $('nav_main').getFirst().removeEvents('mouseout');
    $('stroke').remove();
    $('highlighter').remove();
    stroke();
    
    // check if aboutus div exists (layout check)
    if (!($('aboutus')))
    {
      if (window['accordion'] && !window['aboutus']) {
          sectioncount = $$('div.atStart').length;
          $$('div.atStart').each(function(el, index){
              if ($('slider' + index)) {
                  $('slider' + index).empty();
                  $('slider' + index).remove();
              }
              setLayout(index);
          });
      }
    }
    // check if subclm div exists (layout check)
    if (window['subclm']) {
        if (window['vknob']) 
            $('vknob').remove();
        if (window['varea']) 
            $('varea').remove();
        //if(window['varea'])$('vslider').remove();
        $('vslider').remove();
        setCardLayout();
    }
    
	// check if infobox div exists
    if ($('infobox')) {
        ibxpos = (($E('body').getSize().size.x) / 2) - ($('infobox').getSize().size.x / 2);
        $('infobox').setStyle('left', ibxpos);
    }
}

// check if accordion div exists (layout check)
if (window['accordion']) {
	accordion();
}

//check if clm1_cont div exists (layout check)
if (window['clm1_cont']) {}
	newsaccordion();