This script was written by someone else, who I am unable to consult. It was written for an older version of jQuery, possibly jQuery 1.3, and worked perfectly on that version. On my new website, which uses a more recent version of jQuery (1.7 ?), the script is completely broken.

I was able to get it mostly working by replacing all occurrences of "$" with "jQuery". I don't know why that was necessary since all tutorials and examples I read online show the dollar sign being used.

However there is still a problem with the code. When an item is selected in the carousel, it doesn't seem to change the radio button in the HTML to show that it is checked. I tried using .prop instead of .attr, per the documentation online, but it doesn't work.

The Avatar Builder, which is what the script is part of, is present on the Edit Account page. I've created a test user on the new site so anyone who is willing to help, can test it.
You can login here: <https://comm7.he2236.vps.webenabled.net/user/login>
Username: testuser
Password: jQuery

Edit Account link: <https://comm7.he2236.vps.webenabled.net/user/59/edit>

The code I have currently mostly working, foster\_avatar\_widget.js
JS includes in the header can be viewed on: comm7.he2236.vps.webenabled.net

```
function select_avatar(image, button) {
image.input.prop('checked', true);
alert(image.input.is(':checked'));
jQuery('#layer_'+image.id).css({ backgroundImage: "url("+image.url+")" });

var src = button.attr("src");

button.parent().parent().find("li img").each(
    function(index) {
        if(jQuery(this).attr("src") == src)
        jQuery(this).addClass("avatar_select");
        else
        jQuery(this).removeClass("avatar_select");
    }
);
}

function unselect_avatar(image, button) {

image.input.prop('checked', false);

//select empty
jQuery('#default_input_'+image.id).prop('checked', true);

jQuery('#layer_'+image.id).css({ backgroundImage: "none" });

var src = button.attr("src");

button.parent().parent().find("li img").each(
    function(index) {
        if(jQuery(this).attr("src") == src)
        jQuery(this).removeClass("avatar_select");
    }
);
}

function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt) {
 var data = carousel.data;

 if(!data) {
     var cid = carousel.list.attr('id').substring(9);
    var data = new Array();
    jQuery('#'+cid+' img').each(
        function(index) {
            var input = jQuery(this).siblings('input');
            var url = jQuery(this).attr('src');

            if(input.is(':checked')) {
                    jQuery('#layer_'+cid).css({ backgroundImage: "url("+url+")" });                   
            }

            data.push({id: cid, input: input, image: jQuery(this), url: url});
        });

    carousel.data = data;

    jQuery('#user-edit').append('<div class="form-item" style="display:none"><label class="option"><input class="form-radio user_avatar_select" id="default_input_'+cid+'" type="radio" value="none" name="select_avatar_'+cid.substring(cid.lastIndexOf("_") + 1)+'"/></label></div>');
}

var idx = carousel.index(i, data.length);
var image = data[idx - 1];

var img = image.image.clone();

if(image.input.is(':checked'))
    img.addClass("avatar_select");

carousel.add(i, img);

img.hover(
    function(){jQuery(this).addClass("avatar_hover");},
    function(){jQuery(this).removeClass("avatar_hover");}
  );

img.click(
    function () {
        if(image.input.is(':checked'))
            unselect_avatar(image, jQuery(this));
        else
            select_avatar(image, jQuery(this));
    }
);
};

function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt)
{
carousel.remove(i);
};

function mycarsousel_init(list) {
if(!list.attr('id'))
    return;

jQuery(".picture").append('<div class="avatar_layer" id="layer_'+list.attr('id')+'"></div>');

list.append('<ul id="carousel_'+list.attr('id')+'" class="jcarousel-skin-tango"></ul>');

jQuery('#carousel_'+list.attr('id')).jcarousel({
    scroll: 6,
    wrap: 'circular',
    //itemLoadCallback: itemLoadCallbackFunction,
    itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback},
    itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback}
});
}

jQuery(document).ready(function () {   
  jQuery('div.user_avatar_select').parent().hide();

  for(var i=0;i<10;i++) {
    mycarsousel_init(jQuery('#user_avatars_select_'+i));
  }

  jQuery(".picture #current").css({display: "none"});

  jQuery(".picture").css({"position": "relative", "width": "200px", "height": "200px", "background-image": "url(/sites/default/files/default_avatar.gif)"});
});

```

