var $currentPage = 0;
var $query;

$(function () {
    $("#ImageSearch").keyup(function () {
        $query = $(this).val();
        imageSearch($query, 0);
        showOrHidePaging();
    });

    $("#Title").keyup(function () {
        $("#ImageSearch").val($(this).val());
        $query = $(this).val();
        imageSearch($query, 0);
        showOrHidePaging();
    });

    if ($("#ImageSearch").val() == '' && $("#Title").val() != '') {
        $("#ImageSearch").val($("#Title").val());
        $query = $("#ImageSearch").val();
        imageSearch($query, 0);
        showOrHidePaging();
    };

    $("#NextPage").click(function () {
        $currentPage = $currentPage + 1;
        imageSearch($query, $currentPage);
        showOrHidePaging();
    });

    $("#PreviousPage").click(function () {
        $currentPage = $currentPage - 1;
        imageSearch($query, $currentPage);
        showOrHidePaging();
    });
});

function showOrHidePaging() {
    var prevPage = $("#PreviousPage");
    var nextPage = $("#NextPage");
    nextPage.show();
    if ($currentPage == 0) {
        prevPage.hide();
    }
    else {
        prevPage.show();
    }
}


function imageSearch(query, page) {
    var url = "http://ajax.googleapis.com/ajax/services/search/images?q=" + query + "&start=" + ((4 * page) + 1) 
    //+ "&as_rights=(cc_publicdomain|cc_attribute|cc_sharealike|cc_noncommercial).-(cc_nonderived)"
    + "&v=1.0&callback=?";
    $.getJSON(url, function (data) {
        if (data.responseData == null) {
            $("#NextPage").hide();
            return;
        }
        if (data.responseData.results &&
        data.responseData.results.length > 0) {
            var results = data.responseData.results;
            var content = $("#searchcontent");
            content.children().remove();
            for (var i = 0; i < results.length; i++) {
                var image = $('<img class="googleSearch" src="' + results[i].tbUrl + '" />').appendTo(content);
                image.click(function () {
                    var index = content.find("img").index($(this));
                    var imageUrl = results[index].url;
                    $("#ImageUrl").val(imageUrl);
                    $(".googleSearch").removeClass("googleSearchSelected");
                    $(this).addClass("googleSearchSelected");
                    $("#currentImage").attr("src", imageUrl);
                });
            }
        }
    });
}