// login functions

/*
 * Creating login form elements, login validation
 */
var LoginHelper = {
  loginDiv: null,
  overlayDiv: null,

  createOverlay: function() {
    var o = new Element('div', {'id': 'overlay'});
    o.setStyles({'background-color': 'rgb(53,58,44)',
                 'z-index': '100',
                 'position': 'absolute',
                 'top': '0',
                 'left': '0',
                 'height': window.getScrollHeight() + 'px',
                 'width': window.getScrollWidth() + 'px'}); 
    o.setOpacity(.7);
    
    LoginHelper.overlayDiv = o;
  },

  createLoginForm: function(overlayDiv) {
    var baseHref = $('base_tag').getAttribute('href');
  
    var loginInput = new Element('input', {'id': 'loginInput', 'type': 'text', 'name': 'login', 'maxlength': '20'}).setStyles({'margin': '0px 10px', 'width': '170px'});
    var passwordInput = new Element('input', {'type': 'password', 'name': 'password', 'maxlength': '20'}).setStyles({'margin': '0px 10px', 'width': '170px'});
    var submitButton = new Element('input', {'type': 'image', 'title': 'Login', 'src': baseHref+'images/elements/login_popup/button_login.gif'}).setStyles({'margin': '10px'});
    var cancelButton = new Element('input', {'type': 'image', 'title': 'Cancel', 'src': baseHref+'images/elements/login_popup/button_cancel.gif'}).setStyles({'margin': '10px'});
                
    var loginDiv = new Element('div')
      .setStyles({'z-index': '101', 'position': 'absolute', width: '301px', 'padding-top': '49px', 'display': 'none', 'background-image': 'url('+baseHref+'images/elements/login_popup/frame_top.gif)', 'background-repeat': 'no-repeat'})
      .adopt(new Element('form', {'id': 'loginForm', 'action': 'login', 'method': 'post'})
        .setStyles({'background-color': 'white', 'padding': '15px 20px 10px 20px', 'font-size': '0.9em'})
        .adopt(new Element('input', {'type': 'hidden', 'name': 'source', 'value': 'popup'}))
        .adopt(new Element('input', {'type': 'hidden', 'name': 'code', 'value': LoginHelper.lockingHelper.code.getValue()}))
        .adopt(new Element('input', {'type': 'hidden', 'name': 'quantity', 'value': LoginHelper.lockingHelper.quantity.getValue()}))
        .adopt(new Element('input', {'type': 'hidden', 'name': 'unit', 'value': LoginHelper.lockingHelper.unit.getValue()}))
        .adopt(new Element('div').setStyle('text-align', 'right').appendText('Login:').adopt(loginInput))
        .adopt(new Element('div').setStyle('text-align', 'right').appendText('Password:').adopt(passwordInput))
        .adopt(new Element('div').adopt(submitButton).adopt(cancelButton))
        .adopt(new Element('div')
          .setStyles({'padding-top': '10px', 'background-image': 'url('+baseHref+'images/elements/login_popup/divider_tile.gif)', 'background-repeat': 'repeat-x', 'background-position': 'top left'})
          .setText('Don\'t have an account with us? ')
          .adopt(new Element('a', {'href': baseHref+'create-account'})
            .setStyles({'color': 'rgb(128,178,31)'})
            .setText('Click here to register'))))
      .adopt(new Element('div')
        .setStyles({'height': '8px', 'width': '301px', 'background-image': 'url('+baseHref+'images/elements/login_popup/frame_bottom.gif)', 'background-repeat': 'no-repeat'}));

    submitButton.onclick = LoginHelper.sendLoginRequest;
    cancelButton.onclick = LoginHelper.hideLoginForm;
  
    LoginHelper.loginDiv = loginDiv;
  },
  
  sendLoginRequest: function() {
    var baseHref = $('base_tag').getAttribute('href');
    var a = new Ajax(baseHref+'login/', {
      method: 'post',
      data: $('loginForm'),
      onSuccess: function(response,responseXML) {
        var loginInfoList = responseXML.getElementsByTagName('login-info');
        
        if(loginInfoList[0].getAttribute('valid') == 'true') {
          LoginHelper.lockingHelper.addProduct(); // need to do this before hiding login form
          LoginHelper.hideLoginForm();
          RightComponentHelper.setCurrentName(loginInfoList[0].getAttribute('login-name'));
          RightComponentHelper.showBasketComponent();
          RightComponentHelper.hideLoginComponent();
           
        } else {
          alert("Login or password invalid, please try again.");
        }
      },
      onFailure: function(response) {
        alert("Login process failed, please try again.");
      }
    }).request();
    
    return false;
  },
  
  showLoginForm: function(lockingHelper) {
    if(LoginHelper.lockingHelper != null) {
      return;
    }
  
    LoginHelper.lockingHelper = lockingHelper;
    
    $$('select').forEach(function(element, index) { element.setStyle('display', 'none'); }); 
    
    LoginHelper.createOverlay();
    LoginHelper.createLoginForm();
    
    LoginHelper.loginDiv.injectAfter(LoginHelper.overlayDiv.injectAfter('outer_container'));
      
    LoginHelper.loginDiv.setStyle('display', 'block');
    LoginHelper.loginDiv.setStyle('top', (window.getHeight() - LoginHelper.loginDiv.getCoordinates().height) / 2);
    LoginHelper.loginDiv.setStyle('left', (window.getWidth() - LoginHelper.loginDiv.getCoordinates().width) / 2);
    LoginHelper.loginDiv.getElement('#loginInput').focus();    
  },
  
  hideLoginForm: function() {
    LoginHelper.loginDiv.remove();
    LoginHelper.overlayDiv.remove();
    $$('select').forEach(function(element, index) { element.setStyle('display', 'inline'); });
    LoginHelper.lockingHelper = null;
    
    return false;
  }
};

