$(document).ready(function () {
    $(".new-collages").slideDown("slow");

    // detect drag n drop api
    if ((typeof window.FileReader === 'undefined')) { $("#homepage #head #getstarted .drop-area span").css("text-decoration", "line-through"); }
    else { }

    // to handle our successful uploads, lets create the overlay
    var objBody = document.getElementsByTagName("body").item(0);

    var objLightbox = document.createElement("div");
    objLightbox.setAttribute('id', 'lightbox');
    objLightbox.style.display = 'none';
    objBody.appendChild(objLightbox);

    var objOverlay = document.createElement("div");
    objOverlay.setAttribute('id', 'overlay');
    objOverlay.style.display = 'none';
    //objOverlay.onclick = function () { $(objOverlay).hide(); $(objLightbox).hide(); return false; }
    objBody.appendChild(objOverlay);

    var div_lightbox_inner = document.createElement("div");
    div_lightbox_inner.className = "inner";
    objLightbox.appendChild(div_lightbox_inner);

    var div_lightbox_head = document.createElement("div");
    div_lightbox_head.className = "head";
    var div_lightbox_back = document.createElement("div");
    div_lightbox_back.className = "back";
    var div_lightbox_back_a = document.createElement("a");
    div_lightbox_back_a.href = "#";
    div_lightbox_back_a.onclick = function () { $(objOverlay).hide(); $(objLightbox).hide(); $(objBody).css("overflow", ""); $("#homepage").show(); return false; }
    div_lightbox_back_a.appendChild(document.createTextNode("← Return to the site"));
    div_lightbox_back.appendChild(div_lightbox_back_a);
    div_lightbox_head.appendChild(div_lightbox_back);
    div_lightbox_inner.appendChild(div_lightbox_head);

    var div_lightbox_upload_more = document.createElement("div");
    div_lightbox_upload_more.className = "upload-more file-upload";
    var div_lightbox_upload_more_span = document.createElement("span");
    div_lightbox_upload_more_span.appendChild(document.createTextNode("Recently Uploaded."));
    div_lightbox_upload_more.appendChild(div_lightbox_upload_more_span);

    var div_lightbox_upload_more_nbsp = document.createElement("span");
    div_lightbox_upload_more_nbsp.innerHTML = " ";
    div_lightbox_upload_more.appendChild(div_lightbox_upload_more_nbsp);

    var div_lightbox_upload_more_a = document.createElement("a");
    div_lightbox_upload_more_a.href = "#";
    div_lightbox_upload_more_a.onclick = function () { return false; }
    div_lightbox_upload_more_a.appendChild(document.createTextNode("Upload More?"));
    div_lightbox_upload_more.appendChild(div_lightbox_upload_more_a);
    div_lightbox_head.appendChild(div_lightbox_upload_more);

    var div_lightbox_pictures = document.createElement("div");
    div_lightbox_pictures.className = "pictures";
    var div_lightbox_pictures_container = document.createElement("div");
    div_lightbox_pictures_container.className = "container";
    div_lightbox_pictures.appendChild(div_lightbox_pictures_container);
    var div_lightbox_pictures_clear = document.createElement("div");
    div_lightbox_pictures_clear.className = "clear";
    div_lightbox_pictures.appendChild(div_lightbox_pictures_clear);
    div_lightbox_inner.appendChild(div_lightbox_pictures);

    var div_lightbox_main = document.createElement("div");
    div_lightbox_main.className = "main";
    var div_lightbox_main_list = document.createElement("ul");
    var div_lightbox_main_list_edit = document.createElement("li");
    div_lightbox_main_list_edit.className = "button edit";
    var div_lightbox_main_list_edit_title = document.createElement("a");
    div_lightbox_main_list_edit_title.className = "title";
    div_lightbox_main_list_edit_title.href = configuration_app_path + "/Edit/Load/#RecentPictures";
    //div_lightbox_main_list_edit_title.onclick = function () { return false; }
    div_lightbox_main_list_edit_title.appendChild(document.createTextNode("Edit Picture"));
    div_lightbox_main_list_edit.appendChild(div_lightbox_main_list_edit_title);
    div_lightbox_main_list.appendChild(div_lightbox_main_list_edit);
    var div_lightbox_main_list_collage = document.createElement("li");
    div_lightbox_main_list_collage.className = "button collage";
    var div_lightbox_main_list_collage_title = document.createElement("a");
    div_lightbox_main_list_collage_title.className = "title";
    div_lightbox_main_list_collage_title.href = configuration_app_path + "/Picture/Collage/";
    //div_lightbox_main_list_collage_title.onclick = function () { return false; }
    div_lightbox_main_list_collage_title.appendChild(document.createTextNode("Create Collage"));
    div_lightbox_main_list_collage.appendChild(div_lightbox_main_list_collage_title);
    div_lightbox_main_list.appendChild(div_lightbox_main_list_collage);
    var div_lightbox_main_list_animate = document.createElement("li");
    div_lightbox_main_list_animate.className = "button animate";
    var div_lightbox_main_list_animate_title = document.createElement("a");
    div_lightbox_main_list_animate_title.className = "title";
    div_lightbox_main_list_animate_title.href = configuration_app_path + "/Picture/Animated/";
    //div_lightbox_main_list_animate_title.onclick = function () { return false; }
    div_lightbox_main_list_animate_title.appendChild(document.createTextNode("Create Animation"));
    div_lightbox_main_list_animate.appendChild(div_lightbox_main_list_animate_title);
    div_lightbox_main_list.appendChild(div_lightbox_main_list_animate);

    // or
    var div_lightbox_main_list_or = document.createElement("li");
    div_lightbox_main_list_or.className = "or";
    var div_lightbox_main_list_or_span = document.createElement("span");
    div_lightbox_main_list_or_span.className = "label";
    div_lightbox_main_list_or_span.appendChild(document.createTextNode("OR"));
    div_lightbox_main_list_or.appendChild(div_lightbox_main_list_or_span);
    div_lightbox_main_list.appendChild(div_lightbox_main_list_or);
    // featured app 
    var div_lightbox_main_list_app = document.createElement("li");
    div_lightbox_main_list_app.className = "app";
    var div_lightbox_main_list_app_link = document.createElement("a");
    div_lightbox_main_list_app_link.className = "link";
    div_lightbox_main_list_app_link.href = configuration_app_path + "/Apps/CountryCollages/?ref=o";
    div_lightbox_main_list_app_link.onclick = function () { return false; }

    var div_lightbox_main_list_app_img = document.createElement("img");
    div_lightbox_main_list_app_img.className = "image";
    div_lightbox_main_list_app_img.src = configuration_images_url + "/2011/apps_countrycollages.png";
    div_lightbox_main_list_app_img.border = 0;
    div_lightbox_main_list_app_link.appendChild(div_lightbox_main_list_app_img);

    var div_lightbox_main_list_app_title = document.createElement("span");
    div_lightbox_main_list_app_title.className = "title";
    div_lightbox_main_list_app_title.appendChild(document.createTextNode("Country Collages"));
    div_lightbox_main_list_app_link.appendChild(div_lightbox_main_list_app_title);

    div_lightbox_main_list_app.appendChild(div_lightbox_main_list_app_link);
    div_lightbox_main_list.appendChild(div_lightbox_main_list_app);
    // more apps
    var div_lightbox_main_list_apps = document.createElement("li");
    div_lightbox_main_list_apps.className = "apps";
    var div_lightbox_main_list_apps_link = document.createElement("a");
    div_lightbox_main_list_apps_link.className = "label";
    div_lightbox_main_list_apps_link.href = configuration_app_path + "/Apps?ref=o";
    div_lightbox_main_list_apps_link.appendChild(document.createTextNode("View all Apps →"));
    div_lightbox_main_list_apps.appendChild(div_lightbox_main_list_apps_link);
    div_lightbox_main_list.appendChild(div_lightbox_main_list_apps);

    div_lightbox_main.appendChild(div_lightbox_main_list);
    div_lightbox_inner.appendChild(div_lightbox_main);

    $(window).resize(function () {
        var window_width = $(window).width();
        var window_height = $(window).height();
        var window_top = $(window).scrollTop();
        $(objOverlay).css("top", window_top + "px");
        $(objOverlay).css("width", window_width + "px");
        $(objOverlay).css("height", window_height + "px");
        $(objLightbox).css("top", window_top + "px");
        $(objLightbox).css("width", window_width + "px");
        $(objLightbox).css("height", window_height + "px");
        $("#" + objLightbox.id + " .inner").css("top", "0px");
        $("#" + objLightbox.id + " .inner").css("left", ((window_width - 900) / 2) + "px");
        $("#" + objLightbox.id + " .inner .main").css("top", (70) + "px");
        $("#" + objLightbox.id + " .inner .main").css("left", (((window_width - 900) / 2) + 670) + "px");
    });

    $(".file-upload").each(function () {
        var button = this;
        // this.onclick = function () {

        // }
        upclick(
        {
            element: button,
            action: 'Upload.axd?uid=1&format=xml&session=' + escape(session_id),
            auto_submit: true,
            onstart:
        function (file) {
            button.disabled = true;
            button.value = "Uploading, please wait...";
            $(div_lightbox_upload_more).addClass("uploading");
            $(div_lightbox_upload_more_a).hide();
            div_lightbox_upload_more_span.innerHTML = "Uploading, please wait...";
            return true;
        },
            oncomplete: function (doc) {
                button.disabled = false;
                button.value = "Browse Pictures";
                $(div_lightbox_upload_more).removeClass("uploading");
                $(div_lightbox_upload_more_a).show();
                div_lightbox_upload_more_span.innerHTML = "Recently Uploaded.";
                var uploaded = new Array();
                // alert($(doc.body.innerHTML).text());
                // alert(doc.getElementsByTagName("Picture").length);
                //var pictures = doc.getElementsByTagName("Picture");
                // alert($(document).text());
                // var uploaded = JSON.parse($(document).text());
                // alert(uploaded.length);
                // alert($(doc).find("Picture").length);
                $(doc).find("Picture").each(function () {
                    var success = eval($($(this).find("Success")[0]).text());
                    if (success) {
                        var id = $($(this).find("PictureID")[0]).text();
                        var server_url = $($(this).find("ServerUrl")[0]).text();
                        var extension = $($(this).find("Extension")[0]).text();
                        var title = $($(this).find("Title")[0]).text();
                        var image_url = server_url + id + "/untitled_small_medium" + extension;
                        uploaded[uploaded.length] = { id: id, title: title, image_url: image_url };
                    }
                });
                if (uploaded.length == 0) {
                    // if this is ie8, just navigate to the load page instead
                    if ($.browser.msie && (parseInt($.browser.version, 10) == 7 || parseInt($.browser.version, 10) == 8)) {
                        button.disabled = true;
                        button.value = "Redirecting, please wait...";
                        window.location = "edit/load/?ref=hp";
                    }
                    else {
                        // something went wrong
                        alert("We're sorry, but your photos could not be uploaded at this time.");
                    }
                }
                else {
                    showUploadComplete(objBody, objOverlay, objLightbox, div_lightbox_pictures_container, uploaded);
                }
            }
        });
    });

    // set up the drag-and-drop
    var dropArea = document.getElementById("drag-drop-area");
    var html5uploaded = new Array();
    var html5uploaded_temp = new Array();
    function uploadFile(file) {
        // Only process image files.
        if (!file.type.match('image.*')) {
            return;
        }

        var xhr;


        // Uploading - for Firefox, Google Chrome and Safari
        xhr = new XMLHttpRequest();

        // Update progress bar
        xhr.upload.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
            }
            else {
                // No data to calculate on
            }
        }, false);

        // File uploaded
        xhr.addEventListener("load", function (evt) {
            var id = $($(evt.target.responseXML).find("PictureID")[0]).text();
            var server_url = $($(evt.target.responseXML).find("ServerUrl")[0]).text();
            var extension = $($(evt.target.responseXML).find("Extension")[0]).text();
            var title = $($(evt.target.responseXML).find("Title")[0]).text();
            var image_url = server_url + id + "/untitled_small_medium" + extension;
            html5uploaded[html5uploaded.length] = { id: id, title: title, image_url: image_url };
            html5uploaded_temp.pop();
            if (html5uploaded_temp.length == 0) {
                // we're ready!
                showUploadComplete(objBody, objOverlay, objLightbox, div_lightbox_pictures_container, html5uploaded);
                html5uploaded_temp = new Array();
                var button = $(".file-upload")[0];
                button.disabled = false;
                button.value = "Browse Pictures";
            }

        }, false);

        xhr.open("post", "Upload.axd?uid=1&format=xml&session=" + escape(session_id), true);

        var fd = new FormData();
        fd.append("fileToUpload", file);

        // Send the file (doh)
        xhr.send(fd);
    }

    function traverseFiles(files) {
        if (typeof files !== "undefined") {
            html5uploaded = new Array();
            var button = $(".file-upload")[0];
            button.disabled = true;
            button.value = "Uploading, please wait...";
            for (var i = 0, l = files.length; i < l; i++) {
                html5uploaded_temp.push(0);
                uploadFile(files[i]);
            }
        }
        else {
            fileList.innerHTML = "No support for the File API in this web browser";
        }
    }

    dropArea.addEventListener("dragleave", function (evt) {
        var target = evt.target;

        if (target && target === dropArea) {
            $(this).removeClass("over");
        }
        evt.preventDefault();
        evt.stopPropagation();
    }, false);

    dropArea.addEventListener("dragenter", function (evt) {
        $(this).addClass("over");
        evt.preventDefault();
        evt.stopPropagation();
    }, false);

    dropArea.addEventListener("dragover", function (evt) {
        evt.preventDefault();
        evt.stopPropagation();
    }, false);

    dropArea.addEventListener("drop", function (evt) {
        traverseFiles(evt.dataTransfer.files);
        $(this).removeClass("over");
        evt.preventDefault();
        evt.stopPropagation();
    }, false);
});

