﻿function BuildDivString(index) {
    // bild darf nicht hoeher als 132 pixel sein!!!
    // bild darf nicht breiter als 320
    // bilder sind jetzt alle 120 hoch und 290 breit
    // höhe des bereiches hier ist 132

    var margintop = 0;
    var marginbottom = 0;

    var html =
				'<div>' +
				'<span style="' +
    //'width:'+images[index].w+'px;height:'+images[index].h+'px;'+
				'width:290px;height:120px;' +
				'margin-top:' + margintop + 'px;' +
				'margin-bottom:' + marginbottom + 'px;' +
    //'margin-right:'+marginright+'px;'+
    //'margin-left:'+marginleft+'px;'+
				'position:relative;white-space:pre-line;display:block;background:transparent;' +
				'background-image: url(\'' + images[index].url + '\');' +
				'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + images[index].url + '\');background-position: center;background-repeat: no-repeat;' +
				'" ' +
                'title="'+ images[index].title+'" ' +
                '></span>' +
				'</div>';

    return html;
}
function rotateBrands() {
    var imgcount = $('div#brandrotator div').length;
    if (imgcount < images.length)
        $('div#brandrotator').append(BuildDivString(imgcount));

    //Get the first image
    var current = ($('div#brandrotator div.show') ? $('div#brandrotator div.show') : $('div#brandrotator div:first'));

    //Get next image, when it reaches the end, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#brandrotator div:first') : current.next()) : $('div#brandrotator div:first'));

    //Set the fade in effect for the next image, the show class has higher z-index
    next.css({ opacity: 0 })
				.addClass('show')
				.animate({ opacity: 1 }, 1000);

    //Hide the current image
    current.animate({ opacity: 0 }, 1000)
				.removeClass('show');
}

