/**
* @file: SlideShow.js
* @author: Daniel Ullrich, RESPONSE GmbH
* @description:
* Klasse SlideShow
* 
* kreiert eine SlideShow in einem dafür vorgesehenen div.
*
* Benutzung:

1.) 2 Divs erzeugen
1.1.) fotonavi als Rahmen mit beliebiger breite, vorzugsweise mit overflow: hidden
1.2.) fotonavi_inner mit fester Höhe. Breite wird dynamisch durch die Bilder bestimmt

2.) Bilder Hinzufügen und div füllen
2.1.) sl.addImage(src, width, height, attributes) 
        - attributes ist ein Array dem beliebig viele css-attribute zugewiesen werden können. 
            Bsp: new Array("onclick":"javascript: alert('Bild wurde angeklickt');", "style.margin":"2px")
2.2.) sl.createSlideShow() erzeugt die Divs mit den Bildern und füllt das "fotonavi_inner"-div damit

3.) Verlinkungen für das fading oder repositionierung einbauen
3.1.) sl.fade(244); als parameter für die fade-methode die anzahl der pixel für die zurückzulegende Entfernung angeben

Beispiel:
<div id="fotonavi" style="width: 900; height: 240px; overflow: hidden;">
<div id="fotonavi_inner" style="height: 240px;">
</div><!-- schließt ID footnavi_inner //-->
</div><!-- schließt ID footnavi //-->
<script type="text/javascript">
sl.addImage('tahitiperlenkette.jpg', '242', '230', '');
sl.addImage('perlenkette.jpg', '242', '230', '');
sl.addImage('amethystkette.jpg', '242', '230', '');
sl.addImage('collier_de_chien.jpg', '242', '230', '');
sl.addImage('perlenkette.jpg', '242', '230', '');
sl.addImage('tahitiperlenkette.jpg', '242', '230', '');

sl.createSlideShow();
</script>

<img src="images/pfeillinks.gif" style="curser: pointer" onclick="javascript: sl.fade(-244);">
<img src="images/pfeilrechts.gif" style="curser: pointer" onclick="javascript: sl.fade(244);">

**/

// Browserweiche
var ie=false;
var ua = navigator.userAgent;
if(ua.indexOf("MSIE") >=0) {
    ie=true;
}

function getBrowser(){
        if(!ie){
            var version=navigator.appVersion;
            browser='Mozilla';
            if(version.indexOf('Safari')>0)
            {
                browser='safari';
                if(version.indexOf('Chrome')>0)
                {
                    browser='chrome';
                }   
            }
        }
        else
        {
            browser='IExplorer';
        }
        return browser;
}


