// TODO this is crying for some LowPro

// ProductPopup = $.klass({
//  initialize: function(arg) {
//    alert('ive just been attached with the arg ' + arg);
//  },
//  onclick: function() {
//    alert('ive been clicked');
//  }
// }) 

$(function () {
  
                                 
  // category navigation
  
  $('#categories').accordion({ clearStyle: true, collapsible: true });
  
  $('#categories li').click(function() {
    $(this).spin();
      $('#categories a').removeClass('active');
      $(this).find('a:first')
        .addClass('active');
  });
  
  $('#categories li a').click(function() {
    $('#products').stop().load($(this).attr('href'), function () {
      showHideImageRadio();
      $('.spinner').hide();
    });
  });
  
  $('a.checkout').click(function () {
    $(this).spin();
  });
  

  // category navigation 
  $('.category-link').live('click', function(e) {
    $(this).spin();
    
    $('#products').load($(this).attr('href'), function () {
      
      showHideImageRadio();    
      $('.spinner').hide();
    });
           
    return false;
  });
  

  // product navigation
  $('.product-link').live('click', function(e) {
    productPopUp(this, e);
    
    return false;
  });
  
  $('#all-products-link').click(function() {
    $(this).spin();
    
    $('#products').load($(this).attr('href'), function () {
      $('.spinner').hide();
    });
    
    return false;
  });
  
  $('.special-link').live('click', function(e) {
    productPopUp(this, e);
    if ($(this).html() == '<span>add to cart</span>') {
      $(this).html('<span>remove</span>');
    } else {
      $(this).html('<span>add to cart</span>');
    }
    
    return false;
  });
  
  $('.basket-item').live('click', function(e) {
    productPopUp(this, e);
    
    return false;
  });
  
  $('.close').live('click', function() {
    $('#product-popup').fadeOut();
    
    return false;
  });
  
  // product sorter
  $('#show-images-radio').live('click', function() {
    $(this).spin();
    

    var ICON_VIEW = '0';    
    $.cookie('view_style', ICON_VIEW); 
    
    categoryId = $('#category-id').val();
    url = '/categories/' + categoryId + '/products';
    
    if ( $('#products > h1').html() == 'All Products') {
      url = '/products'
    }
    
    $('#products').load(url, function () {
      showHideImageRadio(); 
      
      $('.spinner').hide();
    });
    return false;
  });
  
  $('#hide-images-radio').live('click', function() {
    $(this).spin();
    
    
    var LIST_VIEW = '1';
    $.cookie('view_style', LIST_VIEW);
          
    categoryId = $('#category-id').val();
    url = '/categories/' + categoryId + '/products';
    
    if ( $('#products > h1').html() == 'All Products') {
      url = '/products'
    }
        
    $('#products').load(url, function () { 
      showHideImageRadio();   
      
      $('.spinner').hide();
    });  
    return false;
  });
  
  // list view 
  $('.prod-listview input.txt').focus(function() {
    this.select();
  });
  
  $('.prod-listview .add-to-cart-btn').live('click', function(e) { // add to cart
    $(this).spin();
      
    formArray = $(this).parents('.add-to-cart-form').serializeArray();

    var element = this;
    $('#cart').load('/baskets/1/basket_items/', formArray, function() {
      $('#cart .detail').slideDown();
      $('#cart #collapsed-cart').hide();  
      $(element).parents('.add-to-cart-form')
                .find('.add-button')
                .hide();
      $(element).parents('.add-to-cart-form')
                .find('.update-or-remove')
                .show();
      $('.spinner').hide();
    });
    
    return false;
  });  
  
  $('.prod-listview .update-cart-btn').live('click', function(e) {  // update
    $(this).spin();
   
    form = $(this).parents('.add-to-cart-form');
    var productId = $(this).parents('.add-to-cart-form')
                           .find('input:first')
                           .val();
                   
    $.ajax({
      type: 'put',
      url: '/baskets/1/basket_items/' + productId,
      data: form.serializeArray(),
      success: function(result) {
        $('#cart').html(result);
        openCart(); 
        $('.spinner').hide();
      }
    });
       
    return false; 
  });
  
  $('.prod-listview .remove-cart-btn').live('click', function(e) {  // remove
    $(this).spin();
   
    form = $(this).parents('.add-to-cart-form').serializeArray();
    form.push({ name: '_method', value: 'delete' });
    
    var productId = $(this).parents('.add-to-cart-form')
                           .find('input:first')
                           .val();
    var element = this;
    $('#cart').load('/baskets/1/basket_items/' + productId, form, function() {
      openCart();
      $(element).parents('.add-to-cart-form')
                .find('.update-or-remove')
                .hide();
      $(element).parents('.add-to-cart-form')
                .find('.add-button')
                .show();
      $('.spinner').hide();
    });
      
    return false;
  });
  
  // product popup 
  $('.prod-popup input.txt').live('focus', function() {
    this.select();
  });
  
  $('.prod-popup .add-to-cart-btn').live('click', function(e) {    // add to cart
    $(this).spin();
      
    formArray = $(this).parents('.add-to-cart-form').serializeArray();

    var element = $(this);
    $('#cart').load('/baskets/1/basket_items/', formArray, function() {
      openCart();
      
      // add checkmark, product is added
      productId = $(element).parents('.add-to-cart-form')
                            .find('input:first')
                            .val();
      $('#product-span-' + productId).addClass('in-cart');

      $('#product-popup').fadeOut();
      $('.spinner').hide();
    });
    
    return false;
  });
  
  $('.prod-popup .update-cart-btn').live('click', function(e) {  // update
    $(this).spin();
   
    form = $(this).parents('.add-to-cart-form');
    var productId = $(this).parents('.add-to-cart-form')
                           .find('input:first')
                           .val();
                           
    $.ajax({
      type: 'put',
      url: '/baskets/1/basket_items/' + productId,
      data: form.serializeArray(),
      success: function(result) {
        $('#cart').html(result);
        openCart();
        $('#product-popup').fadeOut();
        $('.spinner').hide();
      }
    });
      
    return false; 
  });
  
  $('.prod-popup .remove-cart-btn').live('click', function(e) {  // remove
    $(this).spin();
   
    form = $(this).parents('.add-to-cart-form').serializeArray();
    form.push({ name: '_method', value: 'delete' });
    
    var productId = $(this).parents('.add-to-cart-form')
                           .find('input:first')
                           .val();

    $('#cart').load('/baskets/1/basket_items/' + productId, form, function() {
      openCart();
      // remove checkmark, product is added
      $('#product-span-' + productId).removeClass('in-cart');
      
      $('#product-popup').fadeOut();
      $('.spinner').hide();
    });
      
    return false; 
  });
  
});


