var swappr = swappr || {}; swappr = { Init: function(setup_object) { swappr.addEvent(window, 'load', (function(setup_object) { return function(e) { swappr._Init(setup_object); } })(setup_object) ); }, addSwap: function(from, to) { swappr.addEvent(window, 'load', (function(from, to) { return function(e) { swappr._addSwap(from, to); } })(from, to) ); }, startSwap: function(anchor, setup_object) { if (!setup_object.is_fading) { setup_object.is_fading = true; setup_object.to_img.src = anchor.href; setup_object.from_img.onload = ''; swappr.showLoader(setup_object); setup_object.to_img.onload = (function(setup_object) { return function(e) { swappr.doSwap(setup_object); swappr.hideLoader(setup_object); } })(setup_object); setup_object.to_img.onerror = (function(setup_object) { return function(e) { setup_object.is_fading = false; } })(setup_object); } }, doSwap: function(setup_object) { if (setup_object.to_img == setup_object.second) { setup_object.to_img.style.marginLeft = -(setup_object.to_img.offsetWidth/2)+"px"; } var start_time = new Date().getTime(); setup_object.fade_in = setInterval( (function(start_time, anchor, setup_object) { return function(e) { var delta = new Date().getTime() - start_time; if (delta >= setup_object.time) { delta = setup_object.time; clearInterval(setup_object.fade_in); setup_object.is_fading = false; swappr.setFade(setup_object.to_img, setup_object.rate*delta); swappr.setFade(setup_object.from_img, 100-setup_object.rate*delta); if (setup_object.from_img == setup_object.first) { setup_object.from_img = setup_object.second; setup_object.to_img = setup_object.first; } else { setup_object.from_img = setup_object.first; setup_object.to_img = setup_object.second; } } else { swappr.setFade(setup_object.to_img, setup_object.rate*delta); swappr.setFade(setup_object.from_img, 100-setup_object.rate*delta); } } })(start_time, anchor, setup_object) , 25); }, setFade:function(target, fade) { target.style.opacity = fade/100; target.style.filter = 'alpha(opacity='+fade+')'; }, showLoader: function(setup_object) { setup_object.loader_interval = setInterval( (function(setup_object) { return function(e) { swappr.animateLoader(setup_object); } })(setup_object) , 25); setup_object.loader.style.display = 'block'; }, hideLoader: function(setup_object) { clearInterval(setup_object.loader_interval); setup_object.loader.style.display = 'none'; }, animateLoader: function(setup_object) { var delta = new Date().getTime() - setup_object.loader_start; if (!setup_object.loader_toggle) { swappr.setFade(setup_object.loader, (setup_object.rate/2)*delta); } else { swappr.setFade(setup_object.loader, 100-((setup_object.rate/2)*delta)); } if (delta >= setup_object.time) { setup_object.loader_start = new Date().getTime(); setup_object.loader_toggle = (setup_object.loader_toggle ? false : true); } }, processAnchors: function(element, to) { swappr.addEvent(window, 'load', (function(element, to) { return function(e) { swappr._processAnchors(element, to); } })(element, to) ); }, addEvent: function(target, event_type, callback, bubble) { bubble = (typeof bubble !== 'undefined' ? bubble : false); if (typeof target.attachEvent !== 'undefined') { target.attachEvent('on'+event_type, callback); } else if (typeof target.addEventListener !== 'undefined') { target.addEventListener(event_type, callback, bubble); } }, _Init: function(setup_object) { var time = (setup_object.time ? setup_object.time : 250); var from_element = document.getElementById(setup_object.from); var display = document.getElementById(setup_object.display); var display_imgs = display.getElementsByTagName('img'); if (!display_imgs[0]) { first_img = document.createElement('img'); display.appendChild(first_img); } else { first_img = display_imgs[0]; } if (!display_imgs[1]) { var second_img = document.createElement('img'); display.appendChild(second_img); } else { var second_img = display_imgs[1]; } if (!second_img.style.position) { second_img.style.position = "absolute"; second_img.style.left = "50%"; } swappr.setFade(second_img, 0); if (!display.style.position) { display.style.position = 'relative'; } var loader = document.createElement('div'); loader.className = 'swappr_loader'; loader.style.display = 'none'; //loader.style.position = "absolute"; //loader.style.top = "50%"; //loader.style.left = "50%"; loader.innerHTML = (setup_object.loader_text ? setup_object.loader_text : 'loading. . .'); display.appendChild(loader); //loader.style.marginLeft = -(loader.offsetWidth/2)+"px" //loader.style.marginTop = -(loader.offsetHeight/2)+"px" swappr._processAnchors({display: display, first: first_img, second: second_img, to_img: second_img, from_img: first_img, from: from_element, loader: loader, loader_start: new Date().getTime(), time: time, rate: (100/time)}); }, _addSwap: function(anchor, setup_object) { this.addEvent(anchor, 'click', (function(anchor, setup_object) { return function(e) { swappr.startSwap(anchor, setup_object); return swappr.preventDefaultEvent(e); } })(anchor, setup_object) ); }, _processAnchors: function(setup_object) { var anchors = setup_object.from.getElementsByTagName('a'); for (anchor in anchors) { swappr._addSwap(anchors[anchor], setup_object); } }, preventDefaultEvent: function(event) { if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } return false; }, postLoad: function() { scrollr.addSwap = scrollr._addSwap; scrollr.processAnchors = scrollr._processAnchors; scrollr.Init = scrollr._Init; } }; swappr.addEvent(window, 'load', swappr.postLoad);