window.addEvent('load', function() {
  
  var elementsArr = new Array();
  var elementsArrWithAll = new Array();
  
  var elincrement = 1;
  
  //get each element
  $$('#slider .ce_text').each(function(el, index){
    
    //push'em into array
    elementsArr.include(el);
    
    //depricated? 
    el.addClass("elclass"+elincrement);
     
    //set an id for later usage 
    el.setProperties({
        id: "elclass"+elincrement
    });
    if(elincrement == 1){
        //el.setProperties({style: "z-index: 100"});
        el.addClass('activeimg');
        //el.setStyle('visibility','visible');
        el.fade(1.0);
    }else{
        //el.fade('out');
        //important, because fade won't work otherwise
        el.setStyle('visibility','hidden');
        el.setStyle('opacity',0);   
    }
      
    imgdiv = el.getElement('div'); //grab the image
     
    //get all elements besides div and store them -> set a class (looks like theres no need for making it unique)
    newdiv = "<div id='sliderelementcontent'>";
    Array.each(imgdiv.getSiblings(), function(restel, index){
        if(restel.get('tag') != "img"){
            newdiv += "<"+restel.get('tag')+" id='"+restel.get('id')+"' class='"+restel.get('class')+"' >"+restel.get('html')+"</"+restel.get('tag')+">";
            restel.dispose();
        }
        else{
            newdiv += restel.get('html');
            restel.dispose();
        }
    });
  
    newdiv += "</div><div id='sliderNav'></div>"; 
    
    elementsArrWithAll.include([imgdiv,newdiv]);
     
    elincrement++; 

});
    
    //start initioation and tween on startup
    var slcon  = new Element('div', {id: 'slidercontent'});
    slcon.set('html',elementsArrWithAll[0][1]);   
    slcon.inject($('slider'));

    $('slidercontent').tween('left', '0');
         
    var myFx = new Fx.Tween('slidercontent', {
        duration: 'normal',
        link: 'chain',
        property: 'left'
    });
    

    var incrementor = 1;
    Array.each(elementsArr, function(el, index){
        
        if(incrementor == 1)
            linkclass = " activelink";
        else
            linkclass = "";
    
        paging = new Element('a', {
            href: '#',
            'class': 'sliderpaging'+linkclass,
            html: incrementor,
            rel: incrementor.toString(),
            events: {
                click: function(){
                                        
                    elName = "elclass"+this.get('rel');
                    
                    $$('.sliderpaging'). each(function (el, i){
                        el.removeClass("activelink");
                    });
                    
                    this.addClass("activelink");
                    
                    if(!$(elName).hasClass('activeimg')){
                         
                        oldactiveElement = $$('.activeimg');                        
                        oldactiveElement.set('tween', {duration: 1300}).fade(0);  
                        $(elName).set('tween', {duration: 1300}).fade(1.0);  
                        
                        oldactiveElement.removeClass('activeimg');
                        $(elName).addClass('activeimg');                    
                        
                        cas = elementsArrWithAll[this.get('rel')-1][1];
                        myFx.start(-400).chain(
                            //"this" refers to the calling object (in this case, the myFx object).
                            function(){ 
                                $('sliderelementcontent').set('html',cas );              
                                myFx.start(0); 
                            }                             
                        );   
     
                    }                 
                   clearInterval(timer);
                   return false;
                }
                
            }
        });
        
        paging.inject($('sliderNav'));
        
        incrementor++;
    });
    
    
    //console.log(elementsArrWithAll);
    
    var Site = { counter: 0 };
    var autoSlide = function(){ 
            
            activeElement = $$('.activelink');
             
            //alert(activeElement.get('class'));
            if(activeElement.getNext() == ""){
                //console.log("prev");  
                 newElement = activeElement.getParent().getFirst();
                 
            }
            else{
                //console.log("next"); 
                newElement = activeElement.getNext();
            	//alert(newElement.get('class'));
            }
            
            elName = "elclass"+newElement.get('rel');
            
           
            
            $$('.sliderpaging'). each(function (el, i){
                el.removeClass("activelink");
            });
            newElement.addClass("activelink");
           
				
                oldactiveElement = $$('.activeimg');
                oldactiveElement.set('tween', {duration: 1300}).fade(0);  
              
                $(elName).set('tween', {duration: 1300}).fade(1.0);
         
                oldactiveElement.removeClass('activeimg');
                $(elName).addClass('activeimg');                    
                
                cas = elementsArrWithAll[newElement.get('rel')-1][1];
                myFx.start(-400).chain(
                    //"this" refers to the calling object (the myFx object).
                    function(){ 
                        $('sliderelementcontent').set('html',cas );              
                        myFx.start(0); 
                    }     
                );   
                         
    };
    var timer = autoSlide.periodical(9500, Site); //adds the number of seconds at the Site.
 
});