(function($) {

$('.sp-widget-media').live('update', function(e, id, control) {
    var widget = $(this);
    var $control = $('.sp-widget-media-' + control.replace(/([\[\]])/g, "\\$1"));

    var media = widget.data("widget")["data"];

    log(widget.data("widget")["id"] + ": Loading page " + widget.data("widget")["page"]);

    // first preload all images
    log("  - preloading media previews");
    var images = [];
    for (idx in media) {
        if (media[idx].thumbnail && media[idx].thumbnail != "") {
            var i = new Image;
            i.src = media[idx].thumbnail;
            images[idx] = i;
        }
    }

    // reset fields
    $('.sp-media-item-wrapper', widget).each(function(idx) {
        var item = $('.sp-media-item', this);
        item.fadeOut(function() {
            log("  - showing " + idx);
            // clean up classes
            item.attr('class').split(/\s+/).forEach(function(val) {
                if (val.match(/^sp-media-item-/)) {
                    item.removeClass(val);
                }
            });

            if (!media[idx] || !media[idx].url) {
                // no data for this media box, do some clean up, then next!
                item.attr('id', null);
                log("    - no media");
                return;
            }

            log("  - loading item [" + idx + "/" + media[idx].type + "]: " + media[idx].title);

            item.addClass('sp-media-item-' + media[idx].type).attr('id', "sp-media-item-" + media[idx].id);

            for (field in media[idx]) {
                var $e = $('.sp-media-' + field, item);
                if ($e.length > 0) {
                    var $s = $('span', $e);
                    if ($s.length > 0) {
                        $e = $s;
                    }

                    $e.text(media[idx][field]);
                }
            }

            $('.sp-media-title', item).html('<a href="' + media[idx].url + '" rel="sp-media[' + media[idx].type + ']" title="' + media[idx].title +'">' + media[idx].title + '</a>');

            if (images[idx]) {
                $('.sp-media-preview', item).html($('<img />').attr({ src: images[idx].src, alt: media[idx].title }).load(function() { $(this).trigger('previewloaded'); }));
            } else {
                $('.sp-media-preview', item).html('<div class="sp-media-image-none"></div>');
            }

            item.data("media_data", media[idx]);

            item.fadeIn();
        });
    });

    $control.addClass('sp-state-active').siblings().removeClass('sp-state-active');

    widget.trigger('updated');
});

$('.sp-widget-media').live('registered', function(e) {
    var $widget = $(this);

    $widget.data("widget")["page"] = 0;
    $widget.data("widget")["thumbnail"] = [ 145, 80 ];

    $('.sp-widget-media-page\\[1\\]', $widget).click();

    $('.sp-media-preview-wrapper', $widget).live('click', function() {
        $('.sp-media-title', $(this).closest('.sp-media-item')).click();
    });

    $('.sp-media-title', $widget).live('click', function() {
        var $item = $(this).closest(".sp-media-item");
        var data = $item.data("media_data");

        var items = [];
        var $items = $item.closest('li').parent().children().has(".sp-media-item-" + data.type).each(function() {
            items.push($('.sp-media-item', this).data("media_data"));
        });

        log(items, $items.index($item.closest('li')));

        shiftpress.modal_media({
            data: items,
            selected: $items.index($item.closest('li'))
        });

        return false;
    });
});

})(jQuery);