function load() {

    var total = 0;
    $("#pagenumber").html("1");//default page number
    $("#pagenumber1").html("1"); //default page number

    $(".productItemStyle").mouseover(function() {

        var productCode = $(this).attr("code");
        showdetail(productCode);

    }).mouseout(function() {

        var productCode = this.attributes["code"].nodeValue;
        closediv(productCode);
    });
    
    $(".dropZone").click(function() {
        var itemno = $("#total").html();
        var no = parseInt(itemno);
        if (no == 0) {
            //display
            $("#msg").html("Currently, there are no items in your cart");
        }
        else {
            window.open('CartConfirm.aspx','_top');
        }
    });
    $("#up").click(function() {

        var id = $(this).attr("id");



        if (id == "up") {
            var up = $("#uppage").attr("value");
            var upcnt = parseInt(up);

            if (upcnt == 0) {
                $("#uppage").attr("value", upcnt);
                $("#pagenumber").html(upcnt + 1);
                $("#pagenumber1").html(upcnt + 1);
            }
            else {
                $("#uppage").attr("value", upcnt - 1);
                $("#pagenumber").html(upcnt);
                $("#pagenumber1").html(upcnt);
            }


        }
        if (id == "down") {
            var up = $("#uppage").attr("value");
            var upcnt = parseInt(up);
            $("#uppage").attr("value", upcnt + 1);

        }

        G4.CartAJAX.GetMyCart(GetMyList,ErrorHandler, TimeOutHandler );


    });

    $("#down").click(function() {

        var id = $(this).attr("id");



        if (id == "up") {
            var up = $("#uppage").attr("value");
            var upcnt = parseInt(up);
            if (upcnt == 0) {
                $("#uppage").attr("value", upcnt);
            }
            else {
                $("#uppage").attr("value", upcnt - 1);
            }

        }
        if (id == "down") {
            var up = $("#uppage").attr("value");
            var upcnt = parseInt(up);
            var totalpage = $("#totalpage").attr("value");
            var tp = parseInt(totalpage);
            if (upcnt == tp) {
                $("#uppage").attr("value", tp); //last page
                $("#pagenumber").html(tp + 1);
                $("#pagenumber1").html(tp + 1);
            }
            else {
                $("#uppage").attr("value", upcnt + 1);
                $("#pagenumber").html(upcnt + 2);
                $("#pagenumber1").html(upcnt + 2);
            }


        }

        G4.CartAJAX.GetMyCart(GetMyList, ErrorHandler, TimeOutHandler);


    });
    // $(document).ready(function() {
    $(".itemimage").click(function() {
        //$(".droppedItemStyle").remove();
        var droppedItem = $(this).clone();
        droppedItem.prependTo("body");
        //droppedItem.removeClass("productItemStyle");

        droppedItem.css({
            'width': $(this).css('width'),
            'height': $(this).css('height'),
            'position': 'absolute',
            'top': $(this).offset().top,
            'left': $(this).offset().left,
            'opacity': 0.9
        });

        //droppedItem.removeClass("productItemStyle").addClass("droppedItemStyle");
        droppedItem.show();

        var $cart = $(".dropZone");

        droppedItem.animate({
            width: $cart.innerWidth(),
            height: $cart.innerHeight(),
            top: $cart.offset().top,
            left: $cart.offset().left,
            opacity: 0
        }, { duration: 1500 });
        //droppedItem.removeClass(".itemimage").addClass("droppedItemStyle");
        //$(".droppedItemStyle").remove();

        var productCode = droppedItem[0].attributes["code"].nodeValue;
        var productPrice = droppedItem[0].attributes["price"].nodeValue;
        var name = droppedItem[0].attributes["name"].nodeValue;
        var id = droppedItem[0].attributes["id"].nodeValue;
        var indexcnt = droppedItem[0].attributes["index"].nodeValue;
        var idname = "Quantity" + indexcnt;
        var select_obj = document.getElementById(idname);
        var index = select_obj.selectedIndex;
        var quantity = select_obj.options[index].text;
        var cnt = parseInt(quantity);

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


        G4.CartAJAX.AddACEItem(productCode, "MP", name, cnt, DisplayMsg, ErrorHandler, TimeOutHandler);

        setTimeout("cart_main()", 1000);

        return false;

    });
    
    G4.CartAJAX.GetTotalMileage(writemileage, ErrorHandler, TimeOutHandler);
    G4.CartAJAX.GetItemCntInCart(WriteCount, ErrorHandler, TimeOutHandler);
    G4.CartAJAX.GetMyCart(GetMyList, ErrorHandler, TimeOutHandler);
    G4.CartAJAX.GetItemCntInCart(WriteCount, ErrorHandler, TimeOutHandler);
    G4.CartAJAX.GetTotalCostInCart(WriteTotalAmount, ErrorHandler, TimeOutHandler);
    $(".productItemStyle").draggable({ helper: "clone", opacity: "0.5", revert: 'invalid' });


    $(".dropZone").droppable(

        {
            accept: ".productItemStyle",
            hoverClass: "dropHover",
            drop: function(ev, ui) {

                var droppedItem = ui.draggable.clone(); //.removeClass("productItemStyle").addClass("droppedItemStyle");

                var productCode = droppedItem[0].attributes["code"].nodeValue;
                var productPrice = droppedItem[0].attributes["price"].nodeValue;
                var name = droppedItem[0].attributes["name"].nodeValue;
                var id = droppedItem[0].attributes["id"].nodeValue;
                var indexcnt = droppedItem[0].attributes["index"].nodeValue;
                var idname = "Quantity" + indexcnt;
                var select_obj = document.getElementById(idname);
                var index = select_obj.selectedIndex;
                var quantity = select_obj.options[index].text;
                var cnt = parseInt(quantity);

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


                G4.CartAJAX.AddACEItem(productCode, "MP", name, cnt, DisplayMsg, ErrorHandler, TimeOutHandler);

                setTimeout("cart_main()", 1000);


            }

        }

        );


    // });
    }

    function cart_main() {
    
        $("#loading").hide();
        document.getElementById("ctl00_Main_MsgLabel").innerHTML = ""; //Empty message;
        //$(".displayZone").empty();
        G4.CartAJAX.GetTotalMileage(writemileage, ErrorHandler, TimeOutHandler);
        G4.CartAJAX.GetMyCart(GetMyList, ErrorHandler, TimeOutHandler);
        G4.CartAJAX.GetItemCntInCart(WriteCount, ErrorHandler, TimeOutHandler);
        G4.CartAJAX.GetTotalCostInCart(WriteTotalAmount, ErrorHandler, TimeOutHandler);
        $(".dropZone").effect("bounce",{times:3,distance:15},500);
        
        
    }
    function DisplayMsg(remain) {
        if (remain!="error") {
           
            if (parseInt(remain) < 0) {
                $("#alarm").show(500);
            }
            else {
                $("#alarm").hide();
                document.getElementById("remain").innerHTML = remain;
            }
            
        }
    }
    function showalarm() {
        //var remain=parent(
        $("#alarm").show(500);

    }
    //
    function writemileage(mileage) {
        $("#mileage").html(mileage);
    }
    //
    function WriteTotalAmount(amount) {
        $("#total").html(amount);
        var mileage = parseInt($("#mileage").html());
        var remain = mileage - parseInt(amount);
        $("#remain").html(remain);
    }
    
    function WriteCount(cnt) {
        $("#itemcnt").html(cnt);
    }
    
   
    function GetMyList(list) {

        $("#msg").html("");
        if (list != null && list.length > 0) {

            var totalpage = parseInt((list.length - 1) / 7);
            $("#totalpage").attr("value", totalpage);
            
            var up = $("#uppage").attr("value");
            var upcnt = parseInt(up);

            $(".displayZone").empty();

            for (var x = upcnt * 7; x < (upcnt + 1) * 7; x++) {

                if (list[x]) {
                    createtable(list[x].ItemID, list[x].ID, list[x].ItemName, list[x].Quantity, list[x].ServerName, list[x].CharacterName);
                }

            }
            //setTimeout("", 1000);
            if (list.length > 7) {
                document.getElementById("up").style.display = "";
                document.getElementById("down").style.display = "";
                $("#pageup").show();  //default page number
                $("#pagedown").show(); //default page number
            }
            else {
                document.getElementById("up").style.display = "none";
                document.getElementById("down").style.display = "none";
                $("#pageup").hide();  //default page number
                $("#pagedown").hide(); //default page number
            }
        }

        else {
            $(".displayZone").empty();
            $("#up").hide();
            $("#down").hide();
            $("#pageup").hide();  //default page number
            $("#pagedown").hide(); //default page number
        }
        //        

    }

    function removeItem(cart_list_id) {

        G4.CartAJAX.DeleteACEItem(cart_list_id, ErrorHandler, TimeOutHandler);
        $("#alarm").hide();
        $("#loading").show();
        $("#uppage").attr("value", "0");
        $("#pagenumber").html("1"); //default page number
        $("#pagenumber1").html("1"); //default page number
        setTimeout("cart_main()", 1000);

        
    }
    function createtable(itemid, id,name,quantity,server,character){


        //left side;

        var img = document.createElement("img");
        img.src = "subaimages/ace/" + itemid  + ".jpg";
        var left_td = document.createElement("td");
        left_td.appendChild(img);

        var left_tr = document.createElement("tr");
        left_tr.appendChild(left_td);

        var left_tbody = document.createElement("tbody")
        left_tbody.appendChild(left_tr);

        var left_table = document.createElement("table");
        left_table.appendChild(left_tbody);


        //         //right side;
        var right_td1 = document.createElement("td");
        right_td1.innerHTML = name;

        var right_td3 = document.createElement("td");
        right_td3.innerHTML = "Server:" + server;
        
        var right_td4 = document.createElement("td");
        right_td4.innerHTML = "Character:" + character;
        
        var right_td5 = document.createElement("td");
        right_td5.innerHTML ="Quantity:"+ quantity  ;

        var right_td2 = document.createElement("td");
        //remove button
        var removeLink = document.createElement("a");

        removeLink.innerHTML = "Remove";
        removeLink.className = "deleteLink";
        removeLink.href = "#";

        removeLink.onclick = function() {

            removeItem(id);
        }
        right_td2.appendChild(removeLink);

        var right_tr1 = document.createElement("tr");
        right_tr1.appendChild(right_td1);
        
        var right_tr3 = document.createElement("tr");
        right_tr3.appendChild(right_td3);
        
        var right_tr4 = document.createElement("tr");
        right_tr4.appendChild(right_td4);
        
        var right_tr5 = document.createElement("tr");
        right_tr5.appendChild(right_td5);
        
        var right_tr2 = document.createElement("tr");
        right_tr2.appendChild(right_td2);
        
        
        
        

        var right_tbody = document.createElement("tbody");
        right_tbody.appendChild(right_tr1);
        
        right_tbody.appendChild(right_tr3);
        right_tbody.appendChild(right_tr4);
        right_tbody.appendChild(right_tr5);
        
        right_tbody.appendChild(right_tr2);

        var right_table = document.createElement("table");
        right_table.appendChild(right_tbody);
        //          

        //main talbe
        var main_td_left = document.createElement("td");
        main_td_left.appendChild(left_table);


        var main_td_right = document.createElement("td");
        main_td_right.appendChild(right_table);

        var main_tr = document.createElement("tr");
        main_tr.appendChild(main_td_left);
        main_tr.appendChild(main_td_right);

        main_tbody = document.createElement("tbody");
        main_tbody.appendChild(main_tr);

        var main_table = document.createElement("table");
        main_table.appendChild(main_tbody);

        main_table.id = "table" + id;

        $(".displayZone")[0].appendChild(main_table);
    
    }
    
    // format the code and remove junky stuff! 
    function getFormattedPrice(unformattedPrice) {

        return unformattedPrice;           
    }    

    // update the total!
    function updateTotal(price,count) {

        var cnt = parseInt($("#itemcnt").html());
        var total = parseInt($("#total").html());
        var add = parseInt(count);
        $("#itemcnt").html(cnt + add);
        total +=parseInt(price);
        $("#total").html(total);
        var mileage = parseInt($("#mileage").html());
        var remain = mileage - total;
        $("#remain").html(remain);
    }
    
    function listSelectedItems() 
    {
        var itemsInShoppingCart = $(".dropZone div");
    
        for(i=0;i<=itemsInShoppingCart.length-1;i++) 
        {
            alert(itemsInShoppingCart[i].attributes["code"].nodeValue); 
            alert(itemsInShoppingCart[i].attributes["price"].nodeValue); 
        }

    }
    function ErrorHandler() {
        var game = $("#gamehidden").attr("value");
        if (game = "ace") {
            cart_main();
        }
        if (game = "pt1") {
            pt1cart_main();
        }
        
    }
    function TimeOutHandler() {
        var game = $("#gamehidden").attr("value");
        if (game = "ace") {
            cart_main();
        }
        if (game = "pt1") {
            pt1cart_main();
        }
    }