var gindex = {
    price: 0,
    sort: 0,
    brand: 0
};
$(function() {

    $('.searchbox').keyup(function(event) {
        if (event.keyCode < 32)
            return;
        searchchanged();
    });
    $(".searchbox").keydown(function(event) {
        if (event.keyCode == '13') {
            event.preventDefault();
        }
    });
    $('.search-btn').click(function(event) {
    if (event.keyCode < 32)
        return;
            searchchanged();
    });
});

function searchchanged() {
    var searchtext = $('.searchbox').val();
    if (searchtext.length < 3)
        return;

    searchcallback(searchtext, 1, '', 0, 0, 0, 999999);

}
function searchcallback(searchtext, page, brandid, sortcolindex, sortindex, lowprice, highprice) {
    var jobj =
        {
            searchtext: searchtext,
            page: page,
            brandid: brandid,
            sortcolindex: sortcolindex,
            sortindex: sortindex,
            lowprice: lowprice,
            highprice: highprice
        };

    var jdata = JSON.stringify(jobj);

    $.ajax
    (
        {
            type: 'POST',
            async: true,
            data: jdata,
            url: 'JSONWeb.asmx/Search',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(msg) {
                if (msg.d) {
                    var jobj = JSON.parse(msg.d);
                    generateHTMLRightPen(jobj, page);
                    generateHTMLLeftPen(jobj);
                }
                else {
                    alert('Internal Server Error');
                }
            },
            error: function(msg, status, error) {
                alert('Error : ' + error);
            }
        }
    );
}

function generateHTMLRightPen(jobj,currpage) {
    
    var ehtml = "<table cellpadding='0' cellspacing='0' border='0' width='720' class='tbl-search'>";
    ehtml += "<tr><td><table  border='0' cellspacing='0' cellpadding='0' width='100%'><tr><td class='left-bg'></td><td class='mid-bg'><h1><span>Search results for: <b>" + $('.searchbox').val() + "</b></span> </h1></td><td class='right-bg'></td></tr></table></td></tr>";
    
    ehtml += "<tr><td class='total pageDesc'><b>" + jobj.trec + "</b> product matches found (Searched item may also be listed under a <a href='brands.aspx'>Brand</a>).</td>";
    ehtml += "</tr><tr><td>&nbsp;</td></tr>";

    var phtml = generatePage(currpage, jobj.tpages);

    ehtml += "<tr><td>" + phtml + "</td></tr>";
    ehtml += "<tr><td>";
    ehtml += "<table width='100%' cellspacing='0' cellpadding='0' border='0' style='margin-top: 10px;width: 719;'>";
    ehtml += "<tr><td class='cat-bg'>Search Results</td></tr>";
    ehtml += "<tr><td class='brd-green'>";
    ehtml += "<table width='717' border='0' cellspacing='0' cellpadding='0' id='tdl-smain'>";
    var rindex = 0;
    var tr;
    var istrclosed = true;
    $.each(jobj.products, function(index, objprod) {

        if (rindex == 0) {
            istrclosed = false;
            ehtml += '<tr>';
            istrclosed = false;
        }

        rindex += 1;
        ehtml += "<td valign='top' class='verticle-brd'>";
        ehtml += "<table width='239' border='0' cellspacing='0' cellpadding='0'>"
        ehtml += "<tr><td> &nbsp;</td></tr>";
        ehtml += "<tr>";
        ehtml += "<td class='brandname'style='text-align:center;'>";
        ehtml += "<a href='brand-details.aspx?bid=" + objprod.brandID + "'>" + objprod.brandName + "</a>";
        ehtml += "</td>";
        ehtml += "</tr>";
        
        ehtml += "<tr>";
        ehtml += "<td width='239' align='center' class='tdsearchimg'>";
        ehtml += "<a href='product_details.aspx?pid=" + objprod.prodID + "'><img src='images/products/thumb/" + objprod.prodImg + "' alt=''/></a>";
        ehtml += "</td>";
        ehtml += "</tr>";
       
        ehtml += "<tr>";
        ehtml += "<td class='tdsearchpname' style='text-align:center;'>";
        ehtml += "<h3 style='text-align:center;'><a href='product_details.aspx?pid=" + objprod.prodID + "'><b>" + objprod.brandName + "</b> " + objprod.prodName + "</a></h3>";
        ehtml += "</td>";
        ehtml += "</tr>";
        ehtml += "<tr>";
        ehtml += "<td class='product-price'>";
        ehtml += "&pound;" + objprod.prodRRP.toFixed(2);
        ehtml += "</td>";
        ehtml += "</tr>";
       

        ehtml += "<tr>";
        ehtml += "<td class='disc-price' align='center'>";
        ehtml += "<span>" + objprod.prdDText + "</span>";
        ehtml += "</td>";
        ehtml += "</tr>";
        
        ehtml += "<tr>";

        ehtml += "<tr>";
        ehtml += "<td>&nbsp;</td>";
        ehtml += "</tr>";
        ehtml += "<tr>";
        ehtml += "<td align='center'><a href='cart.aspx?pid=" + objprod.prodID + "'><img src='images/buy-now.png' alt='Buy Now' width='99' height='22' /></a>";
        ehtml += "</td>";
        ehtml += "</tr>";
        ehtml += "<tr>";
        ehtml += "<td align='center'>&nbsp;</td>";
        ehtml += "</tr>";
        ehtml += "<tr>";
        ehtml += "<td align='center' class='tdlast'>&nbsp;</td>";
        ehtml += "</tr>";
        ehtml += "<tr>";
        ehtml += "<td align='center'>&nbsp;</td>";
        ehtml += "</tr>";

        ehtml += "</table></td>";
        if (rindex > 2) {
            rindex = 0;
            ehtml += "</tr>";
            istrclosed = true;
        }
    });

    if (rindex != 0) {
        for (var i = rindex; i < 3; i++);
        {
            ehtml += "<td valign='top' class='verticle-brd'><table width='239' border='0' cellspacing='0' cellpadding='0'><tr><td></td></tr></table></td>";
        }
    }
    

    if (!istrclosed)
        ehtml += "</tr>";

    ehtml += "</table></td></tr>";
    ehtml += "<tr><td> &nbsp;</td></tr>"
    ehtml += "<tr><td>" + phtml + "</td></tr>"
    ehtml += "</table></td></tr>";
    ehtml += "</table>";
    

    $('.right-panel').html(ehtml);
}


