jQuery.noConflict()
jQuery(function ($) {
  if ($("#step-menu li").size() !== $("#step-section .step").size()) {
    throw new Error("Steps and menu items differ in number")
  }

  var steps = $("#step-menu li").map(function (index) {
    var content = $("#step-section .step").get(index)
    var menu_item = $("#step-menu li").get(index)

    var step = {
      show: function () {
        hide_all_steps()
        $(menu_item).addClass("current")
        $(content).addClass("current")
        current_step_index = index
      },
      hide: function () {
        $(menu_item).removeClass("current");
        $(content).removeClass("current");
      }
    }

    $(menu_item).find("span").click(function () {
      step.show()
    })

    return step
  })

  var current_step_index

  function hide_all_steps() {
    $.each(steps, function () {
      this.hide()
    })
  }

  $(".continue-button-section button").click(function () {
    steps[current_step_index + 1].show()
  })

  steps[0].show()

  ;(function () {
    function disable(root) {
      root.closest(".choice").addClass("disabled")
      root.find("input, select").attr("disabled", "disabled")
    }

    function enable(root) {
      root.closest(".choice").removeClass("disabled")
      root.find("input, select").removeAttr("disabled")
    }
    
    $(".choice .title").click(function () {
      $(this).closest(".choice").find("input[type=radio]").click()
    })

    $("input[name=search-type]").change(function () {
      disable($("#search-choice .main-column"))
      disable($("#seller-choice .main-column"))

      if ($("#search-choice input[type=radio]:checked").size() > 0) {
        enable($("#search-choice .main-column"))
      } else {
        enable($("#seller-choice .main-column"))
      }

      update_preview()
    })

    disable($("#seller-choice .main-column"))

    $("#search-choice-field").change(update_preview)

    $("#seller-id-field").change(function () {
      $(this).val(
        $(this).val()
          .replace(/\D+/g, ", ")
          .replace(/^\D+|\D+$/g, "")
      )

      update_preview()
    })
  })()

  $("#size-step .item-container").click(function () {
    $("#size-step .item-container").removeClass("selected")
    $(this).addClass("selected")
    update_preview()
  })

  $("#size-step .item-container").eq(2).addClass("selected")

  function desired_size_string() {
    return $("#size-step .item-container.selected .label").text()
  }

  function desired_size() {
    var parts = desired_size_string().split(/\D+/)

    return [parseInt(parts[0]), parseInt(parts[1])]
  }

  function desired_width() {
    return desired_size()[0]
  }

  function desired_height() {
    return desired_size()[1]
  }

  // -------------------------------------------------------

  var picker = new ProColor({
    mode: "static",
    parent: $("#color-picker").get(0),
    imgPath: "/images/procolor/",
    input: "color-field",
    showInField: true,
    onChanged: function () {
      $("color-step").toggleClass(
        "color-changed",
        selected_color() !== default_background_color
      )

      update_preview()
    }
  })

  var default_background_color = "#ffdd44"
  var default_foreground_color = "#000000"

  function selected_color() {
    return $("#color-field").val().toLowerCase()
  }

  $("#color-reset-button").click(function () {
    picker.update("rgb", picker.decodeHexColor(default_background_color), [])
    handle_color_picker_changed()
  })

  $("#widget-title-field").change(update_preview)

  function selected_procolor_color() {
    return picker.decodeHexColor(selected_color())
  }

  function selected_color_brightness() {
    return picker.trueBrightness(selected_procolor_color())
  }

  function foreground_color() {
    return selected_color_brightness() > 0.5 ? "#000000" : "#ffffff"
  }

  function show_title() {
    return desired_height() >= 200 && desired_width() >= 200
  }

  function search_type() {
    return $("#search-type-form input[type=radio]:checked").val()
  }

  function update_preview() {
    var options = {}
    var query_parameters = location.href.toQueryParams()

    if (show_title()) {
      options.title = $("#widget-title-field").val()
    }

    if ("tradedoublerID" in query_parameters) {
      options.tradedoublerID = query_parameters.tradedoublerID
    } else if ("commissionjunction" in query_parameters) {
      options.commissionjunctionPID = query_parameters.pid
      options.commissionjunctionAID = query_parameters.aid
        
      if ("sid" in query_parameters && query_parameters.sid !== "") {
        options.commissionjunctionSID = query_parameters.sid
      }
    } else if ("zanpid" in query_parameters) {
      options.zanpid = query_parameters.zanpid
    }

    if (selected_color() !== default_background_color) {
      options.backgroundColor = selected_color()
      options.foregroundColor = foreground_color()
    }

    if (search_type() === "query") {
      options.searchQuery = search_query()
    } else if (search_type() === "seller") {
      options.sellerIDs = $("#seller-id-field").val()
    }

    function seller_ids() {
      return $("#seller-id-field").val().split(/\D+/)
    }

    function search_query() {
      return $("#search-choice-field").val()
    }

    // var swf_name = "http://kampanj.tradera.com/widget/20100702/widget.swf"
    var swf_name = "http://kampanj.tradera.com/widget/20111116/widget.swf"

    swfobject.embedSWF(
      swf_name, "widget-container",
      desired_width(), desired_height(),
      "10.2.0", null, options
    )

    var options_array = $.map(options, function (value, name) {
      return name + "=" + encodeURIComponent(value)
    })

    var flashvars = options_array.join("&")

    var size_attributes =
      'width="' + desired_width() + '" ' +
      'height="' + desired_height() + '"'

    var code =
      '<object ' + size_attributes + ' ' +
      'classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">\n' +
      '  <param name="movie" value="' + swf_name + '"/>\n' +
      '  <param name="flashvars" value="' + flashvars + '"/>\n' +
      '  <!--[if !IE]>-->\n' +
      '  <object type="application/x-shockwave-flash" ' +
      'data="' + swf_name + '" ' + size_attributes + '>\n' +
      '    <param name="flashvars" value="' + flashvars + '"/>\n' +
      '  <!--<![endif]-->\n'

    if (options.zanpid) {
      code += '    <img src="http://ad.zanox.com/ppv/?' + options.zanpid + '" width="1" height="1">\n'
    }

    if (search_type() === "query") {
      code += '    <p><a href="http://www.tradera.com/search/result.aspx?search=' + encodeURIComponent(search_query()) + '">Auktioner på Tradera: ' + search_query() + '</a></p>\n'
    } else if (search_type() === "seller") {
      $.each(seller_ids(), function () {
        code += '    <p><a href="http://www.tradera.com/category/category.aspx?ftgnr=' + this + '">Auktioner på Tradera</a></p>\n'
      })
    }

    code += '    <p><a href="http://widget.tradera.com/">Skapa din egen Tradera-widget</a></p>\n' +
      '  <!--[if !IE]>-->\n' +
      '  </object>\n' +
      '  <!--<![endif]-->\n' +
      '</object>\n';

    $("#result-textarea").val(code)

    if (show_title()) {
      $("widget-title-field").removeAttr("disabled")
      $("color-step").removeClass("title-disabled")
    } else {
      $("widget-title-field").attr("disabled", "disabled")
      $("color-step").addClass("title-disabled")
    }
  }

  update_preview()
})