// UI_ShoppingListPanel.js
// Ryan van der Kooy
// 02/26/08
// eComSystems, Inc.

// Classes:
// ShoppingListPanel

ShoppingListPanel = function(plugIn, adViewerAd) {
    this.plugIn = plugIn;
    
    this.adViewerAd = adViewerAd;
    this.top = 0;
    this.left = 0;
    this.width = 0;
    this.height = 0;
    
    
    //drag and drop
    this.beginX = 0;
    this.beginY = 0;
    
    this.vSpace = 5;
    this.hSpace = 5;
    
    this.currentItemID;
    
    
    this.shoppingListPanel = new PanelCanvas(plugIn, "ShoppingListPanel");
    this.shoppingListPanel.setWidth(700);
    this.shoppingListPanel.setTitle("My Shopping List");
    
    var mainCanvasXamlString = "<Canvas />";
    this.mainCanvas = this.plugIn.content.createFromXaml(mainCanvasXamlString);
    this.shoppingListPanel.add(this.mainCanvas);
    
    
    this.listDiv = new ShoppingListDiv();
    
    
    this.InstructionsPanel = new PanelCanvas(plugIn, "Instructions");
   
        this.InstructionsPanel.setWidth(500);
        this.InstructionsPanel.setHeight(500);
        this.InstructionsPanel.setLeft(-900);
        this.InstructionsPanel.setTop(50);
        
        this.InstructionsPanel.setTitle("Instructions");
        this.InstructionsPanel.setAsCloseable();
        this.InstructionsPanel.setAsDraggable();
        this.InstructionsPanel.hide();
        
        
        //var instructionsButtonXamlString = "<TextBlock ";
        //        instructionsButtonXamlString += "FontSize='12' ";
        //        instructionsButtonXamlString += "FontFamily='Arial Narrow' ";
        //        instructionsButtonXamlString += "Text='Instructions' ";
        //        instructionsButtonXamlString += "Cursor='Hand' ";
         //       instructionsButtonXamlString += "Canvas.Top='50' ";
         //       instructionsButtonXamlString += "Canvas.Left='8' ";
         //   instructionsButtonXamlString += "/>";
        //this.instructionsButton = this.plugIn.content.createFromXaml(instructionsButtonXamlString);
        //this.mainCanvas.children.add(this.instructionsButton);
        //this.instructionsButton.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this.InstructionsPanel, this.InstructionsPanel.show));

    //this.mainCanvas.children.add(this.InstructionsPanel.getXamlElement());
    
    
    var viewPrintButtonXamlString = "<TextBlock ";
                viewPrintButtonXamlString += "FontSize='14' ";
                viewPrintButtonXamlString += "FontFamily='Arial Narrow' ";
                viewPrintButtonXamlString += "Text='View/Print' ";
                viewPrintButtonXamlString += "Cursor='Hand' ";
                viewPrintButtonXamlString += "Canvas.Top='50' ";
                viewPrintButtonXamlString += "Canvas.Left='50' ";
            viewPrintButtonXamlString += "/>";
        this.viewPrintButton = this.plugIn.content.createFromXaml(viewPrintButtonXamlString);
        this.mainCanvas.children.add(this.viewPrintButton);
        this.viewPrintButton.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(ShoppingList, ShoppingList.showReport));
        
        
        this.emailPanel = new PanelCanvas(plugIn, "Email");
   
        this.emailPanel.setWidth(300);
        this.emailPanel.setHeight(150);
        this.emailPanel.setLeft(-290);
        this.emailPanel.setTop(10);
        
        this.emailPanel.setTitle("Email My Shopping List");
        this.emailPanel.setAsCloseable();
        //this.emailPanel.setAsDraggable();
        this.emailPanel.hide();
        
        this.mainCanvas.children.add(this.emailPanel.getXamlElement());
        this.emailPanel.closeButton.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.hideEmailControls));
        this.emailControls = document.getElementById("emailControls");
        this.emailTextBox = document.getElementById("emailToTextBox");
        this.emailControls.style.left = parseInt(this.left + this.emailPanel.left) + "px";
        this.emailControls.style.top = parseInt(this.top + this.emailPanel.top) + "px";
        
        var sendButtonRectString = "<Rectangle ";
                sendButtonRectString += "Fill='White' ";
                sendButtonRectString += "Stroke='Black' ";
                sendButtonRectString += "StrokeThickness='2' ";
                sendButtonRectString += "Width='100' ";
                sendButtonRectString += "Height='33' ";
                sendButtonRectString += "Canvas.Top='115' ";
                sendButtonRectString += "Canvas.Left='100' ";
            sendButtonRectString += "/>";
            
        this.sendButtonRect = this.plugIn.content.createFromXaml(sendButtonRectString);
        this.emailPanel.add(this.sendButtonRect);
        
            
        var sendButtonXamlString = "<TextBlock ";
                sendButtonXamlString += "FontSize='30' ";
                sendButtonXamlString += "FontFamily='Arial Narrow' ";
                sendButtonXamlString += "Text='Send!' ";
                sendButtonXamlString += "Cursor='Hand' ";
                sendButtonXamlString += "Canvas.Top='110' ";
                sendButtonXamlString += "Canvas.Left='120' ";
            sendButtonXamlString += "/>";
        
        
        this.sendButton = this.plugIn.content.createFromXaml(sendButtonXamlString);
        this.emailPanel.add(this.sendButton);
        this.sendButton["Canvas.Left"] = ((this.emailPanel.width / 2) - (this.sendButton.actualWidth / 2));
        this.sendButton.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.emailReport));
       
        
        
        var emailButtonXamlString = "<TextBlock ";
                emailButtonXamlString += "FontSize='14' ";
                emailButtonXamlString += "FontFamily='Arial Narrow' ";
                emailButtonXamlString += "Text='Email' ";
                emailButtonXamlString += "Cursor='Hand' ";
                emailButtonXamlString += "Canvas.Top='50' ";
                emailButtonXamlString += "Canvas.Left='170' ";
            emailButtonXamlString += "/>";
        this.emailButton = this.plugIn.content.createFromXaml(emailButtonXamlString);
        if (navigator.appName != "Netscape") {
        this.mainCanvas.children.add(this.emailButton);
        this.emailButton.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.showEmailPanel));
    }
     
    
    
        //newcell.style.backgroundColor="Red";
     this.quantityPanel = new PanelCanvas(plugIn, "QuantityPanel");
     this.quantityPanel.setWidth(120);
     this.quantityPanel.setHeight(130);
     this.quantityPanel.setTitle("Quantity");
     this.quantityPanel.setAsDraggable();
     this.plugIn.content.findName("Content1").children.add(this.quantityPanel.getXamlElement());
     this.quantityPanel.hide();
     
     var quantityXamlString = "<TextBlock ";
            quantityXamlString += "FontSize='60' ";
            quantityXamlString += "Canvas.Left='15' ";
            quantityXamlString += "Canvas.Top='25' ";
            quantityXamlString += "FontStretch='UltraCondensed' ";
        quantityXamlString += "/>";
    this.quantity = this.plugIn.content.createFromXaml(quantityXamlString);
    this.quantityPanel.add(this.quantity);
    
    var incrementQtyXamlString = "<Path ";
            incrementQtyXamlString += "Width='20' ";
            incrementQtyXamlString += "Height='21.5' ";
            incrementQtyXamlString += "Fill='#FF000000' ";
            incrementQtyXamlString += "Stretch='Fill' ";
            incrementQtyXamlString += "Stroke='#FF000000' ";
            incrementQtyXamlString += "Canvas.Left='85' ";
            incrementQtyXamlString += "Canvas.Top='40' ";
            incrementQtyXamlString += "Cursor='Hand' ";
            incrementQtyXamlString += "Data='M10,-2 L19.5,18.5 0.5,18.5 z' ";
        incrementQtyXamlString += "/>";
    this.incrementQtyButton = this.plugIn.content.createFromXaml(incrementQtyXamlString);
    this.quantityPanel.add(this.incrementQtyButton);
    this.incrementQtyButton.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.incrementQuantity));
    
     var decrementQtyXamlString = "<Path ";
            decrementQtyXamlString += "Width='20' ";
            decrementQtyXamlString += "Height='21.5' ";
            decrementQtyXamlString += "Fill='#FF000000' ";
            decrementQtyXamlString += "Stretch='Fill' ";
            decrementQtyXamlString += "Stroke='#FF000000' ";
            decrementQtyXamlString += "Canvas.Left='85' ";
            decrementQtyXamlString += "Canvas.Top='90' ";
            decrementQtyXamlString += "Opacity='0.4' ";
            //decrementQtyXamlString += "Cursor='Hand' ";
            decrementQtyXamlString += "Data='M10,-2 L19.5,18.5 0.5,18.5 z' ";
        decrementQtyXamlString += ">";
            decrementQtyXamlString += "<Path.RenderTransform>";
                decrementQtyXamlString += "<ScaleTransform ScaleY='-1'/>";
            decrementQtyXamlString += "</Path.RenderTransform>";
        decrementQtyXamlString += "</Path>";
    this.decrementQtyButton = this.plugIn.content.createFromXaml(decrementQtyXamlString);
    this.quantityPanel.add(this.decrementQtyButton);
    this.decrementQtyButton.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.decrementQuantity));
    
    var addXamlString = "<TextBlock ";
            addXamlString += "Text='Add' ";
            addXamlString += "FontSize='15' ";
            addXamlString += "Canvas.Left='75' ";
            addXamlString += "Canvas.Top='100' ";
            addXamlString += "Cursor='Hand' ";
        addXamlString += "/>";
    this.addButton = this.plugIn.content.createFromXaml(addXamlString);
    this.quantityPanel.add(this.addButton);
    this.addButton.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.addItemToList));
    
    var cancelXamlString = "<TextBlock ";
            cancelXamlString += "Text='Cancel' ";
            cancelXamlString += "FontSize='15' ";
            cancelXamlString += "Canvas.Left='5' ";
            cancelXamlString += "Canvas.Top='100' ";
            cancelXamlString += "Cursor='Hand' ";
        cancelXamlString += "/>";
    this.cancelButton = this.plugIn.content.createFromXaml(cancelXamlString);
    this.quantityPanel.add(this.cancelButton);
 
    this.cancelButton.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.cancel));
    
    
   
            var helpTextXamlString = "<TextBlock ";
                    helpTextXamlString += "FontSize='15' ";
                    helpTextXamlString += "Text='Click To Add' ";
                    helpTextXamlString += "Foreground='Black' ";
                    helpTextXamlString += "Canvas.Left='4' ";
                    helpTextXamlString += "Canvas.Top='5' ";
                helpTextXamlString += "/> ";
        
    this.helpText = new PanelCanvas(this.plugIn, "helpText");
    this.helpText.add(this.plugIn.content.createFromXaml(helpTextXamlString));
    this.helpText.setHeight(30);
    this.helpText.hide();
    this.plugIn.content.findName("Content1").children.add(this.helpText.getXamlElement());
    
    
    
    
 }
 
 
 ShoppingListPanel.prototype.getXamlElement = function() {

    return this.shoppingListPanel.getXamlElement();
}
 
 
 ShoppingListPanel.prototype.setTop = function(top) {
    this.shoppingListPanel.setTop(top);
    this.top = top;
    this.listDiv.setTop(top + 90);
    //this.listDiv.style.top = top + 90; 
    this.emailControls.style.top = (parseInt(this.top + this.emailPanel.top + 50)).toString() + "px";
}

