/******************************************************************
 * File : ui-cart.js
 * Author: Hemant Patel
 * Project: Modcloth2 Project
 *
 * The Cart View required to have an editable interface for allowing
 * user to edit the individual cart items and also bulk updates to
 * the edited items
 *
 * The editing part gets complicated because of multivariant values
 * for a particual item.
 *
 * The variant selection and filtering along with error display has
 * been converted into a plugin on variants.js now which is been used
 * for variants selection on product details page.
 *
 * We are going to plugin that into this interface for existing cart view
 * for item collection
 *
 * TODO Add more documentaion on the plugin for variant selection
 *
*/



;(function($){


     $.widget("ui.cart",{

         _init: function(){

             var self = this,
                 options  = this.options,
                 cartItems = this.cartItems = this.options.cartItems ,


             uiCart = this.uiCart = this.element

             uiCart.addClass("ui-cart " +
                             "ui-cart-contents " +
                             "ui-widget " )


             this.items = uiCart.find('.item')
             .addClass('ui-helper-clearfix')

             this.items = uiCart.find('.gift_certificate')
             .addClass('ui-helper-clearfix')

            var editItemLink = uiCart.find('a.edit_item_link')
            var updateItemLink = uiCart.find('a.update_item_link')
            var cancelUpdateLink = uiCart.find('a.cancel_update_link')
			      var pic = uiCart.find('.image a')
			      var carousel_image= $('#rec-carousel a')

             var outStockItems = uiCart.find('.ui-cart-item-out-of-stock').find('.item')
             .css('background-color','#ffcfcf');
             var discontinuedItems = uiCart.find('.ui-cart-item-discontinued').find('.item')
             .css('background-color','#ffcfcf');


             if(outStockItems.length > 0 ){
                 editItemLink.click(function(event){ self.edit(event)});
                 outStockItems.find('a.edit_item_link').unbind('click');

             }else if (discontinuedItems.length > 0){
                 editItemLink.click(function(event){ self.edit(event)});
                 discontinuedItems.find('a.edit_item_link').unbind('click');

             }else{
                 editItemLink.click(function(event){ self.edit(event)});
             }


             updateItemLink.bind('click', self.update);
             cancelUpdateLink.click(function(event){ self.cancel(event)});
			       pic.click(function(event){ self.cancel(event)});
			       carousel_image.click(function(event){ self.cancel(event)});


             this.currentItemToUpdate = null;

             this._isError = false
         },

         edit: function(event){
             var self = this

             var $el = $(event.target)

             if(($el.is('a.edit_item_link')) &&
                !($el.parents('div.item')
                  .is('.ui-cart-item-uneditable'))){


                 $el.nextAll('a:hidden').css({'display':'inline' })
                 $el.hide()

                 var item =  self.currentItemToUpdate = $el.parents('.item')
                 .addClass('ui-cart-item-editing')

                 var item_id = item.attr('id').split('_')[1]

                 item.find('.product')
                 .find('li:first')
                 .nextAll().remove()

                 item.find('.product')
                 .find('li:first').parent().append("<li></li>")

                 self.currentCartItem = self._getItemJSON(item_id)
                 var product_id = self.currentCartItem.variant.product_id

                 var initVariant = {
                     id: self.currentCartItem.variant.id,
                     in_stock: self.currentCartItem.variant.in_stock,
                     on_hand:  self.currentCartItem.variant.on_hand
                 }

                 this.variants = $('<div />').attr({'id' : 'item_variant_'+item_id})
                 .wrap('<li></li>')
                 .appendTo( item.find('.product').find('li:first').next())


                 $.getJSON('/storefront/products/json_product/'+product_id,
                      function(data){
                          self.variants.variants({
                              product: data,
                              withButtons:false,
                              variant: initVariant,
                              displayError: false,
                              inStockVariantSelected: function(event,data){

                                  $(this).parents('.item')
                                  .find("input[name=item[quantity]]")
                                  .removeAttr('disabled')

                                   $(this).parents('.item')
                                  .find("a.update_item_link")
                                  .bind('click', self.update)

                                  quantity = $(this).parents('.item')
                                  .find("input[name=item[quantity]]")
                                  .val()

                                  variant = $(this).variants("option", 'variant')

                                  self._updateItem(event, quantity, variant )

                              },
                              outOfStockVariantSelected: function(event, data){

                                  $(this).parents('.item')
                                  .find("input[name=item[quantity]]")
                                  .attr('disabled', true)

                                  $(this).parents('.item')
                                  .find("a.update_item_link")
                                  .unbind('click', self.update)

                              }
                          });

                          //setting height of the items containers
					/*
                          containerHeight = self.variants.parents('ul').outerHeight(true)
                          imgPadding = (containerHeight-70)/2
                          self.uiCart.find('.item').parent().css({height: containerHeight + 2})
                          self.uiCart.find('.item').css({height: containerHeight - 2})
                          self.uiCart.find('.item')
                          .find('.product, .image, .price, .quantity, .total, .action')
                          .css({height: containerHeight - 2})

                          self.uiCart.find('.item')
                          .find('.image').find('img')
                          .css({'padding-top': imgPadding})
					*/
                      });


                 var item_qty = this.currentCartItem.quantity

                 this.qtyField = $('<input type="text" name="item[quantity]"></input>')
                 .val(item_qty)
                 .css("width","40px")
                 .keypress(function(event){
                     if(event.charCode && (event.charCode < 48 || event.charCode > 57)){
                         event.preventDefault();
                     }

                 })
                 .change(function(ev){
                     variant = $('.ui-variants').variants("option", 'variant')

                     self._updateItem(ev, $(this).val(),variant)
                 })




                 item.find('.quantity').html('').append(this.qtyField)

                 self.uiCart.find('.item')
                 .filter(':not(div.ui-cart-item-editing)')
                 .addClass('ui-cart-item-uneditable')



             }


             return false;

         },

         _getItemJSON :function(id){
             var self = this
             for(index in self.cartItems){
                 if(self.cartItems[index].id == id)
                     return self.cartItems[index]
             }
             return false;
         },

         _updateItem: function(event, quantity, variant){
             var self = this

             if(quantity > variant.on_hand){
                 this._showQtyError(variant,quantity)

             }

             variants = []
             $.each(this.cartItems, function(index,cartItem){
                 if(cartItem.variant.id !=  self.currentCartItem.variant.id)
                     variants.push(String(cartItem.variant.id))
             });

             if(($.inArray(variant.id, variants) > -1)){

                 $(event.target).parents('.item').effect("highlight", {color:'#ffcfcf'}, 3000);
                 message =$("<li>Item has been selected already</li>").css('color','#FF0000')
                 self.variants.parent().append(message)
                 message.hide()

                 message.show("clip", { direction: "vertical" }, 1300)
                 .hide("clip", { direction: "vertical" }, 1300)

                  $(event.target).parents('.item')
                 .find("a.update_item_link")
                 .unbind('click', self.update)


             }else{
                  $(event.target).parents('.item')
                 .find("a.update_item_link")
                 .bind('click', self.update)
             }

             return false

         },


         _showQtyError: function(variant,qty){
             var self = this

             self.qtyField.val(variant.on_hand)
             clip = $("<div></div>")
             .addClass('ui-corner-all')
             .css({
                 margin: "3px 0",
                 border: '1px solid #FF0000',
                 height:'40px',
                 padding:'3px',
                 color: '#FF0000',
                 'background-color': "#eee"
             })
             .append("<p>Max Available</p>")
             .appendTo(self.qtyField.parent())
             .show("clip", { direction: "vertical" }, 1300)
             .hide("clip", { direction: "vertical" }, 1300)

             return false;
         },



         update: function(event){
             var self = this

             var $el = $(event.target)
             var quantity = $el.parents('.item')
             .find("input[name=item[quantity]]")
             .val()

             var variant = $('.ui-variants').variants("option", 'variant')


             var hiddenVariantField = $("<input type='hidden' name='item[variant_id]'>")
             hiddenVariantField.val(variant.id).appendTo($el.parents('.item > form'))
             $el.parents('.item > form').submit()

             return false;
         },

         cancel: function(event){

             var self = this
	           var $el = $(event.target)

	           if($el.is('a.cancel_update_link') || $el.parent().is('.image a') || $el.parent().is('#rec-carousel a')){

               if(!(null === self.currentItemToUpdate)){
                 $el = self.currentItemToUpdate.find('a.cancel_update_link')

	               $el.prev('a').hide()
	               $el.hide()

	               $el.parent()
	               .find('a:eq(0)')
	               .css({'display':'inline' })

	               var item = $el.parents('.item')
	               //revert back to the original item qty
	               var item_qty =  self.currentCartItem.quantity
	               item.find('.quantity').empty().html(item_qty)

	               var customValues = self.currentCartItem.variant.custom_values_custom_fields;
	               var variantValues = $('<li></li>');
	               var html = "";

	               for(key in customValues){

	                   html +=   "<li><span class='variant_text'>"+customValues[key].name+": </span>" +
	                       " <span class='variant_label'>"+customValues[key].value+"</span></li>"

	               }

	               variantValues.html(html)

	               item.find('.ui-variants')
	               .parent().replaceWith(html)

					       self.uiCart.find('.item')
	               .removeClass('ui-cart-item-editing ui-cart-item-uneditable')



			         }
					  }

             return false;
         }

     });

     $.extend($.ui.cart,{
         defaults: {
             cartItems: ''
         }
     });


})(jQuery);