/*
 * Right side menu changes for basket & login components
 */
var RightComponentHelper = {
  setCurrentName: function(currentName) {
    $('basket_container').getElements('p')[0]
      .setText('You are logged in as:')
      .adopt(new Element('br'))
      .appendText(currentName);
  },
  
  setNewNumberOfItemsInBasket: function(numberOfItems) {
    var nbrItemsSpan = $('noItemsInBasket');
    
    // previous state: 'Basket is empty' - had no span#noItemsInBasket
    if(nbrItemsSpan == null) {
      nbrItemsSpan = new Element('span', {'id': 'noItemsInBasket'});
    }
    
    $('basket_container').getElements('p')[1]
      .setText('Basket contains ')
      .adopt(nbrItemsSpan.setText(numberOfItems))
      .appendText((numberOfItems == 1 ? ' item' : ' items'));
  },
  
  // display it (used after a successful login)
  showBasketComponent: function() {
    $('basket_container').setStyle('display', 'block');
  },
  
  hideLoginComponent: function() {
    $('basket_login_container').setStyle('display', 'none');
  }
};

/*
 * Basket form helper - changes font color in inputs, validates inputs and adds product
 * There is one helper for each form.
 */
var BasketFormHelper = new Class({
  initialize: function(addToBasketDiv) {
    this.form = addToBasketDiv.getElement('form');
    this.code = this.form.getElement('.code');
    this.quantity = this.form.getElement('.quantity');
    this.unit = this.form.getElement('.unit');
    this.submitButton = this.form.getElement('.submit_add_to_basket');
    this.reportingElement = new Element('p', {'id': 'add_to_basket_result'})
      .setStyles({'color': 'rgb(187,13,22)', 'font-size': '0.9em'});
      
    addToBasketDiv.adopt(this.reportingElement);
    this.form.adopt(new Element('input', {'type': 'hidden', 'name': 'source', 'value': 'javascript'}));
    
    this.quantity.onfocus = this.clearQuantityOnFocus.bind(this);
    this.unit.onfocus = this.clearUnitOnFocus.bind(this);
    
    if(this.submitButton != null) {
      this.submitButton.onclick = this.runAddProductRequest.bind(this);
    }
    
    var addProductData = {method: 'post', data: this.form,
    onSuccess: this.addProductSucceeded.bind(this), onFailure: this.addProductFailed};
    
    this.addProductRequest = new Ajax($('base_tag').getAttribute('href')+'add-product/', addProductData);
  },
  
  addProduct: function() {
    this.addProductRequest.request();
  },
  
  addProductSucceeded: function(response,responseXML) {
      var productList = responseXML.getElementsByTagName('product');
      
      if(productList[0].getAttribute('added') == 'true') {
        var basketData = responseXML.getElementsByTagName('basket')[0];
        RightComponentHelper.setNewNumberOfItemsInBasket(basketData.getAttribute('item-number'));
        this.reportingElement
          .setText('Item was successfully added to ')
          .adopt(new Element('a', {'href': 'basket-contents'})
            .setText('your basket')
            .setStyles({'color': 'rgb(187,13,22)', 'text-decoration': 'underline'}));
         
        if(this.form.runOnSuccess != null) {
          this.form.runOnSuccess(this.form);
        }
      } else if(responseXML.getElementsByTagName('needs-login').length > 0) {
        LoginHelper.showLoginForm(this);
        
      } else {
        this.reportingElement.setText('Adding the product to the basket failed, please try again.');
      }
  },
  
  addProductFailed: function(response) {
      this.reportingElement.setText('Adding the product to the basket failed, please try again.');
    },
    
  isProductQuantityValid: function() {
    var productQty = this.quantity.getValue();
    return !(productQty == null || productQty == '' || !/^\d+$/.test(productQty));
  },
  
  isProductUnitValid: function() {
    return !(this.unit.getValue() == null || this.unit.getValue() == '');
  },
  
  runAddProductRequest: function(event) {
    if(!this.isProductQuantityValid()) {
      alert('Please enter the number of items you wish to purchase.');
      
    } else if(!this.isProductUnitValid()) {
      alert('Please enter the product unit for the item you wish to purchase.');
      
    } else {
      this.addProduct();
    }
    
    var e = new Event(event);
    e.preventDefault();
    return false;
  },
  
  clearQuantityOnFocus: function() {
    if(this.quantity.getStyle('color') != '#333333') {
      if(isNaN(this.quantity.getValue())) {
        this.quantity.value='';
      }
      this.quantity.setStyle('color', '#333333');
      this.quantity.setAttribute('maxlength', '3');
    }
  },
  
  clearUnitOnFocus: function() {
    if(this.unit.getStyle('color') != '#333333') {
      this.unit.setStyle('color', '#333333');
    }
  }
});