ShoppingListPanel.prototype.setLeft = function(left) {
    this.shoppingListPanel.setLeft(left);
    this.left = left;
    this.listDiv.setLeft(left + 10);
    //this.listDiv.style.left = (parseInt(this.left + this.emailPanel.left + 30)).toString() + "px";
    this.emailControls.style.left = (parseInt(this.left + this.emailPanel.left + 30)).toString() + "px";
}

ShoppingListPanel.prototype.setWidth = function(width) {
    this.shoppingListPanel.setWidth(width);
    this.mainCanvas.width = width;
    this.width = width;
    this.listDiv.setWidth(width - 20);
    //this.listDiv.style.width = width - 20;
    //this.staticTable.style.width = width;
}
 
 
 ShoppingListPanel.prototype.setHeight = function(height) {
    this.shoppingListPanel.setHeight(height);
    this.mainCanvas.height = height;
    this.height = height;
    this.listDiv.setHeight(height * 0.75);
    //this.listDiv.style.height = this.height * 0.7;
}


ShoppingListPanel.prototype.setAreas = function(adPage) {
  
    this.adPage = adPage;
 
    for (i=0;i<adPage.productAreas.length;i++) {
                
                try {
                this.plugIn.content.findName(adPage.productAreas[i].areaID).addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.getQuantity));
                this.plugIn.content.findName(adPage.productAreas[i].areaID).addEventListener("MouseEnter", Silverlight.createDelegate(this, this.handleEnter));
                this.plugIn.content.findName(adPage.productAreas[i].areaID).addEventListener("MouseLeave", Silverlight.createDelegate(this, this.handleLeave));
                this.plugIn.content.findName(adPage.productAreas[i].areaID).addEventListener("MouseMove", Silverlight.createDelegate(this, this.handleMove));
            } catch(err) {
            
            }
                }
 
}
ShoppingListPanel.prototype.getQuantity = function(sender, e) {
    this.helpText.hide();
    this.decrementQtyButton.cursor = "Arrow";
        this.decrementQtyButton.opacity = "0.4";
    this.quantity.text = "1";
    this.quantityPanel.setTop(e.getPosition(null).y);
    this.quantityPanel.setLeft(e.getPosition(null).x);
    this.quantityPanel.show();
    this.currentItemID = sender.Name;

}
ShoppingListPanel.prototype.handleLeave = function(sender) {

    this.helpText.hide();

}

