var pageNum = 1;
var pageSize = 0;
var maxPages = 0;
var sort = 2;
var basicSearch = "";
var zipCode = 0;
var zipPadding = 0;

var shingleBrand = 0;
var shingleStyle = 0;
var shingleColor = 0;

var shingleColorName = "";

$(document).ready(function() {
    $("#tabs").tabs();

    setTimeout("$('#tabs').tabs('select', 0);", 200);

    $("#results").corner("7px");

    var b = $(".ddlBrands option")
    b[0].selected = true;
    getShingleStyle($(".ddlBrands").val());

    $("#txtZip").keyup(function() {
        if ($(this).val().length > 0) {
            $("#bttnZip").attr("disabled", false);

            if ($(this).val().length == 5) {
                $("#ZipPadding").attr("disabled", false);
            }
            else {
                $("#ZipPadding").attr("disabled", true);
            }
        }
        else {
            $("#bttnZip").attr("disabled", true);
            zipCode = 0;
        }
    }).numeric();


    $("#bttnZip").click(function() {
        shingleBrand = 0;
        shingleStyle = 0;
        shingleColor = 0;
        pageNum = 1;
        basicSearch = "";
        zipCode = $("#txtZip").val();
        zipPadding = $("#ZipPadding").val();
        getCustomerList();
    });

    $(".ddlBrands").change(function() {
        getShingleStyle($(this).val());
    });

    $("#ddlStyles").change(function() {
        getShingleColor($(this).val());
    });

    $("#ddlColor").mousedown(function() {
        $("#ddlColor").hide();

        $("#ddlColorContainer").show();


        $("#tableColor td").hover(
            function() {
                $(this).addClass('highlight');
            },
            function() {
                $(this).removeClass('highlight');
            }
        ).click(function() {
            shingleColor = $(this).attr("id").split(":")[1];
            $("#ddlColorContainer").hide();
            $("#ddlColor").show();

            var o = $("#ddlColor option");

            for (var i = 0; i < o.length; i++) {
                if (o[i].value == shingleColor) {
                    o[i].selected = true;
                }
                else {
                    o[i].selected = false;
                }
            }

        });


    });

    $("#ddlColor").change(function() {
        shingleColor = $(this).val();
    });


    $(".ddlSort").change(function() {
        sort = $(this).val();
    });

    $(".ddlResults").change(function() {
        pageSize = $(this).val();
    });

    $("#bttnPrevious").click(function() {
        if (pageNum > 1) {
            pageNum--;
            getCustomerList();
        }
    });

    $("#bttnNext").click(function() {
        if (pageNum < maxPages) {
            pageNum++;
            getCustomerList();
        }
    });

    


});

function getShingleStyle(brandID) {
    shingleBrand = brandID;
    shingleStyle = 0;
    shingleColor = 0;

    if (brandID != 0) {
        
        $("#styleLoad").show();
        $("#colorLoad").show();
        $("#ddlStyles").hide();
        $("#ddlColor").hide();
                
        $.ajax({
            type: "POST",
            url: "portfoliowebservice.asmx/getShingleTypes",
            data: "{'brandID':'" + shingleBrand + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(response) {
                var data = response.d;
                var options = "";

                for (var i = 0; i < data.length; i++) {
                    options += '<option value="' + data[i].Id + '">' + data[i].ShingleStyle + '</option>';
                }

                $("#ddlStyles").html(options).show();
                $("#styleLoad").hide();

                $("#ddlStyles option")[0].selected = true;
                getShingleColor($("#ddlStyles").val());
            }
        });
    }
    else {
        $("#ddlStyles").html("");
        $("#ddlColor").html("");
    }
}

function getShingleColor(styleID) {
    shingleStyle = styleID;
    shingleColor = 0;

    if (styleID != 0) {
        $("#colorLoad").show();
        $("#ddlColorContainer").hide();

        $.ajax({
            type: "POST",
            url: "portfoliowebservice.asmx/getShingleColor",
            data: "{'styleID':'" + shingleStyle + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(response) {
                var data = response.d;
                var div = "";
                var count = 0;

                shingleColor = data[0].Id;
                shingleColorName = data[0].ShingleColor;

                div = "<table id=\"tableColor\" cellpadding=\"10\" style=\"width:400px\">";


                for (var i = 0; i < data.length; i++) {

                    if (count == 0) {
                        div += "<tr>";
                        colorID = data[i].Id;
                    }

                    div += "<td valign=\"top\" style=\"text-align:center; width:136px\" ><div id=\"color:" + data[i].Id + ":" + data[i].ShingleColor + "\" class=\"hilightShingle\" style=\"width:100%; height:100%; padding: 6px; position:inherit; \"><img src=\"http://ridgecon.com/images/shingleColor/" + data[i].ImagePath + "\" /><br />" + data[i].ShingleColor + "</div></td>";

                    if (count == 3) {
                        div += "</tr>";
                        count = 0;
                    }
                    else {
                        count++;
                    }
                }

                if (data.length > 0) {
                    getCustomerList();
                }

                if (count != 0) {
                    if (count == 1) {
                        div += "<td></td><td></td>";
                    }
                    if (count == 2) {
                        div += "<td></td>";
                    }                    
                    div += "</tr>";
                }

                div += "</table>";
                $("#ddlColorContainer").html(div);
                $("#ddlColorContainer").show();
                $("#colorLoad").hide();
                loadColorEvents();
            }
        });
    }
    else {
        $("#ddlColor").html("");
    }
}


