productApp = {};
productApp.selectedMonth = 1;
productApp.selectedProduct = "Play Station";

productApp.Initiatilized = false;
productApp.Init = function () {
    
    showProgress();
    getProducts();
  
   var cbprod=$("#product").wijcombobox({
        isEditable: false,
        selectedIndex: 0,
        selectedIndexChanged: function (e, data) {
           
           
                var val = cbprod.wijcombobox("option", "selectedValue");
                if (val)
                {
                    productApp.selectedProduct = cbprod.wijcombobox("option", "selectedValue");
                }
                
               
            
                
             refreshReport();
        }

    });

   var cbmonth= $("#month").wijcombobox({
        isEditable: false,
        selectedIndex: 0,
        data: getMonths(),
        selectedIndexChanged: function (e, data) {
            productApp.selectedMonth = cbmonth.wijcombobox("option", "selectedIndex") + 1;
          
                refreshReport();
            
        }

    });
   
     $("#productUnits").wijcompositechart({
         animation: { duration: 2000, easing: "easeOutCubic" },
         showChartLabels: false,
        seriesStyles: [{
            fill: "#AF6060",
            stroke: "#AF6060",
            strokeWidth:3

        },
            {
                fill: "#FF9900",
                stroke:"Red"
            }],
        axis: {
            y: [
                {
                    text:"Revenue",
                },
                {
                    text:"Units",
                    compass: "east",
                    min: 500,
                    max: 4000,
                    gridMajor: {
                        visible: false
                    }
                }

            ]
        },
        data: {
            x: { bind: "Day" }
        },
        legend:{compass:"north",orientation:"horizontal"}

    });
    $("#customerRatio").wijbarchart({
        animation: { duration: 2000, easing: "EaseOutCubic" },
        seriesStyles: [{
            fill: "#AF6060",
            stroke: "Maroon",
            strokeWidth: 2

        },
        {
            fill: "#FF9900",stroke:"Maroon", strokeWidth:2
        }],
        data: {
            x: { bind: "Product" }
        },
        legend: {
            compass: "east",
                   },
        autoResize: true,
        clusterRadius: 12
    });

    $("#orderRatio").wijpiechart({
        animation:{duration:1000,easing:"EaseOutBounce"},
         innerRadius: 70,
        radius: 90,
        seriesStyles: [{
            fill: "#AF6060",
                    },
        {
            fill: "#FF6600",
           
        }, {
            fill: "#FFCC66",
          
        },
        {
            fill: "#ff9900"
        }],
        data: {
            label: { bind: "Key" },
            value: { bind: "Value" },
        },
        
    });

    $("#salesRatio").wijbubblechart({
        animation: { duration: 1000, easing: "EaseOutBounce" },
        seriesStyles: [{ fill: "#ff9900", stroke: "#AF6060" }],
        autoResize: true,
        legend: {
            compass: "north"
        },
        data: {
            x: { bind: "Product" }
        }
    });

    $("#categoryUnits").wijlinechart({
       
        seriesStyles: [{ fill: "#ff9900", stroke: "#AF6060" }],
        autoResize:true,
        type: "area",
        legend: {
            compass: "north"
        }
    });

     $("#revenue").wijradialgauge({
        height: 230,
        width: 230,
        value: 10,
        max: 60,
        min: 0,
        startAngle: 10,
         endAngle:10,
        sweepAngle: 160,
        radius: 100,
        islogarithmic: false,
        origin: {
            x: 0.5, y: 0.5
        },
        labels: {
            offset: -30, //4F6B82 
            style: {
                fill: "#556A7C",
                stroke: "none"
            }
        },
        tickMinor: {
            position: "inside",
            style: {
                fill: "#556A7C",
                stroke: "#556A7C"
            },
            interval: 2,
            visible: true,
            offset: 1
        },
        tickMajor: {
            position: "center",
            
            style: {
                fill: "#556A7C",
                stroke: "#556A7C"
            },
            interval: 5,
            visible: true
        },
        //face: {
        //    style: {
        //        fill: "#AF6060",
        //        stroke: "#996633",
        //        opacity:0.8
        //    }
         //},
        face: {
            template: function (ui) {
                var a = ui.canvas.path($.wijraphael.sector(ui.origin.x, ui.origin.y, ui.r, 0, 180)),
                b = ui.canvas.path($.wijraphael.sector(ui.origin.x, ui.origin.y, ui.r / 6, 180, 0)),
                style = {
                    fill: "#AF6060",
                    stroke: "#996633",
                    opacity:0.8
                };
                a.attr(style);
                b.attr(style);
                //return ui.canvas.image(url, ui.origin.x - ui.r, ui.origin.y - ui.r, ui.r * 2, ui.r * 2); 
            }
        },
        pointer: {
            length: 1,
            style: {
                fill: "#ff9900",
                stroke: "#BF551C"
            }
        },
        cap: {
            style: {
                fill: "#993333",
                stroke: "#ff9900",
                "stroke-width": 2
            }
        }
    });

   $("#categorySalesMS").wijradialgauge({
        height: 260,
        width:170,
        value: 10,
        max: 30,
        min: 0,
        sweepAngle: 90,
        radius: 90,
        islogarithmic: false,
        origin: {
            x: 0.7, y: 0.6
        },
        labels: {
            offset: 5, //4F6B82 
            style: {
                fill: "#556A7C",
                stroke: "none"
            }
        },
        tickMinor: {
            position: "center",
            style: {
                fill: "#FFCC66",
                stroke: "#556A7C",
                height: 0.5,
                width:10
            },
            interval: 1,
            visible: true,
            offset: 5,
            factor:3
        },
        tickMajor: {
            position: "center",
            style: {
                fill: "#556A7C",
                stroke: "#556A7C",
                height: 2,
                width:20
            },
            interval: 5,
            factor:1,
            offset:1,
            visible: true
        },
        ranges: [{
            startWidth: 20,
            endWidth: 20,
            startValue: 0,
            endValue: 30,
            startDistance: 0.7,
            endDistance: 0.7,
            style: {
                fill: "#ff9900",
                opacity:0.8
        }
        }],
        face: {
            style: {
                fill: "transparent",
                stroke: {width:0}
            }
        },
        pointer: {
            length: 0.8,
            width:20,
             style: {
                 fill: "#AF6060",
                stroke: "#BF551C"
            }
        },
        cap: {
            radius:20,
            style: {
                fill: "#AF6060",
                stroke: "Maroon",
                "stroke-width": 2
            }
        }
   });

    $("#categorySalesSony").wijradialgauge({
        height: 260,
        width: 170,
        value: 10,
        max: 30,
        min: 0,
        sweepAngle: 90,
        radius: 90,
        islogarithmic: false,
        origin: {
            x: 0.7, y: 0.6
        },
        labels: {
            offset: 5, //4F6B82 
            style: {
                fill: "#556A7C",
                stroke: "none"
            }
        },
        tickMinor: {
            position: "center",
            style: {
                fill: "#556A7C",
                stroke: "#556A7C",
                height: 0.5,
                width: 10
            },
            interval: 1,
            visible: true,
            offset: 5,
            factor: 3
        },
        tickMajor: {
            position: "center",
            style: {
                fill: "#556A7C",
                stroke: "#556A7C",
                height: 2,
                width: 20
            },
            interval: 5,
            factor: 1,
            offset: 1,
            visible: true
        },
        ranges: [{
            startWidth: 20,
            endWidth: 20,
            startValue: 0,
            endValue: 30,
            startDistance: 0.7,
            endDistance: 0.7,
            style: {
                fill: "#ff9900",
                opacity: 0.8
            }
        }],
        face: {
            style: {
                fill: "transparent",
                stroke: { width: 0 }
            }
        },
        pointer: {
            length: 0.8,
            width: 20,
            style: {
                fill: "#AF6060",
                stroke: "#BF551C"
            }
        },
        cap: {
            radius: 20,
            style: {
                fill: "#AF6060",
                stroke: "Maroon",
                "stroke-width": 2
            }
        }
    });
   $("#categorySalesNv").wijradialgauge({
        height: 260,
        width: 170,
        value: 10,
        max: 30,
        min: 0,
        sweepAngle: 90,
        radius: 90,
        islogarithmic: false,
        origin: {
            x: 0.7, y: 0.6
        },
        labels: {
            offset: 5, //4F6B82 
            style: {
                fill: "#556A7C",
                stroke: "none"
            }
        },
        tickMinor: {
            position: "center",
            style: {
                fill: "#556A7C",
                stroke: "#556A7C",
                height: 0.5,
                width: 10
            },
            interval: 1,
            visible: true,
            offset: 5,
            factor: 3
        },
        tickMajor: {
            position: "center",
            style: {
                fill: "#556A7C",
                stroke: "#556A7C",
                height: 2,
                width: 20
            },
            interval: 5,
            factor: 1,
            offset: 1,
            visible: true
        },
        ranges: [{
            startWidth: 20,
            endWidth: 20,
            startValue: 0,
            endValue: 30,
            startDistance: 0.7,
            endDistance: 0.7,
            style: {
                fill: "#ff9900",
                opacity: 0.8
            }
        }],
        face: {
            style: {
                fill: "transparent",
                stroke: { width: 0 }
            }
        },
        pointer: {
            length: 0.8,
            width: 20,
            style: {
                fill: "#AF6060",
                stroke: "#BF551C"
            }
        },
        cap: {
            radius: 20,
            style: {
                fill: "#AF6060",
                stroke: "Maroon",
                "stroke-width": 2
            }
        }
    });
   
}

