var currentScreenshot = 0;

function startFade(){
    switchFade();
    setInterval("switchFade()", 7500);
}

function switchFade(){
    if(currentScreenshot > 0) 
        fadeOut("screen" + currentScreenshot);
    currentScreenshot++;
    if(currentScreenshot > 4) currentScreenshot = 1;
    setTimeout('fadeIn("screen" + currentScreenshot)', 1200);
}

function fadeOut(identifier){
    document.getElementById(identifier).style.opacity = "0";
}

function fadeIn(identifier){
    document.getElementById(identifier).style.opacity = "1";
}

function watchVideo(src){
    document.getElementById("screencast").style.display = "block";
    document.getElementById("screencast-inner").innerHTML = "<video width='680' height='550' src='"+ src + "' autoplay controls>Sorry, your browser can't display HTML5 video.</video>";
}

function closeVideo(){
    document.getElementById("screencast").style.display = "none";
    document.getElementById("screencast-inner").innerHTML = "";
}

var showElement = null;
var showTimeout = null;
var hideElement = null;
var hideTimeout = null;

function showFeature(identifier){
	clearTimeout(showTimeout);
	clearTimeout(hideTimeout);
	
	var element = $("#quicktour-feature-desc-" + identifier);
    showElement = element;

    showElement.css("display", "block");
    
    setTimeout(function (){
        var duration = 0.25 + "s";
        showElement.css("-webkit-animation-iteration-count", "1");
        showElement.css("-webkit-animation-direction", "normal");
        showElement.css("-webkit-animation-timing-function", "ease-in-out");
        showElement.css("-webkit-animation-duration", duration);
        showElement.css("opacity", "1");
        showElement.css("webkitAnimationName", "zoomIn");
    }, 0);
    
    showTimeout = setTimeout(function (){
        showElement.css("webkitAnimationName", "");
        showElement = null;
    }, 300);
}

function hideFeature(identifier){
	clearTimeout(showTimeout);
	clearTimeout(hideTimeout);

    if(hideElement != null){
        hideElement.css("webkitAnimationName", "");
        hideElement.css("display", "none");
    }
    
	var element = $("#quicktour-feature-desc-" + identifier);
    hideElement = element;

    setTimeout(function (){
        var duration = 0.25 + "s";
        hideElement.css("-webkit-animation-iteration-count", "1");
        hideElement.css("-webkit-animation-direction", "normal");
        hideElement.css("-webkit-animation-timing-function", "ease-in-out");
        hideElement.css("-webkit-animation-duration", duration);
        hideElement.css("opacity", "0");
        hideElement.css("webkitAnimationName", "zoomOut");
    }, 0);
    
    hideTimeout = setTimeout(function (){
        hideElement.css("webkitAnimationName", "");
        hideElement.css("display", "none");
        hideElement = null;
    }, 300);
}

var currentMode = 0;

function switchMac(){
    if(currentMode == 0) return;
    
    currentMode = 0;
        
    if(supports_history_api())
        history.pushState({"mode": "mac"}, "Acrylic - Pulp for Mac", "/pulp/mac/");
    else
        window.location.hash = "#!/mac";
        
    document.title = "Acrylic - Pulp for Mac";

    document.getElementById("page-tab-ipad").setAttribute("class", "page-tab");
    document.getElementById("page-tab-mac").setAttribute("class", "page-tab page-tab-selected");

    document.getElementById("quicktour-ipad-1").style.opacity = 0;
    document.getElementById("quicktour-ipad-2").style.opacity = 0;
    document.getElementById("quicktour-mac-1").style.opacity = 0;
    document.getElementById("quicktour-mac-2").style.opacity = 0;
    document.getElementById("buy-mac").style.opacity = 0;
    document.getElementById("buy-ipad").style.opacity = 0;

    setTimeout(function (){
        document.getElementById("quicktour-ipad-1").style.display = "none";
        document.getElementById("quicktour-ipad-2").style.display = "none";        
        document.getElementById("quicktour-mac-1").style.display = "block";
        document.getElementById("quicktour-mac-2").style.display = "block";        
        document.getElementById("buy-ipad").style.display = "none";
        document.getElementById("buy-mac").style.display = "block";
        setTimeout(function (){
            document.getElementById("quicktour-mac-1").style.opacity = 1;
            document.getElementById("quicktour-mac-2").style.opacity = 1;        
            document.getElementById("buy-mac").style.opacity = 1;        
        }, 0);
    }, 250);
}

function switchiPad(){
    if(currentMode == 1) return;
    
    currentMode = 1;
    
    if(supports_history_api())
        history.pushState({"mode": "ipad"}, "Acrylic - Pulp for iPad", "/pulp/ipad/");
    else
        window.location.hash = "#!/ipad";
        
    document.title = "Acrylic - Pulp for iPad";

    document.getElementById("page-tab-mac").setAttribute("class", "page-tab");
    document.getElementById("page-tab-ipad").setAttribute("class", "page-tab page-tab-selected");
    
    document.getElementById("quicktour-ipad-1").style.opacity = 0;
    document.getElementById("quicktour-ipad-2").style.opacity = 0;
    document.getElementById("quicktour-mac-1").style.opacity = 0;
    document.getElementById("quicktour-mac-2").style.opacity = 0;
    document.getElementById("buy-mac").style.opacity = 0;
    document.getElementById("buy-ipad").style.opacity = 0;

    setTimeout(function (){
        document.getElementById("quicktour-mac-1").style.display = "none";
        document.getElementById("quicktour-mac-2").style.display = "none";        
        document.getElementById("quicktour-ipad-1").style.display = "block";
        document.getElementById("quicktour-ipad-2").style.display = "block";
        document.getElementById("buy-ipad").style.display = "block";
        document.getElementById("buy-mac").style.display = "none";
        setTimeout(function (){
            document.getElementById("quicktour-ipad-1").style.opacity = 1;
            document.getElementById("quicktour-ipad-2").style.opacity = 1;        
            document.getElementById("buy-ipad").style.opacity = 1;        
        }, 0);
    }, 250);
}

window.onload = function(event) {
    var hashString = window.location.hash;
    var showMacPage = true;
    
    if(hashString == "#!/ipad")
        showMacPage = false;
    
    if(!showMacPage)
        switchiPad();
    else if(supports_history_api())
        history.replaceState({"mode": "mac"}, "Acrylic - Pulp for Mac", "/pulp/mac/");
}

String.prototype.endsWith = function(suffix) {
    return this.match(suffix+"$") == suffix;
};

window.onpopstate = function(event) {
    var mode = event.state["mode"];
    if(mode == "mac"){
        switchMac();
    }else{
        switchiPad();
    }
};

function supports_history_api() {
    return !!(window.history && history.pushState);
}