/**** SETTINGS */

//global
var glob = new Object();
glob['speed']               = 15;
glob['stepsize']            = 1; // in Pixel per Intervall
glob['dir_small_pics']      = 'images/slideshow/small/';
glob['dir_big_pics']        = 'images/slideshow/big/';

glob['img_fade_out_left']   = 'images/slideshow/fade_out_left.png';
glob['img_fade_out_right']  = 'images/slideshow/fade_out_right.png';

//Slideshow Container
var slideshow = new Object();
slideshow['width']          = 760;
slideshow['height']         = 160;
slideshow['background']     = '#ddd';

//Settings für kleine Bilder
var smallpic    = new Object();
smallpic['width']            = 150;
smallpic['height']           = 150;
smallpic['margin-top']       = 3;
smallpic['margin-left']      = 3;
smallpic['margin-bottom']    = 3;

//Settings für große Bilder
var bigpic  = new Object();
bigpic['width']             = 300;
bigpic['height']            = 300;
bigpic['border-top']        = 0;
bigpic['border-right']      = 230;
bigpic['border-bottom']     = 0;
bigpic['border-left']       = 230;
bigpic['border-color']      = '#fff';

//Bilder
var pics    = new Array();

pics[0] = new Object();
pics[0]['title']        = 'CargoMaster A - Der Treppensteiger für Profis';
pics[0]['filename']     = 'cargomaster_a_01.jpg';
pics[0]['href']         = 'produkte/treppensteiger/cargomaster_a/';

pics[1] = new Object();
pics[1]['title']        = 'CargoMaster A - Der Treppensteiger für Profis';
pics[1]['filename']     = 'cargomaster_a_02.jpg';
pics[1]['href']         = 'produkte/treppensteiger/cargomaster_a/';

pics[2] = new Object();
pics[2]['title']        = 'CargoMaster C - Die flexible Transporthilfe';
pics[2]['filename']     = 'cargomaster_c_01.jpg';
pics[2]['href']         = 'produkte/treppensteiger/cargomaster_c/';

pics[3] = new Object();
pics[3]['title']        = 'Modatech Transportkarre - für schwere Lasten';
pics[3]['filename']     = 'modatech_transportkarre_01.jpg';
pics[3]['href']         = 'produkte/modatech_transportkarre/';

pics[4] = new Object();
pics[4]['title']        = 'Crema Lift 125';
pics[4]['filename']     = 'crema_lift_125_01.jpg';
pics[4]['href']         = 'produkte/sarglifte/crema_lift_125/';

pics[5] = new Object();
pics[5]['title']        = 'Crema Lift 125';
pics[5]['filename']     = 'crema_lift_125_02.jpg';
pics[5]['href']         = 'produkte/sarglifte/crema_lift_125/';

pics[6] = new Object();
pics[6]['title']        = 'Sarg Lift 165 - Ihr kraftvoller Helfer';
pics[6]['filename']     = 'sarg_lift_165_01.jpg';
pics[6]['href']         = 'produkte/sarglifte/sarg_lift_165/';

pics[7] = new Object();
pics[7]['title']        = 'Sarglift Basic';
pics[7]['filename']     = 'sarg_lift_basic_01.jpg';
pics[7]['href']         = 'produkte/sarglifte/basic/';

pics[8] = new Object();
pics[8]['title']        = 'PT 18 - Absenkbare Anhänger';
pics[8]['filename']     = 'pt18_01.jpg';
pics[8]['href']         = 'produkte/absenkbare_anhaenger/';

pics[9] = new Object();
pics[9]['title']        = 'PT 35 - Absenkbare Anhänger';
pics[9]['filename']     = 'pt35_01.jpg';
pics[9]['href']         = 'produkte/absenkbare_anhaenger/';

pics[10] = new Object();
pics[10]['title']        = 'Vario Max';
pics[10]['filename']     = 'vario_max_01.jpg';
pics[10]['href']         = 'produkte/treppensteiger/vario_max/';

pics[11] = new Object();
pics[11]['title']        = 'Practolino';
pics[11]['filename']     = 'practolino_01.jpg';
pics[11]['href']         = 'produkte/practolino/';

pics[12] = new Object();
pics[12]['title']        = 'Practolino';
pics[12]['filename']     = 'practolino_02.jpg';
pics[12]['href']         = 'produkte/practolino/';

/**** INIT SLIDESHOW */
// Breite aller kleinen Bilder
var totalWidth = pics.length * smallpic['width'] + pics.length * smallpic['margin-left'];

//Preload Image Variable
var preloadImage = new Array();

