//Make dogs object global
var dogs = {};

$(document).ready(function(){

    //Setup the checkBoxes
    $('#gallerySearch input').each(function(){
        $(this).click(function() {
        submitSearch(false)
        });
    });
    submitSearch(true);
    
});


function submitSearch(init){

    if (init) {
        var searchterms = "{searchterms : [";
        searchterms += "]}";
    }
    else {
        var searchterms = "{searchterms : [";
        var first = true;
        //go through the checkBoxes to determine what was selected and build the search terms json
        $('#gallerySearch input').each(function(){
        
            if ($(this).attr('checked')) {
                if (!first) {
                    searchterms += ",";
                }
                searchterms += "\"" + $(this).attr('name') + "=" + $(this).next().html() + "\"";
                first = false;
            }
            
        });
        
        searchterms += "]}";
    }
    
    //Submit the search to the webmethod and put results into dogs object
    $.ajax({
        type: "POST",
        url: 'gallery.aspx/getDogs',
        data: searchterms,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(data){
            //alert(data.d);
            result = JSON.parse(data.d);
            dogs = result.dogs;
            $('.miniUL').html("");
            $('.mediumUL').html("");
            $('.standardUL').html("");
            for (var i in dogs) {
                //Output the dog data to the correct container
                if (dogs[i].size == "Mini") {
                    $('.miniUL').append("<li><a class=dog" + i + " ID=\"dogID" + dogs[i].ID + "\" href=\"javascript:popUp('dogpopup.aspx?dog=" + dogs[i].ID + "')\">" + dogs[i].name + "</a></li>");
                }
                if (dogs[i].size == "Medium") {
                    $('.mediumUL').append("<li><a class=dog" + i + " ID=\"dogID" + dogs[i].ID + "\" href=\"javascript:popUp('dogpopup.aspx?dog=" + dogs[i].ID + "')\">" + dogs[i].name + "</a></li>");
                }
                if (dogs[i].size == "Standard") {
                    $('.standardUL').append("<li><a class=dog" + i + " ID=\"dogID" + dogs[i].ID + "\" href=\"javascript:popUp('dogpopup.aspx?dog=" + dogs[i].ID + "')\">" + dogs[i].name + "</a></li>");
                }
                
            }
            buildgallery();
        }
        
        
    });
    
}

function buildgallery(){

    // GALLERY SEARCH EQUAL COLUMN HEIGHTS
    var heightMax = 0;
    $('#gallerySelect .col .inner ul').each(function(){ // Cycle through each column
        // If current column is the biggest one, store it
        var thisHeight = $(this).height();
        if (thisHeight >= heightMax) {
            heightMax = thisHeight;
        }
    });
    // Apply height to each column to make same height
    $('#gallerySelect .col .inner').each(function(){ // Cycle through each promo
        $(this).css('height', heightMax + 20);
    });
    
    
    // DOG FURTHER INFO 'POP-UP'
    // remove pop-up from document flow and append to body
    $('#dogFurtherInfo').appendTo('body');
    
    $('#gallerySelect a').bind("mouseenter", function(){
        // Specify item to be moved
        var item = $('#dogFurtherInfo');
        
        // Get widths, heights and offsets
        var width = item.width();
        var height = item.height();
        var pointerOffset = 89;
        
        // Get position of element and compensate for dimensions
        var x = $(this).offset().left - width - 18; // add 3 so overlaps slightly (compensate for 20px margin)
        var y = $(this).offset().top - height + pointerOffset;
        
        // Re-position item
        item.css({
            top: y,
            left: x
        }).fadeIn();
    });
    $('#gallerySelect a').bind("mouseleave", function(){
        $('#dogFurtherInfo').hide();
    });
    
    $('#dogFurtherInfo').bind("mouseenter", function(){
        $(this).show();
    });
    $('#dogFurtherInfo').bind("mouseleave", function(){
        $(this).hide();
    });
    
    // Populate contents
    $('#gallerySelect a').mouseover(function(){
        var dogID = $(this).attr('class');
        dogID = dogID.replace('dog',''); // get id of dog
        dogDBID = $(this).attr('ID').replace("dogID", "");
        // Populate each item
        $('#dogFurtherInfo .image').html('<img src="/files/' + dogs[dogID].img + '" />');
        $('#dogFurtherInfo h3').html(dogs[dogID].name);
        $('#dogFurtherInfo li.type').html(dogs[dogID].type);
        $('#dogFurtherInfo li.colour').html(dogs[dogID].colour);
        $('#dogFurtherInfo li.coat').html(dogs[dogID].coat);
        $('#dogFurtherInfo li.size').html(dogs[dogID].size);
        $('#dogFurtherInfo p a').attr('href', "javascript:popUp('dogpopup.aspx?dog=" + dogDBID + "')");
    });
    
    $('#gallerySelect a').click(function(){
       
    });
    
    
   
    
}