function getMonths()
{
    return [{label:'January',value:'January'}, {label:'February',value:'February'}, {label:'March',value:'March'},{label: 'April',value:'April'},
        { label: 'May', value: 'May' }, { label: 'June', value: 'June' }, { label: 'July', value: 'July' }, { label: 'August', value: 'August' },
        { label: 'September', value: 'September' }, { label: 'October', value: 'October' }, { label: 'November', value: 'November' }, { label: 'December', value: 'December' }];

}
function showProgress()
{
  $("#loadingOverlay").width(document.documentElement.clientWidth).height(document.documentElement.clientHeight);
    $("#loadProgress").wijprogressbar({
        value: 0,
        animationOptions: {
            duration: 0
        }
    });
    productApp.updateProgress("Initializing...", 20);
}

function sector(cx, cy, r, startAngle, endAngle, params) {
    var x1 = cx + r * Math.cos(-startAngle * rad),
        x2 = cx + r * Math.cos(-endAngle * rad),
        y1 = cy + r * Math.sin(-startAngle * rad),
        y2 = cy + r * Math.sin(-endAngle * rad);
    return paper.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params);
}
function getProducts()
{
   
    
    
    $.ajax({
        url: "Product/GetProducts",
        dataType: "json",
         data: {},
        success: function (data) {
            if (data && data.length) {
                var productview = [];
                for (i = 0; i < data.length;i++)
                {
                    var items = {
                        label: data[i].Value,
                        value: data[i].Value
                    };
                  
                    productview.push(items);
                   
                }
                if (productview.length > 0)
                {
                $("#product").wijcombobox("option", "data", productview);
                $("#product").wijcombobox("option", "selectedIndex", 0);
              
                }

                //this is a workaround to fix bug 94311, the real reason is a wijcombobox issue,
                //when set selectedIndex=0 in wijcombobox, the selectedIndexChanged event was not trigger.
                refreshReport();
            }
        }
    });
   
}

