var Highlights = Class.create({ initialize: function(holder, name, action, section,data) { this.holder = holder; this.name = name; //this.data = data; this.timer; this.action = action; this.section = section //this.apiCall(this.action); /*alert(data); alert(holder); alert(name); alert(action); alert(section);*/ //(!data) ? this.apiCall(this.action) : this.create(); this.data = data; this.length = 9; this.create(); }/*, apiCall: function(action, params){ var options = { method : 'post', parameters : 'r=feed/highlight§ion='+ this.section, onSuccess: this.onComplete.bindAsEventListener(this) }; new Ajax.Request(Loader.AJAX_PATH + 'index.php', options); }, onComplete: function(transport) { var json = transport.responseJSON; this.data = json.items; this.length = json.length; this.create(); }*/, version: '0.0.1', z: 0, duration: 7000, current: -1, loaded: 0, n: 0, status: false, create: function(){ var target = $(this.holder).update(""); var ul_controls = new Element('ul', { 'id': this.holder + '-controls' }); var div_images = new Element('div', { 'id': this.holder + '-images' }); target.appendChild(div_images); target.appendChild(ul_controls); this.addImage(this.loaded); var tmp_a = new Element('a', { href: 'javascript:' + this.name + '.pause();', 'id': 'highlights-pause' }).update(""); var play = new Element('li', { 'id': this.holder + '-control-play', 'class': 'right' }).update(tmp_a); ul_controls.appendChild(play); this.start(0); }, play: function(){ if (this.status == false){ this.start(0); var play = $(this.holder + '-control-play').getElementsByTagName('a')[0]; play.id = "highlights-pause"; play.writeAttribute('href', 'javascript:'+this.name+'.pause()'); play.update(""); } }, pause: function(){ this.status = false; clearTimeout(this.timer); var play = $(this.holder + '-control-play').getElementsByTagName('a')[0]; play.id = "highlights-play"; play.writeAttribute('href', 'javascript:'+this.name+'.play()'); play.update(""); }, start: function(d){ this.status = true; this.timer = setTimeout(this.next.bindAsEventListener(this), d); }, next: function(){ this.current++; if (this.current > this.loaded) this.current = 0; this.fadeIn(this.holder + "-" + this.current); this.start(this.duration); }, addImage: function(id){ var target = $(this.holder); var div_images = $(this.holder + "-images"); var ul_controls = $(this.holder + "-controls"); var tmp_link = new Element('a', { 'href': this.data[id].link, 'target' : '_blank' }); var tmp_img = new Element('img', { 'id': this.holder + "-" + id }); tmp_img.onload = this.loader.bindAsEventListener(this); tmp_img.setStyle({ 'display': 'none' }); tmp_link.appendChild(tmp_img) div_images.appendChild(tmp_link); tmp_img.src = this.data[id].image; var nm = (this.data[id].ad == true) ? "A" : this.n+1; if (this.data[id].ad != true) this.n++; var tmp_a = new Element('a', { href: "javascript:" + this.name + ".view('" + this.holder + "-" + id + "');"}).update(nm); var tmp_li = new Element('li', { 'id': this.holder + "-control-" + id }).update(tmp_a); ul_controls.appendChild(tmp_li); }, loader: function(){ if (this.loaded < (this.length-1)){ this.loaded++; this.addImage(this.loaded); } }, view: function (id){ this.pause(); this.fadeIn(id); }, fadeIn: function(id){ var target = $(id); if (target.style.display == "none"){ this.current = this.getNode(id); target.setStyle({ 'display': 'none', 'zIndex': this.z++ }); new Effect.Appear(target, { duration: 0.5, afterFinish:this.disarm.bindAsEventListener(this) }); this.select(id); } }, disarm: function(){ for (var i = 0; i < this.length; i++){ var image = $(this.holder + "-" + i); if (this.current != i && image) image.setStyle({ 'display': 'none' }); } }, select: function(id){ var n = this.getNode(id); for (var i = 0; i < (this.loaded+1); i++){ var target = $(this.holder + "-control-" + i).getElementsByTagName("a")[0]; (i != n) ? target.removeClassName('selected') : target.addClassName('selected'); } }, getNode: function(id){ var n = id.split("-"); n = n[n.length-1]; return n; } });