// Bing image searcher

// example code from
// https://dev.cognitive.microsoft.com/docs/services/56b43f0ccf5ff8098cef3808/operations/571fab09dbe2d933e891028f



var urls = [];
var srcUrl;
var myImg, myId;
var minImgWidth = '35%';
var srcImgTops = [];
var buttonScreen = false;
// ----------------------------------------------------------------------------------------
// code from http://www.dwuser.com/education/content/creating-a-jquery-image-scroller/

$(function(){

    // --------------------------------------------------------------------
    // begin bing results image scroller code
    function bingFlower(){
        var scrollerB = $('#feedbackBScroller div.innerScrollAreaB');
        var scrollerContentB = scrollerB.children('ul');
        // scrollerContent.children().clone().appendTo(scrollerContent);
        var curYB = 0;

        // need to intervene here during scale
        scrollerContentB.children().each(function (index){
            // console.log("flowing bings " + index);
            var $this = $(this);
            $this.css("top", curYB);
            curYB += $this.outerHeight(true);
        });

        var fullHB = curYB / 2;
        var viewportHB = scrollerB.height();
        scrollerB.css('overflow-y', 'auto');
    }

    // end bing results image scroller
    // --------------------------------------------------------------------
    // --------------------------------------------------------------------
    // bind functions to  search buttons
    $("#bingGo").on("click", doBingSearch);
    $("#googGo").on("click", doGoogSearch);
    $(".instructionsDiv").on("click", function(){$(this).css({"display":"none"});});

    // --------------------------------------------------------------------
    // begin source image scroller code

    var scroller = $('#scroller div.innerScrollArea');
    var scrollerContent = scroller.children('ul');
    // scrollerContent.children().clone().appendTo(scrollerContent);
    var curY = 0;

    // need to intervene here during scale
    scrollerContent.children().each(function reFlowScroller(){
        var $this = $(this);
        $this.css("top", curY);
        curY += $this.outerHeight(true);
    });

    var fullH = curY / 2;
    var viewportH = scroller.height();
    scroller.css('overflow-y', 'auto');

    // end source image scroller
    // --------------------------------------------------------------------



    // --------------------------------------------------------------------
    // begin image zoom code

    // add click zoom to the source images
    $("[id|=img]").on("click", growIt);

    // click zoom function
    function growIt() {

        // get the src url from the image clicked
        srcUrl = $( this ).attr("src");
        console.log(srcUrl);


        function sizedUp() {
            // called when sizing up is complete
            $("#feedbackBScroller").css({
                "position": "absolute",
                "display":"inline-block",
                // "left":"45%",
                // "top":$(myImg).position().top
            });
            // show buttons
            $(".bing").css({"display": "inline-block"});
            // $(".goog").css({"display": "inline-block"});

            // fade out other images
            $(".innerScrollArea ul li img").not(".selected").fadeTo(200, 0.2);

            console.log('sized up');
            // buttonScreen = true;
        }
        function sizedDown() {
            // called when sizing down is complete
            // report
            console.log('sized down');
            // invisible the feedback div
            // $(".feedbackG").css({"display":"none"});
            $("#feedbackBScroller").css({"display":"none"});
            $(".bing").css({"display": "none"});
            // $(".goog").css({"display": "none"});
            buttonScreen = false;

            // invisible the results images
            $("[id|=result]").css({"display":"none"});

            // clear the Urls array for the next query
            urls = [];

            // reenable scrolling of source images
            scroller.css('overflow-y', 'auto');

            myImg.removeClass("selected");
            // fade in other images
            $(".innerScrollArea ul li img").not(".selected").fadeTo(200, 1);

            // remove the results images
            $("#feedbackBScroller div.innerScrollAreaB ul").children().remove();
            console.log(buttonScreen);
        }

        // shrink the rest, if clicked on a different one
        $( ".sourceImageClass" ).each(function() {

            $(".bing").css({"display": "none"});
            // $(".goog").css({"display": "none"});
            // buttonScreen = false;
            var newImg = $(this);
            console.log("newImgW = "+ newImg.css("width") + ", minImgw = "+ minImgWidth);
            // if (newImg.width() > minImgWidth) {
            if (newImg.css("width") > minImgWidth) {

                newImg.animate({width: minImgWidth, height: "auto"}, 800);
                sizedDown();
                console.log("other scale down, "+ buttonScreen);

            }
        });

        // grow this one, if clicked on this one
        $(this).addClass("selected");
        myImg = $(this);
        console.log("target width = " + Math.floor($(".innerScrollArea").innerWidth()*0.85) + ";, myImg.width = "+ Math.floor(myImg.width()));

        if (myImg.width() < Math.floor($(".innerScrollArea").innerWidth()*0.85)) {
            myImg.animate({width: Math.floor($(".innerScrollArea").innerWidth()*0.85), height: "auto"}, 800, sizedUp);
        } else {
            // if on 'buttons' screen
            // if(buttonScreen === true) {

                myImg.animate({width: minImgWidth, height: "auto"}, 800);
                sizedDown();
                console.log("btn "+ buttonScreen);

        }

    }
    // end image zoom
    // --------------------------------------------------------------------


    // --------------------------------------------------------------------
    // begin bing search code

    function doBingSearch() {
        // make the button invisible
        $(".bing").css({"display": "none"});
        // $(".goog").css({"display": "none"});
        // buttonScreen = false;

        // scroll my image to the top
        $(".innerScrollArea").animate({scrollTop: myImg.position().top});

        // disable scrolling for now
        // (to be reenabled when?)
        scroller.css('overflow-y', 'hidden');

        console.log("searching ...");
        console.log("src = " + srcUrl);


        doAjax();
    }


    function doAjax() {
        $.ajax({
            // url: "https://api.cognitive.microsoft.com/bing/v5.0/images/search?" + $.param(params),
            // url: "https://api.cognitive.microsoft.com/bing/v5.0/images/search?modulesRequested=SimilarImages&imgUrl=http://sorrystate.org/penny/penny-blend-v01/penny-img/folder01/02.JPG",
            url: 'https://api.cognitive.microsoft.com/bing/v5.0/images/search?modulesRequested=SimilarImages&imgUrl=' + srcUrl,
            beforeSend: function (xhrObj) {
                // Request headers
                xhrObj.setRequestHeader('Access-Control-Allow-Origin', '*');
                xhrObj.setRequestHeader('Content-Type', 'multipart/form-data');
                xhrObj.setRequestHeader('Ocp-Apim-Subscription-Key', window.apiKey);
            },
            // dataType: "JSON",
            type: 'GET',
            // Request body
            // data: "{body}"
        })
        .done(function (data) {
            console.log('success');
            // console.log(data);
            var myItem, resultDiv, $image, $downloadingImage;
            // var $images = [];
            for (var i = 0; i < data.visuallySimilarImages.length; i++) {
                myItem = data.visuallySimilarImages[i].contentUrl;
                urls.push(myItem);

                // this bit needs modification
                $(".innerScrollAreaB ul").append(
                    '<li><img id=result-'+ i +' src="clear.gif" width=' + Math.floor($(".innerScrollAreaB").innerWidth()*0.85) + ' height="auto"/></li>'

                    // '<span id=result-' + i + '><img src="clear.gif" ></span>'
                );
            }

            // here it needs to sort out the sizes and scrolls
            bingFlower();

            // this bit checks for errors and deletes the image from the
            // page if one doesn't load.

            $("#feedbackBScroller img").each(function (index) {
                // make a downloadingImage
                $downloadingImage = $('<img>');

                // set a variable for the img for use inside the next function
                var that = this;
                // this gets called when the downloadingImage has loaded
                $downloadingImage.on('load', function(){
                    // sets the img to the src of the downloadedimage
                    $(that).attr("src", $(this).attr("src"));
                })
                .on("error", function() {
                    // if there's an error loading
                    console.log('error at image ' + $(that).attr("id"));
                    //  delete that image
                    $(that).remove();
                });

                // set the src of the downloading image, which starts it downloading
                $downloadingImage.attr("src", urls[index]);

            });

        })
        .fail(function() {
            console.log("error");
        });
    }

});

 function doGoogSearch(){
     // basically a duplicate of doBingSearch

     // make the button invisible
     $(".bing").css({"display": "none"});
    //  $(".goog").css({"display": "none"});

     // scroll my image to the top
     $(".innerScrollArea").animate({scrollTop: myImg.position().top});

     // disable scrolling for now
     // (to be reenabled when?)
     scroller = $('#scroller div.innerScrollArea');

     scroller.css('overflow-y', 'hidden');

     console.log("google searching ...");
     console.log("src = " + srcUrl);

     //
    //  doGoogAjax();
 }


