var itemArray = [
    { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "/images/fruits/60Banana.png" }
 ];

// For Example of loading
var itemArray2 = [
    { title: "Banana Blast Two", text: "Low-fat frozen yogurt", picture: "/images/fruits/60Banana.png" }, 
    { title: "Marvelous Mint", text: "Gelato", picture: "/images/fruits/60Mint.png" },
    { title: "Succulent Strawberry", text: "Sorbet", picture: "/images/fruits/60Strawberry.png" },
    { title: "Lavish Lemon Ice", text: "Sorbet", picture: "/images/fruits/60Lemon.png" },
    { title: "Creamy Orange", text: "Sorbet", picture: "/images/fruits/60Orange.png" },
    { title: "Very Vanilla", text: "Ice Cream", picture: "/images/fruits/60Vanilla.png" },
    { title: "Lavish Lemon Ice Two", text: "Sorbet", picture: "/images/fruits/60Lemon.png" }
  ];


function generateItems() {
  var tIndex = 0;
  itemArray.forEach(function(item){
    item.counter = tIndex++;
  });
  return itemArray;
};

var items = generateItems();
var data = new WinJS.Binding.List(items);

var groupedData = data.createGrouped(function (item) {
    return item.title.toUpperCase().charAt(0);
}, function (item) {
    return {
        title: item.title.toUpperCase().charAt(0)
    };
}, function (left, right) {
    return left.charCodeAt(0) - right.charCodeAt(0);
});

WinJS.Namespace.define("Sample.ListView", {
    generate: generateItems,
    data: groupedData,
    eh: {
        footerVisibility: WinJS.UI.eventHandler(function (ev) {
            var visible = ev.detail.visible;
            if (visible) {
                WinJS.Utilities.removeClass(Sample.ListView.progress, "hide");
                WinJS.UI.Animation.fadeIn(Sample.ListView.status);

                // Simulate XHR by just setting a timeout and updating the observable binding list     
                WinJS.Promise.timeout(100).then(function () {
                  var items = itemArray2;
                  items.forEach(function (item) {
                    Sample.ListView.data.push(item);
                  });
                });
              
            } else {
                WinJS.Utilities.addClass(Sample.ListView.progress, "hide");
            }
        }),
        toggleStripes: WinJS.UI.eventHandler(function (ev) {   
            WinJS.Utilities.toggleClass(Sample.ListView.listView, "stripes");         
        }),
        backToTop: WinJS.UI.eventHandler(function (ev) {
            Sample.ListView.listView.winControl.scrollPosition = 0;
        }),
        removeSelected: WinJS.UI.eventHandler(function (ev) {
            //Sample.ListView.listView.winControl.scrollPosition = 0;
          removeSelected();
        })
    }
});

// Remove the selected tile
function removeSelected() {
  // Get the control
  //var list2 = document.getElementById("listView").winControl;
  var list2 = Sample.ListView.listView.winControl;
  
  if (list2.selection.count() > 0) {
    list2.selection.getItems().done(function (items) {

      //Sort the selection to ensure its in index order
      items.sort(function CompareForSort(item1, item2) {
        var first = item1.index, second = item2.index;
        if (first === second) {
          return 0;
        } else if (first < second) {
          return -1;
        }
        else {
          return 1;
        }
      });

      //Work backwards as the removal will affect the indices of subsequent items
      for (var j = items.length - 1; j >= 0; j--) {
        // To remove the items, call splice on the list, passing in a count and no replacements
        data.splice(items[j].index, 1);
      }
      
    });
  }
}


// Cache ListView and Header elements
Sample.ListView.listView = document.querySelector(".listView");
Sample.ListView.header = document.querySelector(".header");
Sample.ListView.progress = document.querySelector(".footer .progress");
Sample.ListView.status = document.querySelector(".footer .status");

// Data bind header element and split pane element
WinJS.Binding.processAll(Sample.ListView.header, Sample.ListView).then(function () {
    return WinJS.Binding.processAll(Sample.ListView.splitPane, Sample.ListView);
}).then(function () {
    // Process UI to initialize WinJS controls 
    return WinJS.UI.processAll();
});

var msToTime = function(duration) {
  var milliseconds = parseInt((duration % 1000)/100);
  var seconds = parseInt((duration / 1000) % 60);
  var minutes = parseInt((duration / (1000*60)) % 60);
  var hours = parseInt((duration / (1000*60*60)) % 24);

  hours = (hours < 10) ? "0" + hours : hours;
  minutes = (minutes < 10) ? "0" + minutes : minutes;
  seconds = (seconds < 10) ? "0" + seconds : seconds;

  return hours + ":" + minutes + ":" + seconds + "." + milliseconds;
};