/* Klassendefinition */
function SlideShow(){
    this.constructor=SlideShow;
    this.elems= new Array();
    this.elemcnt=0;
    this.width='100%';
    this.height='220px';
    this.imgDir='/cms/images/slideshow/';
    this.outerDivID='fotonavi';
    this.outerDiv=null;
    this.outerDivSize='1000';
    this.targetDivID='fotonavi_inner';
    this.targetDiv=null;
    this.targetDivSize=0;
    this.imgcnt=0;
    this.innerWidth=0;
    this.innerPos=0;
    this.cssDivClass='slideShowImageDivs';
    this.cssImgClass='slideShowImages';
    this.currentImg=0;
    this.additionalTextDivHeight=20;
    this.margin=0;
    this.inactiveTrans=0.4;
    this.activeTrans=1.0;
    this.stopfadein=new Array();
    this.stopfadeout=new Array();
    
    this.addImage=function(src, width, height, attributes){
        this.elems[this.imgcnt]=new Array(src, width, height,attributes);
        this.imgcnt++;
    };
    
    this.prepare=function(){
        this.targetDiv=document.getElementById(this.targetDivID);
        this.outerDiv=document.getElementById(this.outerDivID);
        this.outerDivSize=parseInt(str_replace('px','',this.outerDiv.style.width));
        //this.targetDiv.style.overflow='hidden';
    }
    
    this.setCssDivClass=function(classname){
        this.cssDivClass=classname;
    }
    
    this.setCssImgClass=function(classname){
        this.cssImgClass=classname;
    }
    
    this.creatediv=function(id, html, width, height, margin, attribs) {

       var newdiv = document.createElement('div');
       newdiv.setAttribute('id', id);
        // Imagetext added?
        if(typeof(attribs[0])!='undefined' && attribs[0]!='')
        {
            height=(parseInt(str_replace('px','',height))+this.additionalTextDivHeight);
            html='<table border="0" cellpaddin="0" cellspacing="0" id="'+id+'Table" class="slideshowTable"><tr><td class="slideshowImgContainer">'+html+'</td></tr><tr><td class="slideshowImgHeader"><img src="/cms/media/bilder/pfeil.gif">'+attribs[0]+'</td></tr><tr><td class="slideshowImgDescription" style="width: '+width+'px"><div id="'+attribs[4]+'" class="slideshowImgDescriptionDiv"></div></td></tr></table>';
        }

       if (typeof(margin)!='undefined') {
           margin=this.margin;
       }
        newdiv.style.margin = margin;
       
       if (typeof(width)!='undefined') {
           newdiv.style.width = width;
       }
       
       if (typeof(height)!='undefined') {
           newdiv.style.height = height;
       }
       
       if (typeof(background)!='undefined') {
           newdiv.style.background = background;
       }

       if (html) {
           newdiv.innerHTML = html;
       } else {
           newdiv.innerHTML = '';
       }
       // Styleangaben für die divs
        if(this.cssDivClass!='')
           newdiv.className=this.cssDivClass;
        //newdiv.style.display='inline';
       
       
       
        

       
       this.targetDiv.appendChild(newdiv);
       this.margin=parseInt(margin);
    } 
    
    this.createSlideShow=function(){
    
        this.prepare();
        for(var elem in this.elems){
            var param_string='';
            var attribs=this.elems[elem][3];
            // Mouseover added?
            if(typeof(attribs[1])!='undefined' && attribs[1]!='')
            {
                param_string+=" onmouseover=\""+attribs[1]+"; sl.fadein('sl"+this.elemcnt+"Table');\" ";
              // img_elem.onmouseover=attribs[1];
            }
           
            // onclick added?
            if(typeof(attribs[2])!='undefined' && attribs[2]!='')
            {
                param_string+=" onclick=\""+attribs[2]+"\"";
               // img_elem.onclick=attribs[2];
            }
           
           // mouseout added?
            if(typeof(attribs[3])!='undefined' && attribs[3]!='')
            {
                param_string+=" onmouseout=\""+attribs[3]+"; sl.fadeout('sl"+this.elemcnt+"Table');\" ";
                // img_elem.onmouseout=attribs[3];
            }
            this.creatediv('sl'+this.elemcnt, '<img src="'+this.imgDir+this.elems[elem][0]+'" width="'+this.elems[elem][1]+'" height="'+this.elems[elem][2]+'" class="'+this.cssImgClass+'" id="slimg'+this.elemcnt+'" '+param_string+'>', this.elems[elem][1], this.elems[elem][2], this.margin, this.elems[elem][3]);
            this.innerWidth+=(parseInt(this.elems[elem][1]));
            
            //var img_elem=document.getElementById('slimg'+this.elemcnt);
            
            this.elemcnt++;
        }
        this.targetDiv.style.width=this.innerWidth+'px';
        this.targetDiv.style.top='2px';
        this.targetDiv.style.left=this.innerPos+'px';
        this.targetDiv.style.position='relative';
        
        // IE-Workaround - outer-div nochmal die overflow-eigenschaft zuweisen
        this.outerDiv.style.display='inline';
        this.outerDiv.style.overflow='hidden';
        
        this.targetDivSize=parseInt(str_replace('px','',this.targetDiv.style.width));
        this.currentImg=this.elems.length-1;
        
        if(this.outerDivSize>this.targetDivSize)
        {
        
            var l=document.getElementById('pfeilzelle');
            var r=document.getElementById('pfeilzellerechts');
            l.innerHTML='<img src="images/abstand.gif" width="12">';
            r.innerHTML='<img src="images/abstand.gif" width="12">';
            /*
            var l=document.getElementById('buttonLeft');
            var r=document.getElementById('buttonRight');
            if(typeof(l)!='undefined')
            {
                l.style.display='none';
            }
            if(typeof(r)!='undefined')
            {
                r.style.display='none';
            }
            */
        }
        else
        {
            var l=document.getElementById('pfeilzelle');
            l.innerHTML='<img src="images/abstand.gif" width="12">';
        }
        
        //this.animate();
    }
    
    this.animate=function(){
        this.move(-2);
        if(this.innerPos<-600)
        {
            return true;
        }
        //setTimeout("sl.animate()",10);
    }
    
    this.move=function(val){
        this.innerPos+=val;
        
        this.targetDiv.style.left=this.innerPos+"px";
    }
    
    this.fade=function(way,start,classname){
        if(way>1 || way <-1)
        {
            if(typeof(classname)=='undefined')
            {
                classname='sl';
            }
            var moveit=((way/2)-(way/3));
            way=way-moveit;
            this.move(moveit);
            setTimeout(classname+".fade("+way+","+start+")",50);
            return true;
        }
        this.move(way);
        return true;
    }
    
    this.autofade=function(scrollnum){
        if(scrollnum!=0)
        {
            if(scrollnum>0 && this.currentImg!=(this.elems.length-1))
            {
                if((this.currentImg+scrollnum)<(this.elems.length-1))
                {
                    target=this.currentImg+scrollnum;
                    var r=document.getElementById('pfeilzellerechts');
                    r.innerHTML='<img src="images/pfeilrechts.gif" class="fadebutton" onclick="javascript: sl.autofade(-1);" id="buttonRight">';
                }
                else
                {
                    target=this.elems.length-1;
                    var l=document.getElementById('pfeilzelle');
                    l.innerHTML='<img src="images/abstand.gif" width="12">';
                }
                var way=0;
                for(var i=this.currentImg; i<target; i++)
                {
                    way+=parseInt(this.elems[i][1])+parseInt(this.margin*2);
                }
            }
            else
            {
                if(scrollnum<0 && this.currentImg!=0)
                {
                    if((this.currentImg+scrollnum)>0)
                    {
                        target=this.currentImg+scrollnum;
                        var l=document.getElementById('pfeilzelle');
                        l.innerHTML='<img src="images/pfeillinks.gif" class="fadebutton" onclick="javascript: sl.autofade(1);" id="buttonLeft">';
                        var r=document.getElementById('pfeilzellerechts');
                        r.innerHTML='<img src="images/abstand.gif" width="12">';
                    }
                    else
                    {
                        var l=document.getElementById('pfeilzelle');
                        l.innerHTML='<img src="images/abstand.gif" width="12">';
                        var r=document.getElementById('pfeilzellerechts');
                        r.innerHTML='<img src="images/pfeilrechts.gif" class="fadebutton" onclick="javascript: sl.autofade(-1);" id="buttonRight">';
                        target=0;
                    }
                    var way=0;
                    for(var i=this.currentImg; i>target; i--)
                    {
                        way-=(this.elems[i][1])-(this.margin*2);
                    }
                }
                else
                {
                    way=0;
                    target=this.currentImg;
                    
                }
            }
            var left=parseInt(str_replace('px','',this.targetDiv.style.left));
            way=parseInt(way);

            if((left+way)<=((this.targetDivSize-this.outerDivSize)*(-1)))
            {
                way=((this.targetDivSize-this.outerDivSize)+left)*(-1);
                
            }
            else
            {
                var r=document.getElementById('pfeilzellerechts');
                r.innerHTML='<img src="images/pfeilrechts.gif" class="fadebutton" onclick="javascript: sl.autofade(-1);" id="buttonRight">';
            }
            if((left+way)>0)
            {
                way=(left*(-1));
            }
            if(way!=0)
            {
                this.fade(way);
                this.currentImg=target;
            }
        }
    }
    
    this.fadein=function(id, current){
        var elem=document.getElementById(id);
        if(typeof(current)=='undefined')
        {
            this.stopfadein[id]=false;
            this.stopfadeout[id]=true;
        }
        if(typeof(this.stopfadein[id])!='undefined' && this.stopfadein[id])
        {
            return false;
        }
        switch(getBrowser()){
        case 'IExplorer':
            if(typeof(current)!='undefined')
            {
                var opacity=parseFloat(current);
            }
            else 
            {
                if(elem.filters[0].opacity!='')
                {
                    var opacity=parseFloat(elem.filters[0].opacity);
                }
                else
                {
                    var opacity=parseFloat(this.inactiveTrans*100);
                }
            }
            
            if(opacity<(this.activeTrans*100))
            {
                opacity=opacity+1;
                elem.filters[0].opacity=opacity;
                setTimeout("sl.fadein('"+id+"',"+opacity+")",1);
            }
            else
            {
                elem.filters[0].opacity=this.activeTrans*100;
            }
            break;
        case 'Mozilla':
            if(typeof(current)!='undefined')
            {
                var opacity=parseFloat(current);
            }
            else 
            {
                if(elem.style.MozOpacity!='' && typeof(elem.style.MozOpacity)!='undefined')
                {
                    var opacity=parseFloat(elem.style.MozOpacity);
                }
                else
                {
                    var opacity=parseFloat(this.inactiveTrans);
                }
            }
            if(opacity<this.activeTrans)
            {
                opacity=opacity+0.01;
                elem.style.MozOpacity = opacity;
                setTimeout("sl.fadein('"+id+"',"+opacity+")",2);
            }
            else
            {
                elem.style.MozOpacity=this.activeTrans;
            }
            break;
        case 'safari':
        case 'chrome':
        default:
            if(typeof(current)!='undefined')
            {
                var opacity=parseFloat(current);
            }
            else 
            {
                if(elem.style.opacity!='' && typeof(elem.style.opacity)!='undefined')
                {
                    var opacity=parseFloat(elem.style.opacity);
                }
                else
                {
                    var opacity=parseFloat(this.inactiveTrans);
                }
            }
            if(opacity<this.activeTrans)
            {
                opacity=opacity+0.01;
                elem.style.opacity = opacity;
                setTimeout("sl.fadein('"+id+"',"+opacity+")",2);
            }
            else
            {
                elem.style.opacity=this.activeTrans;
            }
            break;
        }
    }
    
    this.fadeout=function(id, current){
        var elem=document.getElementById(id);
        if(typeof(current)=='undefined')
        {
            this.stopfadein[id]=true;
            this.stopfadeout[id]=false;
        }
        if(typeof(this.stopfadeout[id])!='undefined' && this.stopfadeout[id])
        {
            return false;
        }
        switch(getBrowser()){
        case 'IExplorer':
            if(typeof(current)!='undefined')
            {
                var opacity=parseFloat(current);
            }
            else 
            {
                if(elem.filters[0].opacity!='')
                {
                    var opacity=parseFloat(elem.filters[0].opacity);
                }
                else
                {
                    var opacity=parseFloat(this.activeTrans*100);
                }
            }
            if(opacity>(this.inactiveTrans*100))
            {
                opacity=opacity-1;
                elem.filters[0].opacity=opacity;
                setTimeout("sl.fadeout('"+id+"',"+opacity+")",2);
            }
            else
            {
                elem.filters[0].opacity=this.inactiveTrans*100;
            }
            break;
        case 'Mozilla':
            if(typeof(current)!='undefined')
            {
                var opacity=parseFloat(current);
            }
            else 
            {
                if(elem.style.MozOpacity!='' && typeof(elem.style.MozOpacity)!='undefined')
                {
                    var opacity=parseFloat(elem.style.MozOpacity);
                }
                else
                {
                    var opacity=parseFloat(this.activeTrans);
                }
            }
            
            if(opacity>this.inactiveTrans)
            {
                opacity=opacity-0.01;
                elem.style.MozOpacity = opacity;
                setTimeout("sl.fadeout('"+id+"',"+opacity+")",2);
            }
            else
            {
                elem.style.MozOpacity=this.inactiveTrans;
            }
            break;
        case 'safari':
        case 'chrome':
        default:
            if(typeof(current)!='undefined')
            {
                var opacity=parseFloat(current);
            }
            else 
            {
                if(elem.style.opacity!='' && typeof(elem.style.opacity)!='undefined')
                {
                    var opacity=parseFloat(elem.style.opacity);
                }
                else
                {
                    var opacity=parseFloat(this.activeTrans);
                }
            }
            
            if(opacity>this.inactiveTrans)
            {
                opacity=opacity-0.01;
                elem.style.opacity = opacity;
                setTimeout("sl.fadeout('"+id+"',"+opacity+")",2);
            }
            else
            {
                elem.style.opacity=this.inactiveTrans;
            }
            break;
        }
    }
    
/* End of class */
}


/* Zusatzfunktion str_replace */
function str_replace(search, replace, subject) {
    return subject.split(search).join(replace);
}

/* Initialisierung einer globalen Objektinstanz "sl" */
var sl=new SlideShow();