(function(){

    $(document).ready(function() {

        /* make a model instance and trigger data load */

        window.app.model = new window.app.Shop()
        window.app.model.getData()

        /* set up handler for dataChanged event from model */

        $(window).on("dataChanged", function() {

            //table
            var products = window.app.model.getProducts()
            var template = Handlebars.compile($("#productTemplate").html())
            var list = template({products: products})
            /* add to the container */
            $("#product").html(list)


            //show product detail
            $(".product-button").click(function(){
            var id = this.dataset.pid
            console.log(id)
            var product = window.app.model.getProduct(id)
            console.log(product)
            var template = Handlebars.compile($("#detailTemplate").html())
            var list = template({name : product.name, image_url : product.image_url, description : product.description, unit_cost : product.unit_cost, id : product.id})
            $("#productDetails").html(list)

            //add the close button
                        var el = document.getElementById('btn');
                        console.log(el)
                        if(el){
                            el.addEventListener('click', function() {
                                console.log("Close")
                                $("#list").empty()
                                return false
                                })
                            }
            })
            //cart
            $.get({
                       url: "/cart",
                       success: function(data) {
                            var cartList = data.cart
                            if(cartList.length === 0)
                            {
                                $("#cart").html("Cart is empty")
                            }
                            else
                            {
                                var totalCost = 0
                                for(var i = 0; i<cartList.length; i++)
                                {
                                    totalCost = totalCost + parseInt(cartList[i].quantity)*parseInt(cartList[i].cost)
                                }
                                $("#cart").html("Your cart has "+cartList.length+ " item(s). Total cost : $"+totalCost)
                            }
                       }
            })
        })
    })

})()