var mapwidth = 555;
var mapheight = 381;
var oHeading = $('#our_studio_info').find('h2').html();
var oDescription = $('#our_studio_info').find('.description').html();
var viewport = $('#studio_mapbox');

function initStudioViewer(){

    //$('#studio_mapbox').selectable({ disabled: true });
    //var mouseinfo = $("<div id=\"mouseinfo\"/>").insertAfter('#text_area');

    $('#studio_mapbox').mapbox({
        zoom: true,
        pan: true,
        defaultLayer: 0,
        layerSplit: 5,
        mapContent: ".mapcontent",
        defaultX: null,
        defaultY: null,
        zoomToCursor: false,
        doubleClickZoom: false,
        clickZoom: false,
        doubleClickZoomOut: false,
        clickZoomOut: false,
        doubleClickMove: false,
        clickMove: false,
        doubleClickDistance: 1,
        clickDistance: 1,
        mousewheel: true,
        afterZoom: function(layer, xcoord, ycoord, viewport) {
           if(typeof layer == 'object') {
            $('#studio_mapbox').find('.marker').detach().appendTo($(layer));
           }
        }
    });

    $('#studio_submap').mapbox({
        zoom: true,
        pan: false,
        defaultLayer: 0,
        layerSplit: 1,
        mapContent: ".mapcontent",
        defaultX: null,
        defaultY: null,
        zoomToCursor: false,
        doubleClickZoom: false,
        clickZoom: false,
        doubleClickZoomOut: false,
        clickZoomOut: false,
        doubleClickMove: false,
        clickMove: false,
        doubleClickDistance: 1,
        clickDistance: 1,
        mousewheel: false
    });
$('#studio_submap_wrapper').hide();
    //console.debug(mapbox);

    $('.map-control a').click(function(e) {//control panel
        e.preventDefault();
        //e.stopPropagation();

        if(this.className == 'zoom' || this.className == 'back') {
            viewport.mapbox(this.className, 2);
            var node = $('#studio_mapbox').find('.current-map-layer');
            $('#studio_mapbox').find('.marker').detach().appendTo($(node));
        }
        else {
            viewport.mapbox(this.className, 100, {
                animate: true,
                ms: 500,
                easing: 'swing'
            });
        }

        return false;
    });

    $('#studio_mapbox > *').dblclick(function() {
        resetMap();
        return false;
    });

    $.getJSON("/ajax.php?f=studio_markers", function (data) {

        $('#studio_markerlist').empty();

        $.each(data, function (i, marker) {

						$('<a/>').addClass('marker').attr('title', marker.heading).attr('name', marker.label).attr('id', marker.id).attr('rel', i).html(marker.label).css({
                left: marker.left+'%',
                top: marker.top+'%'
                }).appendTo($('#studio_mapbox').find('.current-map-layer'))
            .click(function(event) {
                event.preventDefault();
                resetMap();
                animateToMark($(this).attr('rel'), $(this));

            }).data('info', marker);

            $('<a/>').addClass('marker').addClass('submarker').attr('title', marker.heading).attr('name', marker.label).attr('id', 'submarker_'+marker.id).attr('rel', i).html(marker.label)
            .appendTo($('#studio_markerlist')).wrap('<li/>')
            .click(function(event) {
                event.preventDefault();
                resetMap();
                animateToMark($(this).attr('rel'), $(this));
            }).data('info', marker).hide();

        });

        resetMap();

    }); // end getJSON



    return false;
}

function resetMap(){
    $(viewport).find('*').stop().clearQueue();
    viewport.mapbox('zoomTo', 0, true);
    viewport.mapbox('center', null, true);

    $('.marker').removeClass('markeractive');

    var node = $('#studio_mapbox').find('.current-map-layer');
    $('#studio_mapbox').find('.marker').detach().appendTo($(node));

    changeMarkerDescription();
    return false;
}

function changeMarkerDescription(el){

    var id = null, label = null;
    var heading = oHeading, description = oDescription;

    if($('#our_studio_info').attr('rel') == id) {
        return false;
    }

    if(typeof el == 'object') {

        if($(el).data('info') == undefined) {
            //console.debug($(el));
            return false;
        }

        id = $(el).data('info').id;

        if($('#our_studio_info').attr('rel') == id) {
            return false;
        }

        heading = $(el).data('info').heading;
        description = $(el).data('info').description;
    }

    $('#our_studio_info').attr('rel', id);
    $('#our_studio_info').find('h3').html(heading);
    $('#our_studio_info').find('.description').html(description);

    $('#our_studio_info').fadeIn('slow');

    return false;
}

function animateToMark(i, el){

    if(el == undefined) {
        el = $('.marker[rel='+i+']');
    }

    if($(el).hasClass('markeractive')) {
        return false;
    }

    //console.debug($('.marker[rel='+i+']'));

    $('.marker').removeClass('markeractive').show();
    $('.marker[rel='+i+']').addClass('markeractive');

    changeMarkerDescription(el);

    var x = $(el).data('info').x;
    var y = $(el).data('info').y;
    var z = 1.5;

    var submapWidth = $('#studio_submap').find('.current-map-layer').width();
    var submapHeight = $('#studio_submap').find('.current-map-layer').height();

    //console.debug(submapWidth);

    var split = 1;
    var newX = x*submapWidth/100;
    var newY = y*submapHeight/100;

    $('#studio_submap').mapbox('zoomTo', z);
    $('#studio_submap').mapbox('center', {x: newX, y: newY});
    $('#studio_submap_wrapper').show();

    $('#sidebar .description:first').find('ul').hide();
    //console.debug(newX+', '+newY);

    //var node = $(viewport).find(".current-map-layer");
    //$(viewport).find('.marker').detach().appendTo($(node));

    return false;
}

function mouseinfo(){

    var mouseinfo = $("<div id=\"mouseinfo\"/>").insertAfter('#text_area');

    $(document).mousemove(function(e) {

        var mouse = [];
        var ocanvas = $('#studio_mapbox').offset();

        mouse.x = e.pageX - ocanvas.left;
        mouse.y = e.pageY - ocanvas.top;

        $(mouseinfo).html(Math.floor(mouse.x)+", "+Math.floor(mouse.y));
        $(mouseinfo).html(Math.floor(100*mouse.x/mapwidth)+", "+Math.floor(100*mouse.y/mapheight));

        return;
    });

}