function generateHTMLLeftPen(jobj) {
    var priceul = "<ul id='ul-price'>";
    priceul += "<a href='javascript:void(0);'><h4>Prices</h4></a>";
    priceul += "<li><input value='0' type='radio' name='price'/><span>All Prices</span></li>";
    priceul += "<li><input value='1' type='radio' name='price'/><span>up to &pound;5</span></li>";
    priceul += "<li><input value='2' type='radio' name='price'/><span>&pound;5 to &pound;10</span></li>";
    priceul += "<li><input value='3' type='radio' name='price'/><span>&pound;10 to &pound;15</span></li>";
    priceul += "<li><input value='4' type='radio' name='price'/><span>&pound;15 to &pound;20</span></li>";
    priceul += "<li><input value='5' type='radio' name='price'/><span>&pound;20+</span></li>";
    priceul += "</ul>";

    var sortul = "<ul id='ul-sort'>";
    sortul += "<a href='javascript:void(0);'><h4>Sort Result</h4></a>";
    sortul += "<li><input value='0' name='sort' type='radio'/><span>Name A-Z</span></li>";
    sortul += "<li><input value='1' name='sort' type='radio'/><span>Name Z-A</span></li>";
    sortul += "<li><input value='2' name='sort' type='radio'/><span>Price Low to High</span></li>";
    sortul += "<li><input value='3' name='sort' type='radio'/><span>Price High to Low</span></li>";
    sortul += "</ul>";

    var brandhtml = "<div id='divleftpen'>" + priceul + sortul + "<ul id='ul-brand'><a hide='0' href='javascript:void(0);'><h4>Brands</h4></a><li><input type='radio' value='0' name='brand'/><span>ALL Brand</span>";
    $.each(jobj.brands, function(index, objbrand) 
    {
        brandhtml += "<li><input type='radio' value='" + objbrand.brandID + "' name='brand'/><span>" + objbrand.brandName + "</span></li>";
    });
    brandhtml += '</ul></div>';


    $('#ul-price a', '#divleftpen').unbind();
    $('#ul-sort a', '#divleftpen').unbind();
    $('#ul-brand a', '#divleftpen').unbind();
    $('#ul-brand input', '#divleftpen').unbind();
    $('#ul-price input', '#divleftpen').unbind();
    $('#ul-sort input', '#divleftpen').unbind();

    $('.left-panel').html(brandhtml);

    $("#ul-price [name='price'][value='" + gindex.price + "']", "#divleftpen").prop("checked", true);
    $("#ul-sort [name='sort'][value='" + gindex.sort + "']", "#divleftpen").prop("checked", true);
    $("#ul-brand [name='brand'][value='" + gindex.brand + "']", "#divleftpen").prop("checked", true);

    $('#ul-price a', '#divleftpen').click(function() {
        $('#ul-price a', '#divleftpen').siblings().toggle();
    });

    $('#ul-sort a', '#divleftpen').click(function() {
        $('#ul-sort a', '#divleftpen').siblings().toggle();
    });

    $('#ul-brand a', '#divleftpen').click(function() {

        if ($('#ul-brand a', '#divleftpen').attr('hide') == '0') {
            $('#ul-brand a', '#divleftpen').nextAll().hide();
            $('#ul-brand a', '#divleftpen').attr('hide', '1');
        }
        else {
            $('#ul-brand a', '#divleftpen').nextAll().show();
            $('#ul-brand a', '#divleftpen').attr('hide', '0');
        }
    });


    $('#ul-price input', '#divleftpen').click(function() {
        cage(-1);
    });

    $('#ul-sort input', '#divleftpen').click(function() {
        var currindex = $(this).parent().index();
        cage(-1);
    });

    $('#ul-brand input', '#divleftpen').click(function() {
        var currindex = $(this).parent().index();
        cage(-1);
    });
}

