$(document).ready(function(){
    
    // get the coordinates from the title of the map container
    //var coords = $('#map').attr('title').split(":")[1].split(',');
    
    // prevent tooltip by clearing title now we're done with it
    //$('#map').attr('title', '');
    
    var map = new Q.GoogleMap({
        id: 'map',
        zoom: 14,
        marker: true,
        mapControl: true,
        typeControl: true,
        type: 'normal',
        expand: {
            to: {width: 878, height: 550},
            hide: ['#back','#main-image','#thumbs','.right-column']
        }
        // fullscreen: true
    });
    //map.editMarker();
    
    if ($('#thumbs div').length == 0) {
        $('#image-zoom').hide();
    }
    
    var imageSize = 'm';
    
    $('#thumbs').click(function(e){
        var parts = $(e.target).parent().attr('class').split('-');
        var id = parts[2];
        var num = parts[3];
        if (num) {
            $('#main-image img').attr('src', '/content/images/properties/' + id + '/' + imageSize + '/' + num + '.jpg');
        }
        return false;
    });
    
    $('#image-zoom').toggle(function(){
        var that = $(this);
        imageSize = 'l';
        var hide = ['#back','#map','.right-column'];
        for (var i = 0, len = hide.length; i < len; i++) {
            $(hide[i]).hide();
        }
        $('#main-image img').hide();
        $('#thumbs').width(784);
        $('#thumbs').css('margin-left', '50px');
        $('#main-image').css('margin-top', '20px');
        var img = $('#main-image img').attr('src').replace('/m/', '/l/');
        $('#main-image img').attr('src', img);
        $('#main-image').width(784);
        $('#main-image').height(588);
        $('#main-image').css('margin-left', '50px');
        /*
        $('#main-image img').load(function(){
            //$('#main-image').width($('#main-image img').width());
            //$('#main-image').height($('#main-image img').height());
            var half;
            if ($('#main-image img').height() < 588) {
                half = Math.round((588 - $('#main-image img').height()) / 2);
                $('#main-image img').css('margin-top', half + 50 + 'px');
            } else {
                $('#main-image img').css('margin-top', '50px');
            }
        });
        */
        $('#main-image img').fadeIn();
        that.hide();
        that.css({top:'-1px',left:'-1px'});
        that.removeClass('zoom');
        that.addClass('close');
        that.fadeIn();
    },
    function(){
        imageSize = 'm';
        var hide = ['#back','#map','.right-column'];
        for (var i = 0, len = hide.length; i < len; i++) {
            $(hide[i]).fadeIn();
        }
        $('#thumbs').width(373);
        $('#thumbs').css('margin-left', '0');
        $('#main-image').width(368);
        $('#main-image').height(276);
        $('#main-image').css('margin-left', '0');
        $('#main-image').css('margin-top', '0');
        $('#main-image img').css('margin-top', '0');
        $('#main-image img').css('top', '0');
        $('#main-image img').attr('src', $('#main-image img').attr('src').replace('/l/', '/m/'));
        $(this).hide();
        $(this).css({top:0,left:0});
        $(this).removeClass('close');
        $(this).addClass('zoom');
        $(this).show();
    }
    );
    
    $f('video-fallback', "/static/ui/js/flowplayer/flowplayer-3.2.5.swf", {
    
        clip: {
            autoBuffering: true,
            bufferLength: 2,
            autoPlay: false
        }
    	
    }); 


});