$(function() {
    $("label.inside_field").inFieldLabels();


    $("a.fancybox").fancybox({
        titleShow: false
    });

    $("a.fancybox_for_image").fancybox({
        titleShow: false,
        width: 800,
        height: 500
    });


    $(".highlight_on_load").each(function() {
        var element = $(this);
        var original_bg_color = element.css('backgroundColor');
        var highlight_bg_color = "#e1d983";

        element.animate({"backgroundColor": highlight_bg_color}, 1000, function() {
            element.animate({"backgroundColor": original_bg_color}, 500);
        });
    });


    $(".auction_item.list_view").live("click", function(e) {
        window.location.href = $(this).find("a.auction_item_link").attr("href");
    });


    // Toggle read more links. Will now work unless link has a wrapping element like p or h3 or something surrounding.
    $("a.read_more").click(function(e) {
        e.preventDefault();
        var trigger_element = $(this);
        trigger_element.toggleClass("opened").parent().next("div").slideToggle(function() {
          if (trigger_element.hasClass("remove_after_clicked")) trigger_element.parent().fadeOut();
        });
    });

    
    // Open / close + edit text on submit button for user registration form
    $("[name='user[known_to_system]']").change(function(e) {
        var user_known = this.id == "user_known_to_system_1"
        var submit_div = $(this).closest("form").find("div.submit");

        var method = user_known ? "slideUp" : "slideDown";
        $("#user_unknown_inputs")[method]();
        
        var translations_for_kown = submit_div.attr('data-send-me-my-password');
        var translations_for_unkown = submit_div.attr('data-register-me');
        
        submit_div.find("input[type='submit']").val(user_known ? translations_for_kown : translations_for_unkown);
    });


    $("div#auction_showcase_items ul").cycle({
        fx: 'fade',
        timeout: 10000,
        pause: true // ..on mouse over
    });

    // jQuery cycle has another way of doing this pager/external navigation, but as
    // we already had this made another way working with jcarousel I took the liberty
    // of using our existing navigation code, hooking it to cycle via external call, instead
    // if using cycle's pagerAnchorBuilder().
    $("ul#auction_showcase_items_navigation li").click(function() {
        var scrollToIndex = parseInt(this.className.match(/\bindex_(\d+)\b/)[1], 10);
        $("div#auction_showcase_items ul").cycle(scrollToIndex);
    });


    // jQuery Cycle Control script
    // Expects HTML structure like:
    //    <div class='cycle_controls'> 
    //      <img alt="previous" src="/images/arrow_left.png" /> 
    //      <img alt="next" src="/images/arrow_right.png" /> 
    //    </div>
    //  ..and that a UL in the same parent container as the div
    //  which has cycle activated.
    $("div.cycle_controls").each(function(index) {
        var control_container = $(this);
        var cycle_element = control_container.parent().find("ul");
        var next = control_container.find("img[alt='next']");
        var previous = control_container.find("img[alt='previous']");

        if (cycle_element.length !== 1) throw new Error("Found a cycle control element, but didn't find it's cycle container element!");

        next.click(function() { cycle_element.cycle("next"); });
        previous.click(function() { cycle_element.cycle("prev"); });
    });

    // Takes care of putting the ul with categories which
    // there wasn't room for over the "+ 4 til.." li element
    // in the categories list.
    $("li#show_more_categories").click(function(e) {
        e.preventDefault();
        e.stopPropagation();

        var pos = $(this).position();
        var min_width = $(this).css("width");

        $("ul#item_overflowing_categories").css({
          position: "absolute",
          top: pos["top"]+"px",
          left: pos["left"]+"px",
          minWidth: min_width
        }).slideDown("fast");
    });
    
    // Auto closing elements which by default should not be visible.
    // ..elements like ul#item_categories_overflow and maybe others
    // in the future.
    $(window).click(function(e) {
        if ($(e.target).is("a, input[type='submit']")) return;

        $("ul#item_overflowing_categories").each(function() {
            var element = $(this);
            // Close unless click is on auto close element, or click is inside auto close element.. oh, and a small check; the element needs to be visible.
            if (this != e.target && !$.contains(this, e.target) && element.is(":visible")) {
                element.slideUp("fast");
            }
        });
    });
});

$(window).load(function() {
    // For some reason, the inFieldLabels place the label
    // a bit wrong if the window has no vertical scroll bar.
    // I noticed that if I minimized and maximized the window
    // when the label was wrongly positioned it moved itself into
    // the correct place (due to the reposition-your-self functionality
    // I added to the inFieldLabels). Thus, this will fix it in browsers
    // where this problem occurs.
    $(window).trigger("resize");
});