function loadColorEvents() {

    $(".hilightShingle").corner("5");
    
    $(".hilightShingle").hover(
            function() {
                $(this).addClass('highlight');                
            },
            function() {
                $(this).removeClass('highlight');
            }
    ).click(function() {
        shingleColor = $(this).attr("id").split(":")[1];
        shingleColorName = $(this).attr("id").split(":")[2];
        shingleBrand = 0;
        shingleStyle = 0;
        
        pageNum = 1;
        basicSearch = "";
        zipCode = 0;
        zipPadding = 0;
        getCustomerList();

    });
}


function getCustomerList() {

    $("#resultsLoad").show();
    $("#tblResults").html("");
    $("#hasResults").hide();

    //alert('brandID' + brandID + ', styleID' + styleID + ', colorID:' + colorID + ', pageIndex:' + index + ', pageSize:' + pageSize + ', sort:' + sort + ' , basicSearch:' + basicSearch + ', zipCode:' + zipCode + ', zipPadding:' + zipPadding);
    
    
    var index = pageNum - 1;
    $.ajax({
        type: "POST",
        url: "portfoliowebservice.asmx/getCustomerList",
        data: "{'brandID':'" + shingleBrand + "', 'styleID':'" + shingleStyle + "', 'colorID':'" + shingleColor + "', 'pageIndex':'" + index + "', 'pageSize':'" + pageSize + "', 'sort':'" + sort + "' , 'basicSearch':'" + basicSearch + "', 'zipCode':'" + zipCode + "', 'zipPadding':'" + zipPadding + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(response) {
            var dataSet = eval('(' + response.d + ')');
            var results = dataSet.Tables[1].Rows[0].TotalRowCount;

            var ZipPadding = 0;
            if ($("#ZipPadding").val() > 0) {
                ZipPadding = ' \+ ' + $("#ZipPadding").val();
            }
            else 
            {
                ZipPadding = ""
            }

            var r = "";
            if (zipCode != 0) {
                r = "<table style='width:400px;'><tr><td style='width:100px; text-align:left;'><b>Zip Code:</b> " + zipCode + ZipPadding + "</td></tr></table>"
            } else {
                r = "<span style=\"color:#999999\">" + $(".ddlBrands option:selected").text() + "</span> &nbsp; <b>/</b> &nbsp; " + "<span style=\"color:#999999\">" + $("#ddlStyles option:selected").text() + "</span> &nbsp; <b>/</b> &nbsp; <span style=\"color:#999999\">" + shingleColorName + "</span>";
            }
            $("#crumbs").html(r);
            r = ""

            if (results > 0) {
                $("#noResults").hide();
                $("#crumbs").show();
                $("#hasResults").show();

                maxPages = Math.ceil(results / pageSize);

                displayResults(dataSet.Tables[0].Rows, results, zipCode);

                $("#pageNum").html("Page " + pageNum + " of " + maxPages);
                $("#numOfResults").html(results + " Total");

            }
            else {
                $("#noResults").show();
                $("#crumbs").show();
                $("#hasResults").hide();
            }

        }


    });
    $("#resultsLoad").hide();

}


function displayResults(rows, results, zipCode) {

    var r = "";

    r += "<tr><td colspan='3' padding-left:6px; text-align:left;'><b>Address</b> &nbsp;&nbsp;&nbsp; (" + results + " Results Found)</td><td>Sort by:&nbsp;&nbsp; <span style='font-size:16px;'>&bull;</span>&nbsp;<span id='citySort' style='cursor:pointer;' >City</span>&nbsp;&nbsp;&nbsp;<span style='font-size:16px;'>&bull;</span>&nbsp;<span id='zipSort' style='cursor:pointer;'>Zip</span></td></tr>";
    $("#tblHeader").html(r);

    r = "";

    for (var i = 0; i < rows.length; i++) {

        var image = "";
        var leftImage = "";
        
        if (rows[i].ImagePath != null) {
            leftImage = "http://ridgecon.com/images/shingleSelector/" + rows[i].ImagePath;
            image = "<span onclick=\"loadLeftImage('" + leftImage + "')\" target='_blank' style='cursor:pointer'><img src='images/camera.png' /></span>";
        }
        else{
            leftImage = "/images/shingleSelectDefault.jpg"
        }

        if (i == 0) {
            loadLeftImage(leftImage)
        }

        var addy = "<a href='http://maps.google.com/maps?q=" + rows[i].Customer_Address_Line_1 + "+" + rows[i].Customer_City + ",+" + rows[i].Customer_State + "+" + rows[i].Customer_Zip + "' target='_blank'>" + rows[i].Customer_Address_Line_1 + " " + rows[i].Customer_City + ", " + rows[i].Customer_State + " " + rows[i].Customer_Zip + "</a>";

        var imageAddy = "<a href='http://maps.google.com/maps?q=" + rows[i].Customer_Address_Line_1 + "+" + rows[i].Customer_City + ",+" + rows[i].Customer_State + "+" + rows[i].Customer_Zip + "' target='_blank'><img src='images/map.png' /></a>";
        

        //http: //maps.google.com/maps?q=933+Peach+Blossom+Ct.+Rochester+Hills,+MI+48036
        //<td>" + image + "</td>

        r += "<tr style='height:20px;'><td style='width:280px; text-align:left;'>" + addy + "</td><td style='width:25px;'>" + imageAddy + "</td><td style='width:36px;'>" + image + "</td></tr>";
    }

    $("#tblResults").html(r);

    $("#resultsLoad").hide();

    $("table#tblResults tr:odd").addClass("trEven");

    $("#citySort").click(function() {
        sort = 0;
        getCustomerList();
    });

    $("#zipSort").click(function() {
        sort = 2;
        getCustomerList();
    });

    if (sort == 0) {
        $("#citySort").addClass("sortSpan");
    }
    else {
        $("#zipSort").addClass("sortSpan");
    }

}

function loadLeftImage(HouseImage) {
    $("#leftImage").attr("src", HouseImage);
}