// set the image hider to show or hide 
function showHideImageRadio() { 
  var ICON_VIEW = '0';  
  var LIST_VIEW = '1'; 
  var viewStyle = $.cookie('view_style');

  if ($('input:radio[name="show-hide-images"]').size > 0) {
    $('input:radio[name="show-hide-images"]')[viewStyle].checked = true;
  }
}

// display the product popup in the correct position
function displayProductPopUp(event) {
	x = event.pageX;
	y = event.pageY - 250;
	if (y < 0) {
	  y = 100;
	}
	max = $(document).width();
	if (x+275 > max) {   // make sure we don't go out of the screen view
		x = x-200;
	}
	x = x-75;
	$('#product-popup').css('position', 'absolute')
	                   .css('top', y + "px")
                     .css('left', x + "px")
                     .css('z-index', 1000)
                     .fadeIn();
  
  return false;
}

// prepare to show the popup 
function productPopUp(element, event) {
  $(element).spin();
  $('#product-popup').fadeOut();

  // parse product_id from hidden field
  product_id = $(element).prev('input[name="id"]').serializeArray();
  product_id = product_id[0].value;

  var e = event;
  $('#product-popup').stop().load('/categories/6/products/' + product_id, null, function() {
    displayProductPopUp(e);
    $('.spinner').hide();
  });
  
  return false;
}