// JavaScript Document map.js

var map={
	
	scroller:'',
	mapBoxId:'mapBox',
	fullMapId:'full_size_map',
	mapSize:{big:{w:2000, h:1700}, small:{w:600, h:510} },
       smallImage: 'http://www.transantarcticexpedition.com/themes/site_themes/images/expedition/antarctica-map_small.jpg',
        largeImage : 'http://www.transantarcticexpedition.com/themes/site_themes/images/expedition/antarctica-map.jpg',
        resizeDuration:30000,
        resizefps:100,
        resizeTransition:'linear',
	imgIsShrunk:false,
	fullMapCloseButtonId:'close_map',
	fullMapOpenButtonId:'zoom_link',
	area:150,
	velocity:0.5,
	ronneLink: 'ronne_link',
	ronneCoord: { x:270, y:500 },
       poleLink: 'pole_link',
	poleCoord: { x:750, y:638 },
	rossLink: 'ross_link',
	rossCoord: { x:750, y:1158 },
        currentPositionOnRoute: 0,
       route : [
                     { x:270, y:500},
                     { x:430, y:480 },
                     { x:590, y:618 },
                     { x:750, y:638 },
                     { x:750, y:742 },
                     { x:600, y:902 },
                     { x: 730, y:1100 },
                     { x:740, y:1138  },
                     { x:750, y:1158 }
                   ],



        setAsRed: function(ele){
            ele.setStyle('color', '#F3901D');
            ele.setStyle('text-decoration', 'none');
       },

      setAsBlack: function(ele){
             ele.setStyle('color', '#333333');
             ele.setStyle('font-weight', 'bold');
             ele.setStyle('text-decoration', 'underline');
       },
	
	returnToOriginalSize:function(pos, ele){
               
               map.setAsBlack( $(map.ronneLink) );
                map.setAsBlack( $(map.poleLink) );
                map.setAsBlack( $(map.rossLink) );
                 map.setAsBlack( $(map.fullMapOpenButtonId) );
               map.setAsRed( ele );
		if(map.imgIsShrunk == true){ 
		       var img = $(map.mapBoxId).getElement('img');
                       img.set('tween', { duration:500, link:'chain', transition:'linear' } );
                       img.tween('opacity', 0);
			
                        map.moveAndResize.delay(500, img, pos);
		}else{map.moveToOnRoute(pos);}
	},

       moveAndResize: function(pos){
                var img = this;
               // img.setStyles( { 'width' : map.mapSize.big.w, 'height' : map.mapSize.big.h } );
                       img.src = map.largeImage;
                        map.skipTo(map.route[pos].x, map.route[pos].y);
                       map.currentPositionOnRoute = pos;    
			map.imgIsShrunk = false;
                      img.tween('opacity', 1);
       },
	
	moveTo: function(x, y, duration){
               map.scroller.options.duration = duration;
		map.scroller.start(x, y);
               
	},

       moveToOnRoute: function( point ){
            var pos = map.currentPositionOnRoute;
            if( point > pos ){
                  for(var i=pos; i<=point; i++){
                       var x = map.route[i].x;
                      var y = map.route[i].y;
                       var dur = Math.sqrt( (x * x) + (y*y) ).toInt();
                       var dur = dur / 2;
                        map.moveTo(map.route[i].x, map.route[i].y, dur);
                 }
            }else if(point < pos){
                  for(var i=pos; i>=point; i--){
                        var x = map.route[i].x;
                      var y = map.route[i].y;
                       var dur= Math.sqrt( (x * x) + (y*y) ).toInt();
                   var dur = dur / 2;
                        map.moveTo(map.route[i].x, map.route[i].y, dur);
                 }
            }else{
                 map.moveTo(map.route[point].x, map.route[point].y, 500);
            }
             map.currentPositionOnRoute = point;    
                  
       },

        skipTo: function(x, y){
               map.scroller.set(x, y);
       },
	
	
	shrink: function(){
		if(map.imgIsShrunk == true){return;}
                 var img = $(map.mapBoxId).getElement('img');
                img.set('tween', { duration:500, link:'chain', transition:'linear' } );
                img.tween('opacity', 0);
		
		map.shrinkImage.delay( 500 );
	},
	
	shrinkImage: function(){
               var img = $(map.mapBoxId).getElement('img');
               map.scroller.set(0,0);
               map.setAsBlack( $(map.ronneLink) );
                map.setAsBlack( $(map.poleLink) );
                map.setAsBlack( $(map.rossLink) );
                 map.setAsRed( $(map.fullMapOpenButtonId) );
		
              /* img.set('morph', { duration:map.resizeDuration, fps:map.resizefps, transition:map.resizeTransition, link:'cancel' } );
		img.morph( { 'height':map.mapSize.small.h, width:map.mapSize.small.w } );  */
              // img.setStyles( { 'height':map.mapSize.small.h, width:map.mapSize.small.w } );
               img.src = map.smallImage;
		map.imgIsShrunk = true;
               img.tween( 'opacity', 1);
	},


	init:function(){
		var img = $(map.mapBoxId).getElement('img');
		map.scroller = new Fx.Scroll( map.mapBoxId, {link:'chain', wheelStops:false} );
		$(map.ronneLink).addEvent( 'click', function(){ map.returnToOriginalSize(0, this);
														
													 });
		$(map.poleLink).addEvent( 'click', function(){ map.returnToOriginalSize(3, this);
														
													   });
		$(map.rossLink).addEvent( 'click', function(){ map.returnToOriginalSize(8, this);
													   
													   });
		$(map.fullMapOpenButtonId).addEvent( 'click', map.shrink );
                img.setOpacity(0);
                map.shrinkImage();
                map.setAsBlack( $(map.ronneLink) );
               map.setAsBlack( $(map.poleLink) );
                map.setAsBlack( $(map.rossLink) );
              map.setAsRed( $(map.fullMapOpenButtonId) );

	}
}

window.addEvent('load', map.init);