ShoppingListPanel.prototype.handleEnter = function(sender) {

    this.helpText.show();

}
ShoppingListPanel.prototype.handleMove = function(sender, e) {
    var currX = e.getPosition(null).x + 20;
    var currY = e.getPosition(null).y + 20;
    this.helpText.setLeft(this.helpText.left + (currX - this.beginX));
    this.helpText.setTop(this.helpText.top + (currY - this.beginY)); 
    
    this.beginX = currX;
    this.beginY = currY;
    

}

ShoppingListPanel.prototype.incrementQuantity = function() {
    this.decrementQtyButton.cursor="Hand";
    this.decrementQtyButton.opacity = "1";
    var currQty = this.quantity.text;
    this.quantity.text = (parseInt(currQty) + 1).toString();
}

ShoppingListPanel.prototype.decrementQuantity = function() {
    if (this.quantity.text != "1") {
    var currQty = this.quantity.text;
    this.quantity.text = (parseInt(currQty) - 1).toString();
    }
        
    if (this.quantity.text == "1") {
        this.decrementQtyButton.cursor = "Arrow";
        this.decrementQtyButton.opacity = "0.4";
    }
}

ShoppingListPanel.prototype.cancel = function() {

    this.quantityPanel.hide();

}

ShoppingListPanel.prototype.addItemToList = function(sender) {
    var productArea = this.adViewerAd.getProductAreaByAreaID(this.currentItemID);
    var listItem = new ListItem(this.currentItemID);
    
    
    listItem.setBrand(productArea.brand);
    listItem.setTitle(productArea.title);
    listItem.setImageLocation(this.adViewerAd.getProductThumbLocation(productArea.productImageName));
    listItem.setPrice(productArea.price);
    listItem.setQuantity(this.quantity.text);
    listItem.setUnit(productArea.unit);
    listItem.setDepartment(productArea.department);
    listItem.setSize(productArea.size);
    ShoppingList.addListItem(listItem);
    this.listDiv.addProduct(listItem);
      
    this.quantityPanel.hide();
    
}

ShoppingListPanel.prototype.setFill = function(color) {
    this.shoppingListPanel.setFill(color);
    this.helpText.setFill(color);
    this.quantityPanel.setFill(color);
    this.InstructionsPanel.setFill(color);
    this.emailPanel.setFill(color);
}

ShoppingListPanel.prototype.showInstructions = function() {

}


ShoppingListPanel.prototype.showEmailPanel = function() {
    this.emailPanel.show();
    this.emailControls.style.visibility = "visible";
    
    

}
ShoppingListPanel.prototype.emailReport = function() {
    document.getElementById("emailStatus").innerText = "Sending...";
    ShoppingList.emailReport();

}

ShoppingListPanel.prototype.hideEmailControls = function() {
    this.emailControls.style.visibility = "hidden";
    document.getElementById("emailStatus").innerText = "";

}