function horizontalChanger() {
    var $active = $('#horizontalChanger img.active');

    if ( $active.length == 0 ) $active = $('#horizontalChanger img:last');

    var $next =  $active.next().length ? $active.next()
        : $('#horizontalChanger img:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

function createDropDown(){
    var source = $("#source");
    var selected = source.find("option[selected]");
    var options = $("option", source);
    
    $("#here-dropdown").append('<dl id="target" class="dropdown"></dl>')
    $("#target").append('<dt><a href="#">' + selected.text() + 
        '<span class="value">' + selected.val() + 
        '</span></a></dt>')
    $("#target").append('<dd><ul></ul></dd>')

    options.each(function(){
        $("#target dd ul").append('<li><a href="#">' + 
            $(this).text() + '<span class="value">' + 
            $(this).val() + '</span></a></li>');
    });
}



$(function() {
    setInterval( "horizontalChanger()", 3000 );
	$('.styled-radio input:radio').checkbox(); // TODO - triggers checkbox not a function error


	createDropDown();
	// createDropDown2();
    
    $(".dropdown dt a").click(function() {
        $(".dropdown dd ul").toggle();
		return false;
    });

    $(document).bind('click', function(e) {
        var $clicked = $(e.target);
        if (! $clicked.parents().hasClass("dropdown"))
            $(".dropdown dd ul").hide();
    });
                
    $(".dropdown dd ul li a").click(function() {
        var text = $(this).html();
        $(".dropdown dt a").html(text);
        $(".dropdown dd ul").hide();
        
        var source = $("#source");
        source.val($(this).find("span.value").html())
		return false;
    });

});