var BasketScriptInitialization = {
  basketContentsScript: function() {
    var i;
    var basketItemDivs = $$('.basketItem');
    for(i = 0; i < basketItemDivs.length; i++) {
      if(basketItemDivs[i].getElement('form') != null) {
        new BasketFormHelper(basketItemDivs[i]);
      }
    }
  },
  
  productDetailScript: function() {
    var i;
    var addToBasketDivs = $$('.add_to_basket');
    for(i = 0; i < addToBasketDivs.length; i++) {
      new BasketFormHelper(addToBasketDivs[i]);
    }
    
    for(i = 0; i < addToBasketDivs.length; i++) {
      if(addToBasketDivs[i].getParent().hasClass('product_fullsize_container')) {
        continue;
      }
    
      var addToBasketFullButton = new Element('input', 
        {'type': 'image', 'title': 'Add to basket', 'src': $('base_tag').getAttribute('href')+'images/elements/product_details_product_add/add_to_basket_medium_btn.gif', 'class': 'medium_add_to_basket_btn'});
      addToBasketFullButton.injectTop(addToBasketDivs[i]);
    }
          
    var generalContainer = $('left_container');
    generalContainer.addEvent('click',
      BasketScriptInitialization.showFormOnClick.bindWithEvent(generalContainer));
  },
  
  productListingScript: function() {
    var i;
    var addToBasketDivs = $$('.add_to_basket');
    for(i = 0; i < addToBasketDivs.length; i++) {
      new BasketFormHelper(addToBasketDivs[i]);
    }
          
    for(i = 0; i < addToBasketDivs.length; i++) {
      var addToBasketFullButton = new Element('input', 
        {'type': 'image', 'title': 'Add to basket', 'src': $('base_tag').getAttribute('href')+'images/elements/product_details_product_add/add_to_basket_medium_btn.gif', 'class': 'medium_add_to_basket_btn'});
      addToBasketFullButton.injectTop(addToBasketDivs[i]);
    }
          
    var generalContainer = $$('.white_container_bottom')[0];
    generalContainer.addEvent('click',
      BasketScriptInitialization.showFormOnClick.bindWithEvent(generalContainer));
  },
  
  showFormOnClick: function(event) {
    var e = new Event(event);
    if(e.target) {
      var target = $(e.target);
      if(target.hasClass('medium_add_to_basket_btn')) {
        target.setStyle('display', 'none');
        var form = target.getNext().getNext();
        form.setStyle('display', 'block');
        form.runOnSuccess = BasketScriptInitialization.hideFormAfterProductAdded;
      }
    }
  },
  
  hideFormAfterProductAdded: function(form) {
    form.setStyle('display', 'none');
    form.getPrevious().getPrevious().setStyle('display', 'block');
  },
  
  initialize: function() {
    if(location.pathname.search(/basket-contents$/i) > -1) {
      BasketScriptInitialization.basketContentsScript();
      
    } else if(location.pathname.search(/product/i) > -1) {
      BasketScriptInitialization.productDetailScript();
      
    } else {
      BasketScriptInitialization.productListingScript();
    }
  }
};

BasketScriptInitialization.initialize();