function showUploadComplete(objBody, objOverlay, objLightbox, div_lightbox_pictures_container, uploaded) {
    for (var i = 0; i < uploaded.length; i++) {
        if (div_lightbox_pictures_container.firstChild) {
            div_lightbox_pictures_container.insertBefore(getPictureHtml(uploaded[i]), div_lightbox_pictures_container.firstChild);
        }
        else {
            div_lightbox_pictures_container.appendChild(getPictureHtml(uploaded[i]));
        }
    }
    uploaded = new Array(); // reset the array
    // show our overlay
    $(objBody).css("overflow", "hidden");
    // also hide the homepage div
    $("#homepage").hide();
    // stretch the overlay to fit the page
    var window_width = $(window).width();
    var window_height = $(window).height();
    var window_top = $(window).scrollTop();
    $(objOverlay).css("top", window_top + "px");
    $(objOverlay).css("width", window_width + "px");
    $(objOverlay).css("height", window_height + "px");
    $(objLightbox).css("top", window_top + "px");
    $(objLightbox).css("width", window_width + "px");
    $(objLightbox).css("height", window_height + "px");
    $(objOverlay).fadeIn('fast', function () {
        // now show our lightbox
        //$("#" + objLightbox.id + " .inner").css("top", window_top + "px");
        $("#" + objLightbox.id + " .inner").css("top", "0px");
        $("#" + objLightbox.id + " .inner").css("left", ((window_width - 900) / 2) + "px");
        $("#" + objLightbox.id + " .inner .main").css("top", (70) + "px");
        $("#" + objLightbox.id + " .inner .main").css("left", (((window_width - 900) / 2) + 670) + "px");
        $(objLightbox).show();
    });
}

