var wh=[];

// Make vbean_changeroom globally accessible
function vbean_changeroom(obj){
    logd('','changeroom');
    if(jQuery(obj).attr('id')=='choosemyownroom'){
       jQuery('#myroom').trigger('click');
       return;
    }
    
    var thisimg = jQuery(obj).find("img").first();
    if (!thisimg.length) {
        logd('No image found in clicked element', '');
        return;
    }

    var thebg = jQuery('.showroom-background-img');
    if (!thebg.length) {
        logd('Background image element not found', '');
        return;
    }

    var newSrc = thisimg.attr('src');
    if (newSrc) {
        thebg.attr('src', newSrc);
        logd('Room changed to: ' + newSrc, '');
    }
}

jQuery(document).ready(function($){

    function initializeShowroomPage(){
        logd('','InitializeShowroomPage');
        var tbwidth=600;
        var tbheight = 550;
        var winw = jQuery(window).width();
        var winh = jQuery(window).height();
        if(winw<tbwidth){
            tbwidth=winw;
        }
        if(winh<tbheight){
            tbheight=winh;
        }
        $("#hangerlink").attr('href','#TB_inline?width='+tbwidth+'&height='+tbheight+'&inlineId=showroombox')
        
        var tf = $("#theframe"); // the frame
        if (!tf.length) {
            logd('Frame element not found', '');
            return;
        }
        
        var theparent = $(tf).parent(); // the room
        if (!theparent.length) {
            logd('Parent element not found', '');
            return;
        }
        
        // Load the actual image to get its real dimensions
        var img = new Image();
        var imgSrc = $(tf).attr("src");
        if (!imgSrc) {
            logd('No source found for frame', '');
            return;
        }
        
        img.src = imgSrc;
        img.onload = function() {
            console.log('Image loaded successfully: ' + img.width + 'x' + img.height);
            
            // Store the actual image dimensions
            wh = [img.width, img.height];
            var fixedratio = wh[0]/wh[1];
            logd('','fixedratio:'+fixedratio);
            
            // Calculate new dimensions that maintain the exact aspect ratio
            var nw = parseInt($(theparent).width()*0.4); // the new width of the frame
            var ratio = nw/wh[0]; // the ratio used to get the new width
            var nh = parseInt(wh[1]*ratio);
            logd('Ratio:',ratio);
            
            // Set dimensions while maintaining aspect ratio
            $(tf).width(nw);
            $(tf).height(nh);
            
            // Position is now handled by vanilla-drag.js
            // Make sure the element has the right styling
            $(tf).css({
                'position': 'absolute',
                'cursor': 'move'
            });
            
            var x = ($(theparent).width()-$(tf).width())/2;
            var y = ($(theparent).height()-$(tf).height())/2;
            $(tf).css({top: y, left: x});
        };
        
        // Add click handlers for room selection
        jQuery('.showroom-roomchoice').off('click').on('click', function() {
            vbean_changeroom(this);
        });
    }


    function initializeShowroom(){
        logd('','InitializeShowroom');
        logd('Host:',document.location.host);
        var tf = $("#theframe"); // the frame
        var theparent = $(tf).parent(); // the room
        var theimage = $("#the-showroom-backgroundimg");
        
        var nw = parseInt($(theparent).width()*0.4); // the new width of the frame;
        var ratio = nw/wh[0]; // the reatio used to get the new width;
        var nh = parseInt(wh[1]*ratio);
        console.log(ratio);
        var theleft = ($(theparent).width()-nw)/2;
        $(tf).css({'position':'absolute','left':theleft,'top':40,'width':nw,'height':nh});
    }





    initializeShowroomPage();


    $("#hangerlink").on('click touchend',function(e){
        setTimeout(function() {
            initializeShowroom();
        }, 500);
    });

    
    
        function showMyRoom(input) {
        if (input.files && input.files[0]) {
            logd('file',input.files);
            var ftype = input.files[0].type;
            logd('type:',ftype);
            var isimg =(ftype.toLowerCase().indexOf('image')==0);
                if(isimg){
                    var reader = new FileReader();

                    reader.onload = function (e) {
                        var backgroundImg = $("#the-showroom-backgroundimg");
                        if (backgroundImg.length) {
                            backgroundImg.attr('src', e.target.result);
                        } else {
                            logd('Background image element not found for local upload', '');
                        }
                        };

                        reader.readAsDataURL(input.files[0]);
                    }
                
            }
        }
    
    $("#myroom").change(function(){
        showMyRoom(this);
    });
    
    
    $("div.showroom-roomchoice").on('click touchend', function(e){
            vbean_changeroom(this);
    });



});