function refreshReport() {
          
     loadRevenue();
    loadCustomerRatio();
    loadOrderRatio();
    loadSalesRatio();
    loadCategorySales();
    selectedProductSale();
}

function loadRevenue() {
   productApp.updateProgress("Loading Revenue Data...", 40);
    $.ajax({
        url: "Product/GetProductsRevenue",
        dataType: "json",
        data: { SelMonth: productApp.selectedMonth, SelProduct: productApp.selectedProduct },
        success: function (data) {

            if (data && data.length) {
               
                var seriesList = [];
                
                var unitSeries = {
                    type: "scatter",
                    
                    legendEntry: true,
                    markers: { visible: true, type: "circle" },
                    label: "Units Sold",
                    data: {
                        //x: { bind: "Day" },
                        y: { bind: "Units" }
                    },
                    yAxis: 1

                };

                var revnueSeries = {
                    type: "bezier",
                    label: "Revenue",
                    legendEntry: true,
                    markers:{visible:true,type:"tri"},
                    data: {
                        //x: { bind: "Day" },
                        y: { bind: "Amount" }
                    }
                };
                seriesList.push(revnueSeries);
                seriesList.push(unitSeries);
                $("#productUnits").wijcompositechart("option", "seriesList", seriesList);
                $("#productUnits").wijcompositechart("option", "dataSource", data);
            }
        }
    });
}

function loadCustomerRatio() {

    $.ajax({
        url: "Product/GetCustomerRatio",
        dataType: "json",
        data: { SelMonth:productApp.selectedMonth },
        success: function (data) {

            if (data && data.length) {
                               
                var seriesList = [];
                var oldSeries = {
                    label: "Existing Customers",
                    data: {
                        y:{bind:"OldCustomer"}
                    }
                }

                var newSeries = {
                    label:"New Customers",
                    data: {
                        y: { bind: "NewCustomer" }
                    }
                }
                seriesList.push(oldSeries);
                seriesList.push(newSeries);
                $("#customerRatio").wijbarchart("option", "seriesList", seriesList);
                $("#customerRatio").wijbarchart("option", "dataSource", data);
            }
        }
    });
}

