var pages = {};

function print_pages_in_product(p) {
  var html = "";
  if (p.page_links instanceof Array) {
    $.each(pages, function(i, page) {
      html += "<div class='product_page'><label><input class='pp_checkbox' type='checkbox' ";
      if (p.page_links.indexOf(page.id) != -1)
        html += " checked ";
      html += "name='product_pages[]' value='"+page.id+"'>"+page.name+"</label></div>";
    });
  } else
  $.each(pages, function(i, page) {
    html += "<div class='product_page'><label><input class='pp_checkbox' type='checkbox' ";
    html += "name='product_pages[]' value='"+page.id+"'>"+page.name+"</label></div>";
  });
  return html;
}

function add_page(id, name, content, nav_loc) {

  var page = {
    id: id,
    name: decodeURIComponent(name),
    content: decodeURIComponent(content),
    nav_loc: nav_loc
  };
  pages["page_"+id] = page;
}

function make_page_html(p) {
  var html = 
  "<li>"+
    "<input type=text name=page_"+p.id+"_name class='item_name' id='item_"+p.id+"_name' value=\""+p.name.replace(/"/g, "&quot;")+"\" placeholder='Type page name here'>" +
    "<a class='edit_link_page' id='edit_"+p.id+"_page'></a>"+
    "<a class='delete_link_page' id='delete_"+p.id+"_page'></a>"+
    "<input type=hidden value=\""+p.content.replace(/"/g, "&quot;")+"\" id='item_"+p.id+"_content' name='page_"+p.id+"_content'>"+
    "</li>";
  return html;
}

function print_pages() {
  $.each(pages, function(i, p) {
    html = make_page_html(p);

    $('#column_'+p.nav_loc).append(html);

  }); 
}

function add_to_update(id) {
  //alert(id + " " + max_existing_id);
  if (!isNaN(id) && id <= max_existing_id ) {
    if ($('#to_update').val().search(","+id+",") == -1)
      $('#to_update').val($('#to_update').val() + id.toString(10)+",")
  }
}

$.validator.addMethod(
  "price",
  function(value, element) {
    var re = new RegExp(/^(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/);
    return re.test(value);
  },
  "Example: 1,999.99"
);

function dispatch_products(selector) {
  var products_json = JSON.stringify(products).replace(/&/g, "__AMP__").replace(/'/g, "__APS__");;
  var html = "<input type='hidden' name='products_json' value='"+products_json+"'>";
  $(selector).append(html);
}

$(function($) {
  form_parm1 = "missing";
  if ($('#form_parm1').length > 0)
    form_parm1 = $('#form_parm1').val();

  if ($('#max_id').length > 0) {
    max_id = parseInt($('#max_id').val());
    max_existing_id = parseInt($('#max_existing_id').val());
  }

  $(document).on('click','.upload_product_image_dispatch, #product_image_modal',function() {
    var id = parseInt($(this).closest('.product_image_modal_wrapper').find('.upload_product_image_dispatch').attr('id').substring(13));
    $('#item_'+id+'_image_upload').click();
  });

  /*uploading product image*/
  $(document).on('change','.upload_product_image',function() {
    var file = $(this).val();
    var id = parseInt($(this).attr('id').substring(5));
    //alert(id);
    if (isNaN(id)) {
      alert("Sorry, an unknown error has occurred");
    } else {
      if (file.length) {
        if (file.search(/\.jpg|.png|.gif/i) != file.length-4)
          alert("Image extension has to be .jpg, .png, or .gif");
        else {
          var options = {
            //target: '#logo',
            target: '#product_image_modal',
            success: function(responseText, statusText, xhr, $form) { 
              $('body').css({cursor: 'default'});
            },
            async: false,
            forceSync: true
          }

          $(this).wrap('<form enctype="multipart/form-data" action="pageprod_ajax.cgi?ajax=upload_product_image&product_id='+id+'&form_parm1='+form_parm1+'" method=post></form>');
          $('body').css({cursor: 'progress'});
          $(this).parent().ajaxSubmit(options);

          $(this).unwrap();
        }
      }
    }
  });

  $(document).on('change','.item_name, .product_price, .upload_product_image, .nav_loc_radio',function() {
    var id = parseInt($(this).attr('id').substring(5));

    add_to_update(id);
  });

  /*$(document).on('click','.pp_checkbox',function() {
    var id = parseInt($(this).attr('name').substring(8));
    //add_to_update(id);
    });*/

    $(document).on('click','.delete_link_page',function() {
      var id = parseInt($(this).attr('id').substring(7));
      if (!isNaN(id) && id <= max_existing_id )
        $('#to_delete').val($('#to_delete').val()+id.toString(10)+",");
      delete pages['page_'+id];
      $(this).closest('li').remove();
    });

    $(document).on('click','.edit_link_page',function () {
      var id = parseInt($(this).attr('id').substring(5));
      pages["page_"+id].name = $('#item_'+id+'_name').val();
      var p = pages["page_"+id];

      var html = "";

      html += "<h1 class='page_name'>Create a page</h1>";
      html += "<form id='page_modal_form'>";
      html += "<input type='hidden' name='page_id' id='page_id' value='"+p.id+"'>";

      html += "<div class='config_table'><div class='section'>";
      html += "<div class='left_overlay'></div><div class='right_overlay'></div>";

      html += "<div class='config_item'><div class='name'>Page name</div><div class='value'><input type='text' class='page_name_modal' name='page_name_modal' value=\""+p.name.replace(/"/g, "&quot;")+"\"></div><div class='unfloat'></div></div>";
      html += "<div class='config_item'><div class='name'>Text on page</div><div class='value'><textarea class='page_content_modal'>"+p.content.replace(/<br>/g, "\n")+"</textarea></div><div class='unfloat'></div></div>";
      //html += "<div class='config_item'><div class='name'>Products on this page</div><div class='value'>You can add products in \"Your products\" step of the wizard</div><div class='unfloat'></div></div>";
      html += "</div></div>";
      html += "</form>";

      html += "<ul class='button_block_horizontal'><li><input type='button' id='save_page' class='button' value='Save Changes'></li><li><input type='button' id='button_cancel' class='button cancel' value='Cancel'></li></ul>";

      $.modal(html, {
        closeHTML: "",
        overlayClose:false,
        autoPosition: true,
        autoResize: true,
        minWidth: "800px",
        containerId:"pages_modal",
        onShow: function (dialog) { $('body').css({overflow:'hidden'});  if (window.innerWidth < 800) { $('.content, .content_wide, #footer').css({'display':'none'}); }},
        onClose: function(dialog) { $.modal.close(); $('body').css({overflow:'auto'}); $('.content, .content_wide, #footer').css({'display':'block'});}
      });

      $( "form#page_modal_form" ).validate({
        rules: {
          page_name_modal: {
            required: true
          }
        }
      });

    });

    $(document).on('click','#save_page',function() {
      if (!$('#page_modal_form').valid())
        return false;

      var id = parseInt($('#page_id').val());
      //alert(id);
      add_to_update(id);

      pages["page_"+id].name = $('.page_name_modal').val();
      pages["page_"+id].content = $('.page_content_modal').val();

      $('#item_'+id+'_name').val(pages["page_"+id].name);
      $('#item_'+id+'_content').val(pages["page_"+id].content);

      $.modal.close();
    });

    $(document).on('click','#pages_modal #button_cancel',function() {
      $.modal.close();
    });

    $(document).on('click','.p_name, #add_product, .p_img',function() {
      //$(document).on('click','.basic_product',function() {

        var need_info = 0;
        //var id = parseInt($(this).attr('id').substring(8));
        var id = parseInt($(this).closest('.p').find('.pid').val());
        var index = locate_product(id);
        //console.log("editing pid "+id+" index "+index);
        var prod_count = products.length;
        //var src = "wizard.cgi?modal=edit_product&id="+id;
        if (!isNaN(id)) {
          if (product_limit != 0 && prod_count > product_limit) {
            alert('Your store is limited to '+product_limit+' products, but you have '+prod_count+'. Please delete some products before editing existing ones.');
            return;
          }

          var p = products[index];

          if (!p.hasOwnProperty("description")) { //description
            $('body').css({'cursor':'wait'});    
            need_info = 1;
            p.page_links = [];
            p.description = "";
          } 

          //alert("loading "+id);

        } else {

          if (product_limit != 0 && prod_count >= product_limit) {
            alert('Your store is limited to '+product_limit+' products. Please delete some products before adding new ones.');
            return;
          }

          var p = {
            id: max_id+1,
            page_links: [],
            description: "",
            f0: [0,""],
            f1: [0,""],
            f20: [1, "no-image.png"],
            f19: [0,""] //sku
          };
        }

        var name = p.f0[1].replace(/"/g, "&quot;");
        var price = p.f1[1];
        var sku = p.f19[1].replace(/"/g, "&quot;");
        if (!p.hasOwnProperty("image")) {
          var image_paths = get_image_paths(p.f20[1], false,false);
          p.image_thumb = image_paths[0];
          p.image = p.f20[1];//image_paths[1];
        }

        var image = p.image;
        var image_thumb = p.image_thumb; 
        var description = p.description.replace(/<br>/g, "\n");

        var html =  "";

        html += "<h1 class='page_name'>Create a product</h1>";
        html += "<form id='product_modal_form'>";
        html += "<input type='hidden' name='product_id' id='product_id' value='"+p.id+"'>";
        html += "<input type='hidden' id='product_sku' value='"+sku+"'>";

        html += "<div class='config_table'><div class='section'>";
        html += "<div class='left_overlay'></div><div class='right_overlay'></div>";

        html += "<div class='config_item'><div class='name'>Product name</div><div class='value'><input type='text' class='product_name_modal' name='product_name_modal' value=\""+name+"\"></div><div class='unfloat'></div></div>";

        html += "<div class='config_item'><div class='name'>Price</div><div class='value'>"+currency_symbol+"<input type='text' class='product_price_modal' name='product_price_modal' value='"+price+"'></div><div class='unfloat'></div></div>";

        html += "<div class='config_item'><div class='name'>Product image</div><div class='value'>";
        html += "<div class='product_image_modal_wrapper'><span id='product_image_modal'><img src='"+image_thumb+"'><input type=hidden value='"+image+"' name='new_image_name_"+p.id+"'></span>";
        html += "<br><a class='upload_product_image_dispatch' id='upi_dispatch_"+p.id+"'>Choose image</a>";
        html += "<input name='upload_product_image_"+p.id+"' id='item_"+p.id+"_image_upload' class='upload_product_image' type='file'>"
        html += "</div></div><div class='unfloat'></div></div>";

        html += "<div class='config_item'><div class='name'>Product description</div><div class='value'><textarea class='product_description_modal'>"+description+"</textarea></div><div class='unfloat'></div></div>";

        var express = (product_type == 3);
        if ((pathway == 'standard') && !express) {
          html += "<div class='config_item'><div class='name'>Product is on these pages</div><div class='value' id='modal_pages_list'>";
          html += print_pages_in_product(p);
          html += "</div><div class='unfloat'></div></div>";
        }

        html += "</div></div>";
        html += "</form>";

        html += "<ul class='button_block_horizontal'><li><input type='button' id='save_product' class='button' value='Save Changes'></li><li><input type='button' id='button_cancel' class='button cancel' value='Cancel'></li></ul>";

        //$.modal('<iframe src="' + src + '" id=modal>', {
          var blocking = 0;
          $.modal(html, {
            closeHTML: "",
            minWidth: "800px",
            overlayClose:false,
            autoPosition: true,
            autoResize: true,
            containerId: "products_modal",
            onShow: function (dialog) { if (window.innerWidth < 800) { $('body').css({overflow:'hidden'}); $('.content, .content_wide, #footer').css({'display':'none'}); blocking = 1; }},
            onClose: function(dialog) { $.modal.close(); if (blocking) { $('body').css({overflow:'auto'}); $('.content, .content_wide, #footer').css({'display':'block'}); blocking = 0; }}

          });

          if (need_info) {
            $.ajax({
              async: true,
              data: {"ajax":"get_wizard_product_info", product_id:id, form_parm1:form_parm1},
              url: "pageprod_ajax.cgi",
              success: 
              function(data) {
                //error handling here
                //alert(data);
                //console.log(data);
                //var spl = data.search("^^^");
                var json = JSON.parse(data);

                p.page_links = json[0];//JSON.parse(data.substr(0,spl));//[].concat(data.substr(0,spl));
                p.description = json[1];//data.substr(spl+3);

                $('.product_description_modal').html(p.description.replace(/<br>/g, "\n"));

                if ((pathway == 'standard') && !express) {
                  var html = print_pages_in_product(p);
                  $('#modal_pages_list').html(html);
                }

                $('body').css({'cursor':'default'});

              }
            });
          } else {
            $('body').css({'cursor':'default'});
          }

          $( "form#product_modal_form" ).validate({
            rules: {
              product_name_modal: {
                required: true
              },
              product_price_modal: {
                required: true,
                price: true
              }
            },
            errorPlacement: function(error, element) {
              error.appendTo(element.parent());
            }
          });

    });

    $(document).on('click','#save_product',function() {
      if (!$('#product_modal_form').valid())
        return false;

      var id = parseInt($('#product_id').val());

      var page_links = [];
      $(".pp_checkbox:checked").each(function()
      {
        page_links.push(parseInt($(this).val()));
      });
      var image = $('#product_image_modal').find('input').val();      
      var p = {
        id: id,
        f0: [0,$('.product_name_modal').val()],
        f1: [0,$('.product_price_modal').val()],
        description: $('.product_description_modal').val(),
        image_thumb: $('#product_image_modal').find('img').attr('src'),
        image: $('#product_image_modal').find('input').val(),
        f20:[1,$('#product_image_modal').find('input').val(),""],
        f19: [0,$('#product_sku').val()],
        name: $('.product_name_modal').val(),
        price: $('.product_price_modal').val(),
        page_links: page_links
      };

      if ($('#product_image_modal').find('input').length == 0)
        p.image = "no-image.png";

      var new_product = false;
      var index;
      if (id == max_id + 1) {
        max_id++;
        new_product = true;
        index = products.length;
        products.push(p);
      } else {
        index = locate_product(id);
        products[index] = p;
      }

      var html = make_product_html(products[index]);
      if (new_product) {
        $('#products').prepend(html);
      } else {
        //$('#basic_product_'+id).replaceWith(html);
        $('.pid[value='+id+']').closest('.p').replaceWith(html);
      }

      $.modal.close();

      var products_json = JSON.stringify(products[index]).replace(/&/g, "__AMP__").replace(/'/g, "__APS__");;
      $.ajax({
        async: true,
        type: "POST",
        data: {"ajax":"save_wizard_product", product_id:id, products_json:products_json, form_parm1:form_parm1},//"ajax=save_product&product_id="+id+"&products_json="+products_json,
        url: "pageprod_ajax.cgi",
        success: 
        function(data) {
          //error handling here
          //flip_publish();
        }
      });

    });

});