var baseURL = "https://googledrive.com/host/0B2Ay-nw1QSW2SHhjR0VBZXE2bUU/TinyBlueMarble/";

var DBNAME = "MapTiles";
var DB = null;
var manifest = null;
var vm = null;
var showID = "4-9-6";
var fetchCnt = 0;
var imageType = "jpg";
var maxTiles = 999999;

window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
if (!window.indexedDB) {
    window.alert("Your browser doesn't support a stable version of IndexedDB.");
}

// executed when all js and css is loaded (i.e. document ready event)
$(function () {
    makeVM();
    vm.set("status", "Initializing");
    testXHR();
    testBase64();
    openDB();
    setup();
});

function makeVM() {
    vm = kendo.observable({
        status: "",
        xhr: false,
        b64Flag: false,
        dbManifest: false,
        tileCount: 0,
        startTime: "",
        fetchTime: "0",
        blobCount: 0,
        totalTime: "0",
        blobRate: 0
    });
    kendo.bind(document.body, vm);
}

function testXHR() {
    vm.set("xhr", $xhr.supported());
}

function testBase64() {
    var b64Flag = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
    vm.set("b64Flag", b64Flag);
}

function setup() {
    $("#deleteDB").click(deleteDB);
    $("#downloadButton").click(download);
    $xhr.defaultError(function (text, code) {
        console.error("xhr2 error: ", text, " code: ", code, " url: ", this.xhr2data.url);
    });
}

function openDB() {
    DB = Pouch(DBNAME);
    DB.get("MANIFEST", function (err, doc) {
        if (err) {
            console.error("Manifest fetch error: ", err.error, " reason: ", err.reason, " status: ", err.status);
            manifest = null;
            vm.set("dbManifest", false);
            getManifest();
        } else {
            manifest = doc.data;
            vm.set("dbManifest", true);
            vm.set("tileCount", manifest.files.length);
            vm.set("status", "Ready");
        }
    });
}

function deleteDB() {
    Pouch.destroy(DBNAME, function (err, info) {
        if (err) {
            console.error("Could not Delete DB: ", info);
        } else {
            console.log("db deleted");
            vm.set("dbManifest", false);
        }
    });
    manifest = null;
    vm.set("tileCount", 0);
    vm.set("status", "Reload");
}

function getManifest() {
    $xhr.ajax({
        url: baseURL + "manifest.json",
        dataType: "json",
        success: parseManifest
    });
}

function parseManifest(data) {
    data.files = data.files.slice(0, maxTiles - 1);
    manifest = data;
    DB.put({ _id: "MANIFEST", data: data }, function (err, response) {
        if (err) {
            console.error("Could store MANIFEST: error: " + err.error + " reason: " + err.reason + " status: " + err.status);
        } else {
            console.log("saved: ", response.id + " rev: " + response.rev);
            vm.set("dbManifest", true);
        }
    });
    vm.set("tileCount", manifest.files.length);
    vm.set("status", "Ready");
}

function download() {
    if (manifest == null) {
        alert("No Manifest, reload");
        return;
    }
    fetchCnt = 0;
    vm.set("blobCount", 0);
    vm.set("startTime", new Date());
    vm.set("fetchTime", "0");
    getBlobs(manifest.files);
}

function getBlobs(fileList) {
    console.log("starting to fetch blobs");
    $.each(fileList, function (i, val) {
        var path = baseURL + val.id + "." + imageType;
        $xhr.ajax({
            url: path,
            dataType: "blob",
            success: function (data) { saveBlob(data, val.size, val.id); }
        });
    });
}

function saveBlob(blob, length, id) {
    if (blob.size != length) {
        console.error("Blob Length found: ", blob.size, " expected: ", length);
    }
    putBlob(blob, id);
    ++fetchCnt;
    if (fetchCnt == manifest.files.length) {
        setTimeout(fetchComplete, 0);
    }
}

function fetchComplete() {
    var startTime = vm.get("startTime");
    var elapsed = new Date() - startTime;
    var fetchTime = ms2Time(elapsed);
    vm.set("fetchTime", fetchTime);
    console.log("Done Fetching Tiles");
}

function putBlob(blob, id) {
    var cnt;
    var type = blob.type;
    DB.putAttachment(id + "/pic", blob, type, function (err, response) {
        if (err) {
            console.error("Could store blob: error: " + err.error + " reason: " + err.reason + " status: " + err.status);
        } else {
            console.log("saved: ", response.id + " rev: " + response.rev);
            cnt = vm.get("blobCount");
            vm.set("blobCount", ++cnt);
            if (cnt == manifest.files.length) {
                setTimeout(storeComplete, 0);
            }
        }
    });
}

function storeComplete() {
    console.log("Done Storing Tiles");
    var startTime = vm.get("startTime");
    var elapsed = new Date() - startTime;
    var totalTime = ms2Time(elapsed);
    vm.set("totalTime", totalTime);
    var rate = manifest.files.length * 1000 / elapsed;
    vm.set("blobRate", rate);
    setImage();
}

function setImage() {
    var id = showID;
    var blob;
    DB.getAttachment(id + "/pic", function (err, response) {
        if (err) {
            console.error("Could find blob id: ", id, " error: ", err.error, " reason: ", err.reason, " status: ", err.status);
        } else {
            blob = response;
            var imgURL = URL.createObjectURL(blob);
            // Set img src to ObjectURL
            $("#imgTile").attr("src", imgURL);
            // Revoking ObjectURL
            URL.revokeObjectURL(imgURL);
        }
    });
}

function ms2Time(ms) {
    var secs = ms / 1000;
    ms = Math.floor(ms % 1000);
    var minutes = secs / 60;
    secs = Math.floor(secs % 60);
    var hours = minutes / 60;
    minutes = Math.floor(minutes % 60);
    hours = Math.floor(hours % 24);
    return hours + ":" + minutes + ":" + secs + "." + ms;
}