function loadOrderRatio() {
    $.ajax({
        url: "Product/GetOrderStatusRatio",
        dataType: "json",
        data: { SelMonth: productApp.selectedMonth, SelProduct: productApp.selectedProduct },
        success: function (data) {
            if (data && data.length) {
                var seriesList = [];
                var ordersSeries = {
                    //label: "Existing Customers",
                    data: {
                        y: { bind: "OldCustomer" }
                    }
                }
                $("#orderRatio").wijpiechart("option", "dataSource", data);
                
            }
        }
    });
}

function loadSalesRatio() {
    $.ajax({
        url: "Product/GetSalesRatio",
        dataType: "json",
        data: { SelMonth: productApp.selectedMonth },
        success: function (data) {
            if (data && data.length) {
               
                var seriesList = [];
                var salesSeries = {
                    label: "Sales %",
                    data: {
                        y: { bind: "SalesRatio" },
                        y1: { bind: "SalesRatio" }
                    }
                }
                seriesList.push(salesSeries);
                $("#salesRatio").wijbubblechart("option", "seriesList", seriesList);
                $("#salesRatio").wijbubblechart("option","dataSource",data);
            }


        }
    });
    
}

function loadCategorySales() {
    $.ajax({
        url: "Product/GetCategoryRevenue",
        dataType: "json",
        data: { SelMonth: productApp.selectedMonth },
        success: function (data) {
            if (data && data.length) {
                var seriesList = [];
                var lineSeries = {
                    fitType: "spline",
                    label: "Units Sold",
                    markers:{visible:true,type:"circle"},
                    data: {
                        x: { bind: "Product" },
                        y: { bind: "Units" }
                       
                    }
                }
                seriesList.push(lineSeries);
                $("#categoryUnits").wijlinechart("option", "seriesList", seriesList);
                $("#categoryUnits").wijlinechart("option", "dataSource", data);

                var mssales =(data[1].Amount);
                var pssales = (data[0].Amount);
                var nvsales = (data[2].Amount);
                $("#categorySalesMS").wijradialgauge("option", "value", mssales / 1000000);
                $("#categorySalesSony").wijradialgauge("option", "value", pssales / 1000000);
                $("#categorySalesNv").wijradialgauge("option", "value", pssales / 1000000);

                $("#revenueMSlbl").text("MS: " + Globalize.format(mssales,"c"));
                $("#revenueSonylbl").text("SONY: " + Globalize.format(pssales,"c"));
                $("#revenueNvlbl").text("NVIDEA: " + Globalize.format(nvsales, "c"));
            }
        }
    });
}

function selectedProductSale()
{
    productApp.updateProgress("Loading Sales Data...",80);
    $.ajax({
        url: "Product/GetSelectedProductSale",
        dataType: "json",
        data: { SelMonth: productApp.selectedMonth,SelProduct:productApp.selectedProduct },
        success: function (data) {
            if (data) {
                
                var sales = data[0] / 1000000;
                var totalSales = data[1] / 1000000;
                $("#revenue").wijradialgauge("option", "value", data[0] / 1000000);

                var  ranges = [{
                            startWidth: 15,
                            endWidth: 20,
                            startValue: sales - 10,
                            endValue: sales+10,
                            startDistance: 0.8,
                            endDistance: 0.8,
                            style: {
                                fill: "#AF6060",
                                stroke: "#BC8A8E",
                                opacity: 0.8
                            }
                        }
                        ];
                   
                $("#revenue").wijradialgauge("option", "ranges", ranges);
                $("#revenue").wijradialgauge("option", "max", totalSales);
                $("#revenuelbl").text("REVENUE: " + Globalize.format(data[0],"c"));
                
            }
            productApp.updateProgress("Finished Loading...", 100);
        }
    });
}

productApp.updateProgress = function (msg, prg) {
    if (!productApp.Initiatilized  ) {
        $("#loadingOverlay .progress-label").text(msg);
        $("#loadProgress").wijprogressbar("option", "value", prg);
        if (prg === 100) {
            productApp.Initiatilized = true;
            
            $("#loadingOverlay").hide("slide", { direction: 'up', easing: 'easeOutExpo' }, 1200);
        }
    }
   
};