function slideshowInit()
{
    //Settings für die Slideshow übernehmen    
    document.getElementById('slideshow').style.overflow     = "hidden";
    document.getElementById('slideshow').style.width        = slideshow['width'] + "px";
    document.getElementById('slideshow').style.height       = slideshow['height'] + "px";
    document.getElementById('slideshow').style.background   = slideshow['background'];

    // HTML String initialisieren für die großen und kleinen Bilder
    var HtmlSmallImages = "";
    var HtmlBigImages   = "";

    // String aufbauen + großes Bild vorladen
    for (var i = 0; i < pics.length; i++)
    {
           HtmlSmallImages = HtmlSmallImages + 
                "<a href=\""+ pics[i]['href'] +"\">"+
                "<img src=\""+ glob['dir_small_pics'] + pics[i]['filename'] +"\" " +
                "style=\"margin-top:" + smallpic['margin-top'] + "px;" +
                "margin-left:" + smallpic['margin-left'] + "px;" +
                "margin-bottom: " + smallpic['margin-bottom'] + "px;" + "\" " +
                "onmouseover=\"slideshowBigPic(" + i +")\" " +
                "onmouseout=\"slideshowBigPicClear(" + i +")\"></a>";
        
            preloadImage[i] = new Image();
            preloadImage[i].src = glob['dir_big_pics'] + pics[i]['filename'];
    }
    
    // 2 Boxes für wiederholenden Bildlauf
    var slideshowBox1= "<div id=\"slideshowBox1\" style=\"position: absolute; " + 
                        "left: "+ parseInt(totalWidth / 2) + "px; " + 
                        "width:"+ totalWidth + "px;\" " +
                        "onmouseover=\"slideshowStop()\" onmouseout=\"slideshowPlay()\">"
                        + HtmlSmallImages + "</div>";    
    var slideshowBox2 = "<div id=\"slideshowBox2\" style=\"position: absolute; " + 
                        "left: -"+ parseInt(totalWidth / 2) + "px; " + 
                        "width:"+ totalWidth + "px;\" " +
                        "onmouseover=\"slideshowStop()\" onmouseout=\"slideshowPlay()\">"
                        + HtmlSmallImages + "</div>";   
                        
    // Fade Outs
    var fadeoutleft =   "<div style=\"width: 50px; height:" + slideshow['height'] + "px;" +
                        "position:absolute;left:0px;background:transparent url(" + 
                        glob['img_fade_out_left'] + ") repeat-y; z-index:10;\"></div>"
    var fadeoutright =  "<div style=\"width: 50px; height:" + slideshow['height'] + "px;" +
                        "position:absolute;right:0px;background:transparent url(" + 
                        glob['img_fade_out_right'] + ") repeat-y; z-index:10;\"></div>"
                
    document.getElementById('slideshow').innerHTML =
        fadeoutright + fadeoutleft + slideshowBox1 + slideshowBox2;


    return(1);
}

// Die Funktion steuert den Bildlauf
function slideshowRun()
{
    // Position der Boxen
    var positionBox1 = document.getElementById('slideshowBox1');
    var positionBox2 = document.getElementById('slideshowBox2');
    
    // left Wert ohne "px" und als Integer
    var leftBox1 = parseInt(positionBox1.style.left.replace('px', ''));
    var leftBox2 = parseInt(positionBox2.style.left.replace('px', ''));
    
    // Bildlauf ansich = Position 'left' + definierte Schrittgröße
    positionBox1.style.left = leftBox1 + glob['stepsize'] + "px";
    positionBox2.style.left = leftBox2 + glob['stepsize'] + "px";

    // Wenn eine der Box das Ende erreicht startet sie wieder am Anfang (im Hidden Bereich)
    if(leftBox1 > totalWidth) { positionBox1.style.left = "-" + totalWidth + "px"; }
    if(leftBox2 > totalWidth) { positionBox2.style.left = "-" + totalWidth + "px"; }
    
    // Timeout bevor die Funktion wieder aufgerufen wird
    timeout = setTimeout("slideshowRun()", glob['speed']);
}

// Stop 
function slideshowStop()
{
    window.clearTimeout(timeout);
}

// Play 
function slideshowPlay()
{
    slideshowRun();
}


// Großes Bild anzeigen
function slideshowBigPic(id)
{
    //window.clearTimeout(timeoutBigPic);
	
	/*
    document.getElementById('slideshowbigpic').innerHTML =
        "<div style=\"border-width: " + bigpic['border-top'] +"px " + bigpic['border-right'] + "px "
         + bigpic['border-bottom'] + "px " + bigpic['border-left'] + "px; " + 
         "border-color: " + bigpic['border-color'] + "; border-style: solid; text-align: center;\">" +
        "<img src=\""+ glob['dir_big_pics'] + pics[id]['filename'] +"\" style=\"margin-bottom: 3px;\"" + 
        " \/> <br \/><b>" + pics[id]['title'] + "<\/b><br \/>"+
        "<a href=\""+ pics[id]['href'] +"\">Hier klicken für weitere Informationen.<\/a><\/div>";
    */
}

// Großes Bild ausblenden
function slideshowBigPicClear()
{
    //timeoutBigPic = setTimeout("document.getElementById(\'slideshowbigpic\').innerHTML = \" \"",1000);
}


// RUN....
if(slideshowInit())
{
    slideshowRun();
};