jQuery(document).ready(function($) {
    // Initialize draggable and resizable
    $("#theframe").draggable({
        containment: "#the-showroom",
        start: function() {
            $(this).addClass('dragging');
        },
        stop: function() {
            $(this).removeClass('dragging');
        }
    }).resizable({
        aspectRatio: true,
        handles: "se",
        containment: "#the-showroom",
        minWidth: 50,
        minHeight: 50,
        start: function() {
            $(this).addClass('resizing');
        },
        stop: function() {
            $(this).removeClass('resizing');
        }
    });

    // Room selection
    $('.showroom-roomchoice').on('click', function() {
        const $loading = $('.hangit-loading');
        const $showroom = $('#the-showroom');
        const $roomChoices = $('.showroom-roomchoice');
        const newRoomUrl = $(this).data('room-url');
        
        // Show loading state
        $loading.fadeIn(200);
        
        // Remove active class from all rooms
        $roomChoices.removeClass('active');
        
        // Add active class to selected room
        $(this).addClass('active');
        
        // Create new image element
        const newImg = new Image();
        newImg.onload = function() {
            // Hide loading state
            $loading.fadeOut(200);
            
            // Update background with fade effect
            $showroom.find('img').first()
                .fadeOut(200, function() {
                    $(this).attr('src', newRoomUrl).fadeIn(200);
                });
        };
        newImg.src = newRoomUrl;
    });

    // Add active class to first room
    $('.showroom-roomchoice').first().addClass('active');

    // Mobile touch events support
    if ('ontouchstart' in window) {
        $('#theframe').addClass('touch-device');
    }

    // Smooth scrolling for room selector
    $('#showroom-rooms').on('wheel', function(e) {
        if (e.originalEvent.deltaY !== 0) {
            e.preventDefault();
            $(this).scrollLeft($(this).scrollLeft() + e.originalEvent.deltaY);
        }
    });
});
