function SwitchTopTeaser() { this.now = 0; this.divs = []; this.dots = []; this.config = { wait : 5 }; this.counter = null; this.init(); } SwitchTopTeaser.prototype.init = function() { if(!$('topTeaserSwitch')) return; var divs = $('topTeaserSwitch').getElementsByTagName('DIV'); for(var i = 0, max = divs.length; i < max; ++i) { var div = divs[i]; if(div && div.className && div.className == "teaser-topbox") { this.divs[this.divs.length] = div; div.style.position = 'absolute'; div.style.top = '0px'; } } var ref = this; var topSwitch = $('topTeaserSwitch'); topSwitch.style.position = 'relative'; topSwitch.style.width = '717px'; topSwitch.style.height = '292px'; topSwitch.onmouseover = function() { clearTimeout( ref.counter ); ref.counter = null; }; topSwitch.onmouseout = function() { ref.startTimer(); }; if(this.divs.length > 1) { this.drawDots(topSwitch); this.startTimer(); } }; SwitchTopTeaser.prototype.drawDots = function(topTeaserBox) { var ref = this; function setEffect(obj, i) { obj.onclick = function() { clearTimeout( ref.counter ); if(ref.now != i) ref.fade(ref.divs[ref.now], i); }; obj.onmouseout = function() { if(ref.now != i) { this.style.color = '#ffffff'; } }; } var frg = document.createDocumentFragment(); var divB = document.createElement('DIV'); divB.style.position = 'absolute'; divB.style.bottom = '8px'; divB.style.right = '8px'; divB.style.width = '686px'; divB.style.height = '15px'; divB.style.zIndex = 10; divB.style.textAlign = 'center'; for(var i = 0, max = this.divs.length; i < max; ++i) { var span = document.createElement('SPAN'); span.innerHTML = ' &bull; '; span.style.cursor = 'pointer'; span.style.color = '#ffffff'; span.style.fontWeight = 'bold'; if(this.now == i) span.style.color = '#CC8617'; span.onmouseover = function() { this.style.color = '#CC8617'; }; setEffect(span, i); frg.appendChild(span); this.dots[this.dots.length] = span; } divB.appendChild(frg); topTeaserBox.appendChild(divB); }; SwitchTopTeaser.prototype.startTimer = function() { if(this.counter == null && this.divs.length > 1) (function(obj) { obj.counter = setTimeout( function() { obj.run.call(obj); } , obj.config.wait*1000); })(this); }; SwitchTopTeaser.prototype.run = function() { var next = this.now+1; if(next > this.divs.length-1) next = 0; this.fade(this.divs[this.now], next); this.counter = null; this.startTimer(); }; SwitchTopTeaser.prototype.fade = function(now, next) { var ref = this; var counter = 0; var nextDiv = this.divs[next]; setOpacity(nextDiv, counter); nextDiv.style.display = 'block'; var fadeing = function() { counter+= 10; if(counter < 100) { setOpacity(now, 100-counter); setOpacity(nextDiv, counter); setTimeout(function() { fadeing(); }, 100); } else { now.style.display = 'none'; now.style.zIndex = 0; nextDiv.style.zIndex = 1; nextDiv.style.opacity = ''; nextDiv.style.MozOpacity = ''; nextDiv.style.filter = ''; ref.dots[ref.now].style.color = '#ffffff'; ref.dots[next].style.color = '#CC8617'; ref.now = next; } }; fadeing(); }; DomLoader.add("switchTopTeaser.js", function() { new SwitchTopTeaser();});