if(!iWebkit.slide){ iWebkit.slide = new function(){ var tween_time = 2; // SECONDS THAT THE SLIDE TAKES var history = [window.location.href]; var load = function(url, dir){ if(!dir) dir = 'forward'; for(var i=0, old_url; old_url=history[i]; i++){ if(old_url == url){ dir = 'back'; // IF YOU ARE LAZY AND DON'T WANT TO SPECIFY DIRS ON TAGS THEN THIS TAKES A GUESS history.splice(i, history.length-i); } } var width = document.body.offsetWidth; // PUT THE CURRENT BODY IN A DIV var temp_div = document.createElement('DIV'); temp_div.style.width = width+"px"; temp_div.innerHTML = document.body.innerHTML; document.body.innerHTML = ''; document.body.appendChild(temp_div); document.body.style.position = 'absolute'; var loading_div = document.createElement('DIV'); // PUT THE UPCOMING BODY IN A DIV, BEFORE OR AFTER THE CURRENT ONE loading_div.style.marginTop = '160px'; loading_div.style.textAlign = 'center'; loading_div.style.position = "absolute"; loading_div.innerHTML = 'Loading...'; loading_div.style.top = "0px"; loading_div.style.width = width+"px"; if(dir == "back") width = -1*width; loading_div.style.left = width+"px"; document.body.appendChild(loading_div); // MOVE THE BODY LEFT OR RIGHT var tween = Animate.Tween(document.body.style,'left','regularEaseOut',0,-1*width,tween_time,'px'); // LOAD THE UPCOMING BODY DIV WITH AJAX var http = new XMLHttpRequest(); http.open('get', url, true); http.onreadystatechange = function(){ if(http.readyState == 4 && http.status == 200){ history.push(url); var m = http.responseText.match(/]*)class=(\"|')([^(\"|')]+)/i); loading_div.style.marginTop = ''; loading_div.style.textAlign = ''; loading_div.innerHTML = http.responseText; tween.onMotionFinished = function(){ document.body.innerHTML = loading_div.innerHTML; document.body.style.position = 'static'; document.body.className = m ? m[3] : ""; // CAUSE THE STUPID DEMO DEPENDS A LOT ON BODY CLASS NAMES! iWebkit.init(); updateLinks(loading_div); loadScripts(http.responseText); } if(tween.finished) tween.onMotionFinished(); } }; http.send(null); } // UPDATE ALL THE LINKS (EXCEPT 'noeffect') SO THEY USE THE SLIDING SYSTEM var updateLinks = function(el){ var as = document.getElementsByTagName("a"); for (var i=0, a; a=as[i]; i++) { if(a.href && !a.href.match(/#/) && !a.className.match("noeffect")){ new function(a){ a.onclick = function(){ load(a.href, a.getAttribute('dir')); return false; } }(a); } } } window.addEventListener('load', function(){ updateLinks(document); }, false); } } var Animate = new function(){ var tween = function(obj,prop,func,begin,finish,duration,suffix,prefix){ func = Animate[func]; var this_tween = this; var starting_time = (new Date()).getTime(); var ending_time = starting_time + (duration*1000); var current_update; this.update = function(){ var now = new Date().getTime(); var t = (now-starting_time)/1000; var new_pos = func(t, begin, finish-begin, duration); obj[prop] = prefix+new_pos+suffix; if(now <= ending_time){ current_update = window.setTimeout(this_tween.update,100); } else{ obj[prop]=prefix+finish+suffix; if(this_tween.onMotionFinished) this_tween.onMotionFinished(); this_tween.finished = true; cancel(); return true; } } var cancel = function(){ if(current_update) window.clearTimeout(current_update); obj.tweens[prop] = false; } this.cancel=cancel; } this.Tween = function(obj, prop, func, begin, finish, duration, suffix, prefix){ if (!arguments.length || !obj) return; if(!suffix) suffix = ''; if(!prefix) prefix = ''; // IF A TWEEN AFFECTING THE SAME PROPERTY ON THE SAME OBJECT IS ALREADY GOING ON, THEN CANCEL THAT ONE AND SET THE BEGINNING OF THIS ONE TO THE CURRENT VALUE OF THE THAT ONE if(obj.tweens && obj.tweens[prop]){ obj.tweens[prop].cancel(); begin = parseFloat(obj[prop]); } var t = new tween(obj,prop,func,begin,finish,duration,suffix,prefix); if(!obj.tweens)obj.tweens = []; obj.tweens[prop] = t; t.update(); return t; } this.regularEaseIn = function(t,b,c,d){ return c*(t/=d)*t + b; } this.regularEaseOut = function(t,b,c,d){ return -c *(t/=d)*(t-2) + b; } this.regularEaseInOut = function(t,b,c,d){ if ((t/=d/2) < 1) return c/2*t*t + b; return -c/2 * ((--t)*(t-2) - 1) + b; } } function loadScripts(string,start){ if(!start) start = 0; var src; while(true){ start = string.indexOf('',start); if(end = string.indexOf('',tag_end)){ var script_string = string.substr(start,tag_end-start); if(end-start > 1){ var e = newEl("script",{'type':'text/javascript'}); if(src = /src=['"](.+s)['"]/.exec(script_string)){ e.src = src = src[1]; var scripts = document.getElementsByTagName("head")[0].getElementsByTagName("script"); for(var i=0,script; script=scripts[i]; i++){ if(script.src == e.src){ // THAT SCRIPT IS ALREADY LOADED.. return loadScripts(string,end); } } // OTHERWISE LOAD THE NEW SCRIPTS BUT DON'T LOAD ANY OTHERS UNTIL THIS ONE IS FINISHED (CAUSE OTHERS MIGHT DEPEND ON THIS..) document.getElementsByTagName("head")[0].appendChild(e); e.onreadystatechange = function(){loadScripts(string,end);} e.onload = function(){loadScripts(string,end);} return; } else{ if(document.all){ e.text = string.substr(tag_end+1,end-tag_end-1); }else{ e.innerHTML = string.substr(tag_end+1,end-tag_end-1); } document.getElementsByTagName("head")[0].appendChild(e); } } } start = end; } else{ break; } } if(document.createEvent){ var evt = document.createEvent('HTMLEvents'); evt.initEvent('DOMContentLoaded',false,false,document,1); document.dispatchEvent(evt); } else{ //window.fireEvent('domready'); }; }