$(function() {
  $( "#detail" ).dialog({
    autoOpen: false,
    width: 980,
    height: 555,
    modal: true
  });

  $( "#enquiry_form" ).dialog({
    autoOpen: false,
    width: 995,
    height: 600,
    modal: true,
    close: function(event, ui) {
      $('#contact_form_loader').append(
	$('#contact_form_wrapper').children()
      );
    }
  });

  /* clicking on the product image pops up the detail */
  $("div.product_image").click(function() {
    load_detail($(this).attr('data-cnt'), true);
  });
  /* hemingway exception */
  $("div#center_area.products.hemingway div.product_image").unbind("click");

  /* make the products wrapper scrollable */
  $('ul.products_wrapper').hoverscroll({
    width: 704,
    height: 487,
    arrows: true,
    fixedArrows: false
  });
  $('li.product').show();

  /* clicking on the add product in the category view pops the product in the basket */
  $('div.add_button img').click(function() {
    product_cnt = parseInt($(this).attr('data-cnt'));
    product_id = product_ids[product_cnt];

    add_to_basket(product_id);
  });

  /* show the enquiry list button if there is a basket */
  current_basket = $.cookie('basket');
  if (current_basket !== null) {
    $('#enquiry_list_button').show();
  }

  /* clicking the basket button shows the enquiry form */
  $('#enquiry_list_button').click(function() {
    load_enquiry_form();
  });

  /* enquiry submit button
     this is here because this must only be called once, not on each load of the dialog.
     Why does it work differently? The contact form has to load with the main page
     because of the recaptcha. So the form sits inside #contact_form_loader. When I open
     the dialog I move the form from #contact_form_loader into #contact_form_wrapper and
     on closing the form I move it back. I do that because there needs to be just the
     one recaptcha on the page for reloading of captcha images to work. Since the form
     is not recreated the click event below must only be bound once, and not on each
     open of the dialog.
  */
  $('#contact_form_loader .submit_enquiry_button').click(function() {
    submit_enquiry_form();
  });

});

function add_to_basket(product_id) {
  current_basket = $.cookie('basket');
  if (current_basket !== null) {
    $.cookie('basket', current_basket + ','+product_id);
  } else {
    $.cookie('basket', product_id);
  }
  $('#enquiry_list_button').show();
  alert('Product added to Enquiry List');
}

function load_enquiry_form() {
  var data = { products: $.cookie('basket') };
  $.post(product_enquiry_form_url, data, function(data) {
    $('#enquiry_form').html(data);

    /* remove those nasty script tags:
       http://groups.google.com/group/recaptcha/browse_thread/thread/bc2e4df076b1396f?pli=1
       */
    $('#contact_form_loader script').remove();

    /* pop in the contact form */
    $('#contact_form_wrapper').append(
      $('#contact_form_loader').children()
    );

    /* close button */
    $('#enquiry_form #close_dialog').click(function() {
      $('#enquiry_form').dialog("close");
    });


    $("#enquiry_form").dialog("open");
    $('#enquiry_form_dialog div.dialog_wrapper').jScrollPane();
  });
}

function submit_enquiry_form() {
  // validate the form
  form_data = $('#enquiry_form form').serializeArray();
  $.post(enquiry_submit_url, form_data, function(result) {
    if (result !== 'success') {
      alert(result);
    } else {
      $.cookie('basket', null);
      $('#enquiry_form').dialog("close");
    }
  });
}

function load_detail(product_cnt, show_dialog) {
  product_cnt = parseInt(product_cnt);
  product_id = product_ids[product_cnt];
  $.get(product_detail_url+product_id, null, function(data) {
    $('#detail').html(data);

    /* add to basket button */
    $('#detail div.add_button img').click(function() {
      add_to_basket(parseInt($(this).attr('data-product-id')));
    });

    /* hover bars -----------------------------  */
    if (product_cnt > 0) {
      $('#detail #left_bar').attr('data-product-id', product_ids[product_cnt-1]);
      $('#detail #left_bar').hover(function() {
        $('#detail #left_arrow').css('display', 'block');
        $(this).addClass('hover');
      }, function() {
        $('#detail #left_arrow').css('display', 'none');
        $(this).removeClass('hover');
      });

      $('#detail #left_bar').click(function() {
        load_detail(product_cnt-1, false);
      });
    } else {
      $('#detail #left_bar').css('display', 'none');
    }
    if (typeof product_ids[product_cnt+1] !== "undefined") {
      $('#detail #right_bar').attr('data-product-id', product_ids[product_cnt+1]);

      $('#detail #right_bar').hover(function() {
        $('#detail #right_arrow').css('display', 'block');
        $(this).addClass('hover');
      }, function() {
        $('#detail #right_arrow').css('display', 'none');
        $(this).removeClass('hover');
      });

      $('#detail #right_bar').click(function() {
        load_detail(product_cnt+1, false);
      });

    } else {
      $('#detail #right_bar').css('display', 'none');
    }

    /* close button */
    $('#detail #close_dialog').click(function() {
      $('#detail').dialog("close");
    });

    if (show_dialog) { $("#detail").dialog("open"); }
  });
}