The code which worked on older jQuery
JS includes in the header can be viewed on: fclub.he2236.vps.webenabled.net

```
var ie55 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 5.5") != -1);
var ie6 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 6.0") != -1);

function select_avatar(image, button) {
image.input.attr("checked", "checked");

if (jQuery.browser.msie && (ie55 || ie6)) {
    $('#layer_'+image.id).css('background-image', 'none');
    $('#layer_'+image.id).get(0).runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader' + '(src=\'' + image.url + '\', sizingMethod=\'scale\');';
}
else {
    $('#layer_'+image.id).css({ backgroundImage: "url("+image.url+")" });
}

var src = button.attr("src");

button.parent().parent().find("li img").each(
    function(index) {
        if($(this).attr("src") == src)
        $(this).addClass("avatar_select");
        else
        $(this).removeClass("avatar_select");
    }
);
}

function unselect_avatar(image, button) {

image.input.attr("checked", "");

//select empty
$('#default_input_'+image.id).attr("checked", "checked");

$('#layer_'+image.id).css({ backgroundImage: "none" });

if (jQuery.browser.msie && (ie55 || ie6)) {
    $('#layer_'+image.id).get(0).runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader none;';
}
else {
    $('#layer_'+image.id).css({ backgroundImage: "none" });
}

var src = button.attr("src");

button.parent().parent().find("li img").each(
    function(index) {
        if($(this).attr("src") == src)
        $(this).removeClass("avatar_select");
    }
);
}

function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt) {
 var data = carousel.data;

 if(!data) {
     var cid = carousel.list.attr('id').substring(9);
    var data = new Array();
    $('#'+cid+' img').each(
        function(index) {
            var input = $(this).siblings('input');
            var url = $(this).attr('src');

            if(input.attr("checked")) {
                if (jQuery.browser.msie && (ie55 || ie6)) {
                    $('#layer_'+cid).css('background-image', 'none');
                    $('#layer_'+cid).get(0).runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader' + '(src=\'' + url + '\', sizingMethod=\'scale\');';
                }
                else {
                    $('#layer_'+cid).css({ backgroundImage: "url("+url+")" });
                }

            }

            data.push({id: cid, input: input, image: $(this), url: url});
        });

    carousel.data = data;

    $('#user-edit').append('<div class="form-item" style="display:none"><label class="option"><input class="form-radio user_avatar_select" id="default_input_'+cid+'" type="radio" value="none" name="select_avatar_'+cid.substring(cid.lastIndexOf("_") + 1)+'"/></label></div>');
}

var idx = carousel.index(i, data.length);
var image = data[idx - 1];

var img = image.image.clone();

if(image.input.attr("checked"))
img.addClass("avatar_select");

carousel.add(i, img);

img.hover(
    function(){$(this).addClass("avatar_hover");},
    function(){$(this).removeClass("avatar_hover");}
  );

img.click(
    function () {
        if(image.input.attr("checked"))
        unselect_avatar(image, $(this));
        else
        select_avatar(image, $(this));
    }
);
};

function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt)
{
    carousel.remove(i);
};

function mycarsousel_init(list) {
if(!list.attr('id'))
return;

$(".picture").append('<div class="avatar_layer" id="layer_'+list.attr('id')+'"></div>');

list.append('<ul id="carousel_'+list.attr('id')+'" class="jcarousel-skin-tango"></ul>');

$('#carousel_'+list.attr('id')).jcarousel({
    scroll: 6,
    wrap: 'circular',
    itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback},
    itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback}
});
}

if (Drupal.jsEnabled) {
$(document).ready(function () {

  $('div.user_avatar_select').parent().hide();

  for(var i=0;i<10;i++)
  mycarsousel_init($('#user_avatars_select_'+i));

  $(".picture #current").css({display: "none"});

  $(".picture").css({"position": "relative", "width": "200px", "height": "200px", "background-image": "url(/files/default_avatar.gif)"});

  if (jQuery.browser.msie && (ie55 || ie6)) {
    $(".avatar_layer").each(function() {
        //alert(jQuery(this).css('background-image'));
        //$(this).css('background-image', 'none');
        //$(this).get(0).runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader' + '(src=\'' + image.url + '\', sizingMethod=\'scale\');';
    });
}
});
}

```