cart.js

window.ls = window.localStorage;


(function(a,d){
	
	$_ = jQuery; 
	var dialog = null;   

	var cart= {
		 items : [],
		 total : 0,
		 qty : 0
	};

	var CART = function(){

		 this.ini = function(){
		    onListeners();

		    if(ls.items)
		    {	
		    	cart = JSON.parse(ls.items);		    	
		    	update();
		    	$_("#cart-widget").show();
		    }

		    dialog = new confirmation("chocolate");


		 }


		 var onListeners = function(){

		 	 $_("[data-add-tocart]").off("click").live("click", add);
		 	 $_("[data-remove-tocart]").off("click").live("click", remove);
		 	 $_("[data-checkout]").off("click").live("click", checkout);

		 }

		 var confirmation = function(theme){

		 var theme = (theme) ? "class='" + theme + "'"  : "";		 

		 var confirm = '<div id="confirmation" ' + theme + '>'
	                 + '<div class="content" ></div>'
	                 + '<div class="buttons" "></div>'
	                 + '</div>';


	        $_("body").append(confirm);

		 	 this.show = function(msg, opts_){

		 	 	// opts {}
		 	// cancel true | false
		 	// customButtons [ { "text" : "String", type" : "String (cancel | accept)"" , "callback" : function(){} } ]
		 	// onAccept Function
		 	// onCancel Function
		 	// autohide
		 	// onlyCustom
		 	 	 

		 	 	  var opts = {
		 	 	  	 cancel : true,
		 	 	  	 autohide : true,		 	 	  	 
		 	 	  	 onlyCustom : false,
		 	 	  	 onAccept : {},
		 	 	  	 onCancel : {},
		 	 	  	 beforeShow : {},
		 	 	  	 beforeHide : {},
		 	 	  	 AfterShow : {},
		 	 	  	 AfterHide  : {}
		 	 	  }


		 	 	  if(opts_ instanceof Object)
		 	 	  	  $_.extend(opts, opts_);


		 	 	  	console.log(opts);



		 	 	  if(opts instanceof Object)
		 	 	  {

		 	 	  	var buttons = "";

		 	 	     buttons += "<span class='button-confirmation' data-callback='false' data-accept>Aceptar</span>";


		 	 	  	 if(opts.cancel)		 	 	  	 	
		 	 	  	 	buttons += "<span class='button-confirmation' data-callback='false' data-cancel>Cancelar</span>";

		 	 	  	 if(opts.customButtons)
		 	 	  	 	for(x in opts.customButtons)
		 	 	  	 	 if(opts.customButtons[x].callback)
		 	 	  	 		buttons += "<span class='button-confirmation' data-callback='"+opts.customButtons[x].callback+"' data-"+opts.customButtons[x].type+">" + opts.customButtons[x].text + "</span>";
		 	 	  	 	 else
		 	 	  	 		buttons += "<span class='button-confirmation' data-callback='false' data-"+opts.customButtons[x].type+">" + opts.customButtons[x].text + "</span>";		 	 	  	 	 	
		 	 	  }



		 	      $_("[data-accept]").die("click").live("click", function(e){

		 	      			e.preventDefault();
		 	      	        hidde(opts);
		 	      			
		 	      			return return_(opts);	

		 	      });

		 	      $_("[data-cancel]").die("click").live("click", function(e){

		 	      		  e.preventDefault();
		 	      	 	
		 	      	 	  hidde(opts);
		 	      			
						  return return_(opts, true);		 	      			

		 	      });

		 	      $_("#confirmation .content")
		 	      .html(msg);		 	      
		 	     
		 	      $_("#confirmation .buttons")
		 	      .html(buttons);

		 	       if(opts.beforeShow instanceof Function)
		 	 	      opts.beforeShow();	

		 	 	  if(opts.AfterShow instanceof Function)
		 	      $_("#confirmation").show(opts.AfterShow);		 	  
		 	      else
		 	      $_("#confirmation").show();		 	  


		 	 }

		 	 var return_ = function(opts, cancel){


		 	 				var ret = (cancel) ? false : true;

		 	 				if(ret)
		 	 	            if(opts.onAccept instanceof Function)
		 	      				  {opts.onAccept(ret); return ret;}
		 	      			else
		 	      				  {opts.onCancel(ret); return ret;}



		 	      		    if(callback = $_(this).attr("callback"))
		 	      		    	{eval(callback + "("+ret+")"); return ret;}
		 	      

		 	      		    return ret;
		 	 }

		 	 var hidde = function(opts){
		 	 	    if(opts.beforeHide instanceof Function)
		 	 	      opts.beforeHide();		 	 	    
		 	 	    if(opts.autohide)
		 	 	     if(opts.AfterHide instanceof Function)
		 	      	 $_("#confirmation").hide(opts.AfterHide);
		 	      	 else
		 	      	 $_("#confirmation").hide();

		 	 }

		 	 this.hide = function(callback){

		 	 	   $_("#confirmation .content").html("");
		 	 	   $_("#confirmation .buttons").html("");
		 	 	   $_("#confirmation").hide();
		 	 	   
		 	 	   if(callback instanceof Function)
		 	 	     callback(true);
		 	 }



		 }

		 var add = function(){

		 	var style = "border:1px solid #ccc;"
		 			  + "border-radius:99em;"
		 			  + "text-align:center;";
 
            var msg = "<span style='display:block'><b>El producto se ve genial</b></span> <br> <span style='display:block; text-align:center'>Cantidad <input type='text' value='1' style='"+style+"' data-cart-qty></span>";

            var onAccept = function(){ getImage(addItem); }            
            var AfterShow = function(){ $_("[data-cart-qty]").focus() }            

		 	dialog.show(msg, {onAccept : onAccept, AfterShow : AfterShow});		 	

		 }

		 var addItem = function(photo){
	

		    if(ls.choco_bar != "null")
		      {		      

		      	var id = new Date().getTime();

		      	 var item = { 
		      	 	   "id" : id
		      	 	 , "choco" : {  
		      	 	  	 "choco" : ls.choco_bar, 
		      	 	  	 "size"  : {x : ls.sizeX , y : ls.sizeY},
		      	 	  	 "price" : parseInt(ls.price)
		      	 	  	  } 
		      	 	 , "pic" : photo,
		      	 	   "qty" : parseInt($_("[data-cart-qty]").val())
		      	   };
		      	 	
		      	 cart.items.push(item);
		      	 
		      	 cart.qty+= item.qty;
		      	 cart.total += parseInt(ls.price) * item.qty;

		      	 ls.removeItem("choco_bar");		      	 
		      	 ls.removeItem("flavor");
		      	 ls.removeItem("sizeX");
		      	 ls.removeItem("sizeY");
		      	 ls.removeItem("price");
		      	 $_("#photo").remove();

		      	 if(window.choco_bar)
		      	  window.choco_bar = null;


		      	update();
				$_("#cart-widget").show();
		      	 	

		      }	       	 


		 }

		 var getImage = function(callback){
		 	html2canvas(document.getElementById("canvas-image"), {
  			onrendered: function(canvas) {
    			canvas.id = "photo";
    			document.body.appendChild(canvas);
    			if(callback instanceof Function)
    				callback(canvas.toDataURL());
             }
			});	
		 }

		 var remove = function(e){
		 	 e.preventDefault();

		 	 	  var id = $_(this).attr("data-id");
		 	 	  $_(this).parents("tr:first").remove();
		 	 	  item = find(id);
		 	 	  if(item > 0){
		 	 	  alert(item);		 	 	  
		 	 	  cart.qty-= cart.items[item].qty;		 	 	  
		 	 	  cart.total -= (cart.items[item].choco.price * cart.items[item].qty);
		 	 	  cart.items.splice(item,1);
		 	 	  update();
		 	 	   }
		 	 

		 }

		 var find = function(id){
		 	
		 	  for(x = 0; x < cart.items.length; x++){		 	    		 	    
		 	  	if(id === cart.items[x].id)
		 	  		return x;
		 	    }

		 	  	return -1;
		 }

		 var update = function(){
		      	ls.items = JSON.stringify(cart);		 		
		 		$_("[data-cart-sqty]").text(cart.qty);
		      	$_("[data-cart-stot]").text("$" + cart.total);
		      	$_("[data-cart-sutot]").text("$" + cart.total);
		      	$_("[data-cart-ttot]").text("$" + (cart.total + ( cart.total * 0.16)));
		 }

		 var get = function(){

		 }

		 var total = function(){

		 }

		 var checkout = function(e){

		 	e.preventDefault();
		 	var msg = "<b style='display:block'>Revisa tu compra antes de pagar</b><br>"
             		+ "<table style='argin: 0 auto;width: 100%;'>"
             		+ "<thead><tr><td>Producto</td><td>Imagen</td><td>Cant.</td><td>Precio</td><td>Total</td></tr></thead>"
             		+ "<tbody>";             		

         var length = cart.items.length;

         for(x=0; x<length;x++){  

             	var item = cart.items[x];           	
             	var x = item.choco.size.x;
             	var y = item.choco.size.y;   
             	var price = item.choco.price; 
             	var id = item.id;         	
             	msg += "<tr class='item'><td>Barra perso. de " + x + " x " + y + "</td> <td><a href='preview.php?pic="+item.pic+"' target='_blank'><img src='" + item.pic + "' width='40px' style='border-radius:3px' alt=''></a></td><td>"+item.qty+"</td><td>$"+price+"</td><td>$"+(price * item.qty)+"</td><td><a href='#' style='font-size: 14px;text-decoration: none;color: yellow;font-weight: bold' data-id='"+id+"' data-remove-tocart>&times</a></td></tr>";                             
               }

             msg += "</tbody>"
             	  + "<tfoot>"
             	  + "<tr ><td colspan='3'></td><td>Subtotal</td><td data-cart-sutot>$" + cart.total + "</td></tr>"
             	  + "<tr ><td colspan='3'></td><td>IVA</td><td>BASE 16%</td></tr>"             	  
             	  + "<tr ><td colspan='3'></td><td>Total</td><td data-cart-ttot>$" + (cart.total + (cart.total * 0.16)) + "</td></tr>"
             	  + "</tfoot>";

            var onAccept = function(){ var json = JSON.stringify(cart); /* document.location='PAGINA_QUE_PROCESA_LA_COMPRA.php?c=' + json;*/ }                              

		 	dialog.show(msg, {onAccept : onAccept});		

		 }
	}

	a.CART = new CART;	

})(window);