function generatePage(currpage, tpages) {
    var currpageno = Number(currpage);
    if (tpages < 2) return "";

    var pagehtml = "<ul class='ulpagination'>";
    pagehtml += "<li class='lipage'>Page</li>";

    if (currpage > 1) {
        pagehtml += "<li><a href='javascript:void(0);' onclick='cage(" + (currpageno - 1) + ")'><b>&laquo;</b></a></li>";
    }

    var goleft = false;
    var goright = false;

    for (i = 1; i <= tpages; i++) {
        if (i == currpageno) {
            pagehtml += "<li class='paginationactive'><b>" + i + "</b></li>";
            continue;
        }

        if ((i == 1) || (i == tpages) || (i == (currpageno - 2)) || (i == (currpageno - 1)) || (i == (currpageno + 1)) || (i == (currpageno + 2))) {

            pagehtml += "<li><a href='javascript:void(0);' onclick='cage(" + i + ")'>" + i + "</a></li>";
            continue;
        }

        if ((i < currpageno) && (!goleft)) {
            goleft = true;
            pagehtml += "<li>...</li>";
        }

        if ((i > currpageno) && (!goright)) {
            goright = true;
            pagehtml += "<li>...</li>";
        }
    }
    if (currpage < tpages) {
        pagehtml += "<li><a href='javascript:void(0);' onclick='cage(" + (currpageno + 1) + ")'><b>&raquo;</b></a></li>"
    }
    return pagehtml;
}
function cage(npage) {

    var priceindex = Number($("#ul-price input[name='price']:checked", "#divleftpen").val());
    var sortrindex = Number($("#ul-sort input[name='sort']:checked", "#divleftpen").val());
    var brandindex = Number($("#ul-brand input[name='brand']:checked", "#divleftpen").val());

    if (isNaN(priceindex))
        priceindex = 0;

    if (isNaN(sortrindex))
        sortrindex = 0;

    if (isNaN(brandindex))
        brandindex = 0;
    
    gindex.price = priceindex;
    gindex.sort = sortrindex;
    gindex.brand = brandindex;
    
    var lowprice =0;
    var highprice = 0;
    var colshortindex = 0;
    var colindex = 0;
    var brandid = '';

    var newpage = 1;
    if (npage != -1)
        newpage = npage;
        
    if (priceindex == 0) {
        lowprice = 0;
        highprice = 999999;
    }
    else if (priceindex == 1) {
        lowprice = 0;
        highprice = 5;
    }
    else if (priceindex == 2) {
        lowprice = 5;
        highprice = 10;
    }
    else if (priceindex == 3) {
        lowprice = 10;
        highprice = 15;
    }
    else if (priceindex == 4) {
        lowprice = 15;
        highprice = 20;
    }
    else {
        lowprice = 20;
        highprice = 999999;
    }

    if (sortrindex == 0) {
        colindex = 0;
        colshortindex = 0;
    }
    else if (sortrindex == 1) {
        colindex = 0;
        colshortindex = 1;
    }
    else if (sortrindex == 2) {
        colindex = 1;
        colshortindex = 0;
    }
    else if (sortrindex == 3) {
        colindex = 1;
        colshortindex = 1;
    }

    if (brandindex != 0)
        brandid = brandindex;

    searchcallback($('.searchbox').val(), newpage, brandid, colindex, colshortindex, lowprice, highprice);
        
}