function getPictureHtml(picture) {
    var div_picture = document.createElement("div");
    div_picture.className = "picture";
    var div_picture_img = document.createElement("img");
    div_picture_img.setAttribute("alt", picture.title);
    div_picture_img.setAttribute("src", picture.image_url);
    div_picture.appendChild(div_picture_img);
    return div_picture;
}

function checkSignUp() {
    if (document.getElementById(username_client_id).value != "" && document.getElementById(username_client_id).value != "Username") {
        document.getElementById(email_client_id).style.backgroundColor = "#fff";
    }
    else {
        document.getElementById(username_client_id).style.backgroundColor = "#fff0f0";
        return false;
    }
    if (document.getElementById(email_client_id).value != "" && document.getElementById(email_client_id).value != "Email Address") {
        document.getElementById(email_client_id).style.backgroundColor = "#fff";
    }
    else {
        document.getElementById(email_client_id).style.backgroundColor = "#fff0f0";
        return false;
    }
    if (document.getElementById(password_client_id).value != "" && document.getElementById(password_client_id).value != "Password") {
        document.getElementById(password_client_id).style.backgroundColor = "#fff";
    }
    else {
        document.getElementById(password_client_id).style.backgroundColor = "#fff0f0";
        return false;
    }   
    
    return true;
}