// The active level of zooming
var level = 2
// The number of active floor
var floor = 0;

function zoomMap(mouseX,mouseY)
{
    $('body').trigger('cycle', 'pause');
    // Autoscroll should be set after the images is showed, and only once
    if (typeof zoomMap.autoscroll_enabled == 'undefined' )
    {
        $('#mapcontainer').autoscroll();
        zoomMap.autoscroll_enabled = 1;
    }
    // Find the image into the container and zoom it
    $('.minimapimages img[rel="' + floor + '"]').animate(
    {
        width : "1200px",
        height : "729px",
        marginLeft : "-" + mouseX,
        marginTop : "-" + mouseY,
        opacity : 0
    }, {
        duration : 600,
        complete : function()
        {
            // Hide the clicked container 
            $('.minimapimages').hide().removeClass('printable');
        }
    });
    $('#zoomin a').removeClass('on');
    // Hide previous enlarged image
    $('.ml').hide();
    // Show the attached large image
    $('.ml[rel="' + floor + '"]').show();
    $('#maplarge').addClass('printable');
}		

function zoomIn()
{
    if (level < 4)
    {
        level = level + 1;
        switch(level)
        {
            case 3:
                // Hide the main map
                $('#area2').fadeOut();
                $('#print').show();
                // Show the hidden images container
                $('.minimapimages').css({'display' : 'block'}).addClass('printable');
                // Hide all images
                $('.minimapimages img').hide();
                // Show only image which attached to the clicked area
                $('.minimapimages img[rel="' + floor + '"]').show().attr('showed', '1');
                // The zoom out now enabled
                $('#zoomout a').addClass('on');
                break;
            case 4:
                $('#zoomin a').removeClass('on');  
                zoomMap(1000,500);                  
                break;
        }
    }
}

function zoomOut()
{
    if (level > 2)
    {
        level = level - 1;
        switch(level)
        {
            case 2:
                $('.minimapimages').hide().removeClass('printable');
                // Show the main floor page
                $('#area2').fadeIn();
                $('#print').hide();
                $('#zoomout a').removeClass('on');
                $('#zoomin a').addClass('on');
                break;
            case 3:
                // Hide the zoomed view
                $('.ml').hide();
                $('#maplarge').removeClass('printable');             
                // Show the hidden images container
                $('.minimapimages').css({'display' : 'block'}).addClass('printable');
                // Restore the active image attributes
                $('.minimapimages img[rel="' + floor + '"]').animate({
                    width : "729px",
                    height : "400px",
                    marginLeft : "0px",
                    marginTop : "0px",
                    opacity : 1
                }, {
                    duration : 300,
                    complete: function(){$('.minimapimages').css({'display' : 'block'});}
                });
                $('#zoomin a').addClass('on');
                $('#zoomout a').addClass('on');
                break;
        }   
    }
}

$(function()
{
    $('#area1').click(function(){zoomIn();});

    $('.minimapimages img').click(function(ev)
    {
        var mouseX = ((ev.pageX - $(this).offset().left) * 2) +25;
        var mouseY = ((ev.pageY - $(this).offset().top) * 2);
        // Show the zoomed map
        zoomMap(mouseX,mouseY);
        // Increase the level
        zoomIn();
    });

    $('#zoomout a').click(function(){zoomOut();});
    $('#zoomin a').click(function(){zoomIn();})

    // Load the images then the navigation level 2 is animated
    $('body').bind('navigation_level2', function (event, href)
    {
        if (href == '#residences-floor_plans')
        {
            images_load('.minimapimages img, #maplarge img, #area2 img');
        }
    });

    $('#map *').tooltip({delay: 0, showURL: false});
    $('#map *').click(function(el)
    {
        // Set the active floor number
        floor = $(this).attr('rel');
        zoomIn();
    });

    // For other images on-load function should be his own handle
    $(document).bind('images_load', function(event, search_id)
    {
        switch(search_id)
        {
            case '.minimapimages img, #maplarge img, #area2 img':
                $('#loading').remove();
                $('#area2 img').show(10, function()
                {
                    zoomOut(); 
                    zoomOut();
                    $('.map').maphilight();
                });
                break;
            case '#background_images img':
                $('#background_images div').remove();
                $('#background_images img').show();
            	$('#background_images').cycle({
            		speed: 1000,
            		timeout: 8000
            	});
                break;                
        }
    })
    
    images_load('#background_images img');
    
    function images_load(search_id)
    {
        var count_images = 0;
        $(search_id).each(function(i)
        {
            count_images++;
        });

        // Upload all used images after page loaded
        $(search_id).each(function(i)
        {
            // Get path to the background, and remove the directory path
            var src = $(this).attr('src');
            temp = new Image();
            // Load the image, and show the loading gif while 
            $(temp).load(function ()
            {
                // Hide the image and place it from the browser screen
                $(this).hide().css('position', 'absolute').css('left', '-3000px');
                $('body').append(this);
                // Decrease counter of images to load
                count_images--;
                if (!count_images)
                {
                    $(document).trigger('images_load', [search_id]);
                }
                // Triging the event then all images are loaded
            }).attr('src', src);
        });
    }

});