$(function ()
{
    $(".cards-dropdown").each(function ()
    {
        var check = $(this).find("input[type=checkbox]");
        var dropdown = $(this).find("select");
        check.css("visibility", "visible");

        dropdown.prop("disabled", !check.prop("checked"));

        check.bind("click", function ()
        {
            dropdown.prop("disabled", !check.prop("checked"));
        });


    });
});

var extraPreviews = [];

var ExtraProductPreview = function (elem)
{
    var self = this;

    self.trigger = $(elem);
    self.preview = self.trigger.parents("form").eq(0).find(".add-opts-preview");
    self.previewImg = self.preview.find("img");
    self.title = self.trigger.text();
    self.image = self.trigger.prop("title");

    // We have abused the title attribute to hold our image, let's clear it up
    self.trigger.prop("title", "");

    // Some browsers don't trigger mouseover events on select options. We need to find a way to simulate this.
    /*var parent = self.trigger.get(0).parentNode;
    if (parent.tagName.toLowerCase() == "select") {
    $(parent).bind("change", function () { alert(parent.selectedIndex); });
    }*/

    self.trigger.hover(
        function ()
        {
            self.previewImg.prop("src", self.image);
            self.preview.show();
        }, function ()
        {
            self.previewImg.prop("src", "");
            self.preview.hide();
        }
    );

}

$(function ()
{
    $(".add-opts-preview").hide();
    $(".add-opts-previewtrigger").each(
        function (i, elem) { extraPreviews.push(new ExtraProductPreview($(elem))); }
    );

});