// ----------------------------------------------------------------------------------------



/*
// ======================================================================
var urls = [];
var srcUrl;
var myImg, myId;
var srcImgTops = [];
var holdImage = false;
$(function () {


$("#bingGo").on("click", doBingSearch);

// click zoom function
function growIt() {
$("#bingGo").css({"display": "inline-block"});
srcUrl = $( this ).attr("src");
console.log(srcUrl);

// default the position of the image
$("#sourceImages").css({"position":"static"});
$(this).css({"position":"static"});


function sizedUp() {
// called when sizing up is complete

$(".feedbackB").css({
"position": "absolute",
"display":"inline-block",
"left":"45%",
"top":$(myImg).position().top
});

console.log('sized up');

}
function sizedDown() {
// called when sizing down is complete
// report
console.log('sized down');
// invisible the feedback div
$(".feedbackG").css({"display":"none"});
$(".feedbackB").css({"display":"none"});
// invisible the results images
$("[id|=result]").css({"display":"none"});

// clear the Urls array for the next query
urls = [];

// remove the results images
$("[id|=result]").remove();

// returns the position of the image to default
$(this).css({"position":"static"});
$(".sourceImages").css({
"position": "static",
"top": 0

}) ;
$(myImg).css({"position": "static"});



}

// shrink the rest
$( ".sourceImageClass" ).each(function() {
var newImg = $(this);
// newImg.css({"position":"relative"});
if (newImg.width() > 100) {
newImg.animate({width: "7%", height: "auto"}, 800);
sizedDown();
}
});

// grow this one
myImg = $(this);
if (myImg.width() < 100) {
myImg.animate({width: "40%", height: "auto"}, 800, sizedUp);
} else {
myImg.animate({width: "7%", height: "auto"}, 800);
sizedDown();
}

}

function doBingSearch() {
// make the button disabled
$("#bingGo").css({"display": "none"});

// ------------------------------------
// positioning woe


// fix the position of the single image
$(myImg).css({
// "position": "fixed",
"top": $(myImg).offset().top - $(window).scrollTop()
});

// set the position of the surrounding div
$("#sourceImages").each(function(index) {
$(this).css({
"position": "fixed",
"top": $(this).offset().top - $(window).scrollTop()

}) ;


});
console.log("myImg top = " + $(myImg).css("top"));
// set the position of the feedback div AGAIN
// I swear I have no fucking idea about why this bit is screwed
var myTop = $(myImg).offset().top - $(window).scrollTop();

$(".feedbackB").css({
"position": "absolute",
"display":"block",
"left":"45%",
"top": myTop,
"color": "#000"
});

// end positioning woe
// ------------------------------------


console.log("searching ...");
console.log("src = " + srcUrl);


doAjax();


}
});

function doAjax() {
$.ajax({
// url: "https://api.cognitive.microsoft.com/bing/v5.0/images/search?" + $.param(params),
// url: "https://api.cognitive.microsoft.com/bing/v5.0/images/search?modulesRequested=SimilarImages&imgUrl=http://sorrystate.org/penny/penny-blend-v01/penny-img/folder01/02.JPG",
url: 'https://api.cognitive.microsoft.com/bing/v5.0/images/search?modulesRequested=SimilarImages&imgUrl=' + srcUrl,
beforeSend: function (xhrObj) {
// Request headers
xhrObj.setRequestHeader('Access-Control-Allow-Origin', '*');
xhrObj.setRequestHeader('Content-Type', 'multipart/form-data');
xhrObj.setRequestHeader('Ocp-Apim-Subscription-Key', window.apiKey);

},
// dataType: "JSON",
type: 'GET',
// Request body
// data: "{body}"
})
.done(function (data) {
console.log('success');
// console.log(data);
var myItem, resultDiv, $image, $downloadingImage;
// var $images = [];
for (var i = 0; i < data.visuallySimilarImages.length; i++) {
myItem = data.visuallySimilarImages[i].contentUrl;
urls.push(myItem);
$(".feedbackB").append(
'<span id=result-' + i + '><img src="clear.gif" ></span>'
);
}

// this bit checks for errors and deletes the image from the
// page if one doesn't load.

$(".feedbackB img").each(function (index) {


// make a downloadingImage
$downloadingImage = $('<img>');

// set a variable for the img for use inside the next function
var that = this;
// this gets called when the downloadingImage has loaded
$downloadingImage.on('load', function(){
// sets the img to the src of the downloadedimage
$(that).attr("src", $(this).attr("src"));
})
.on("error", function() {
// if there's an error loading
console.log('error at image ' + $(that).attr("id"));
//  delete that image
$(that).remove();
});

// set the src of the downloading image, which starts it downloading
$downloadingImage.attr("src", urls[index]);

});

})
.fail(function() {
console.log("error");
});
}
// ======================================================================
*/