CCMap = Class.create();
CCMap.prototype = {
	initialize: function(image_div, initialX, initialY) {
	  this.image_div = image_div;
	  
	  if (DEBUG) console.log("Initializing map instance with ", image_div, initialX, initialY);
		this.container = $('map_container');
		this.container.size = this.container.getDimensions();

    if (DEBUG) console.log(this.image_div + ": Container Size: ", this.container.size);

    this.initialX = initialX;
    this.initialY = initialY;

		this.map_image = $(image_div);
				
		this.initMap();
		
		Event.observe(this.map_image, 'click', this.handle_point_click.bindAsEventListener(this));
		
		if (Prototype.Browser.IE) { // IE6 doesn't support the :hover pseudo attribute on DIVs.
  		this.map_image.select('.flag').each(function(flag) {
  		  Event.observe(flag, 'mouseover', function() { flag.addClassName('flag_hover'); });
  		  Event.observe(flag, 'mouseout', function() { flag.removeClassName('flag_hover'); });
  		});
  		this.map_image.select('.flag_small').each(function(flag) {
  		  Event.observe(flag, 'mouseover', function() { flag.addClassName('flag_small_hover'); });
  		  Event.observe(flag, 'mouseout', function() { flag.removeClassName('flag_small_hover'); });
  		});
		}
		
	},
	
	handle_point_click: function(e) {
    var el = Event.element(e);
	  if ((el.hasClassName('flag') || el.hasClassName('flag_small')) && this.pointHandler) {
	    this.pointHandler(el.readAttribute('event'));
	  }
	},
	
	registerPointHandler: function(handler) {
	  this.pointHandler = handler;
	},
	
	initMap: function() {
		this.map_image.size = this.map_image.getDimensions();

    if (DEBUG) console.log(this.image_div + ": Map image size: ", this.map_image.size);

    // Initial Placement
    this.map_image.setStyle({
    	top: this.initialY + "px",
    	left: this.initialX + "px"
    });
    
    if (DEBUG) console.log(this.image_div + ": Setting initial map position: ", this.initialX, this.initialY);

		this.dd = new YAHOO.util.DD(this.map_image);
		this.dd.scroll = false;
		
		this.setConstraints();
		
	},

  show: function() {
    if (DEBUG) console.log("Showing map ", this.image_div);
    this.map_image.show();
    this.map_image.setStyle({visibility: 'visible'});
  },
  
  hide: function() {
    if (DEBUG) console.log("Hiding map ", this.image_div);
    this.map_image.hide();
  },

  setXY: function(x,y) {
    // Initial Placement
    x = (x > 0) ? 0 : x;
    y = (y > 0) ? 0 : y;

    boundX = -1*(this.map_image.size.width-this.container.size.width);
    boundY = -1*(this.map_image.size.height-this.container.size.height);

    x = (x < boundX) ? boundX : x;
    y = (y < boundY) ? boundY : y;

    if (DEBUG) console.log("Setting Map Coordinates for ", this.image_div, x, y);
    
    this.map_image.setStyle({
    	top: y + "px",
    	left: x + "px"
    });
    this.dd.setStartPosition();
//    this.setConstraints();
  },
  
  getX: function() {
    return parseInt(YAHOO.util.Dom.getStyle(this.map_image, 'left'));
  },
  
  getY: function() {
    return parseInt(YAHOO.util.Dom.getStyle(this.map_image, 'top'));
  },

  setConstraints: function() {
    this.constrainLeft = this.map_image.size.width - this.container.size.width + this.getX();
    this.constrainRight = this.getX()*-1;
    this.constrainUp = this.map_image.size.height - this.container.size.height + this.getY();
    this.constrainDown = this.getY()*-1;
  
    if (DEBUG) console.log(this.image_div + ": Setting Constraints: ", 
      this.constrainUp, this.constrainRight, this.constrainDown, this.constrainLeft
    );
  
    this.dd.setXConstraint(this.constrainLeft,this.constrainRight);
		this.dd.setYConstraint(this.constrainUp,this.constrainDown);
  },
	
	onDrag: function(ev) {
		
	}
};

ZoomToggle = Class.create();
ZoomToggle.prototype = {
  initialize: function(zoomed_in_map, zoomed_out_map, default_state) {
    if (DEBUG) console.log("Initializing ZoomToggle.  Zoomed In: " + zoomed_in_map.image_div + ", Zoomed Out: " + zoomed_out_map.image_div);
    this.zoomed_in_map = zoomed_in_map;
    this.zoomed_out_map = zoomed_out_map;
    this.toggleButton = $('zoom_toggle');
    this.state = default_state;
    if (this.state == 'in') {
      this.zoomed_in_map.show();
      this.zoomed_out_map.hide();
    }
    else {
      this.zoomed_in_map.hide();
      this.zoomed_out_map.show();
    }
    Event.observe(this.toggleButton, 'click', this.toggleState.bind(this));
    this.updateToggleButton();
  },
  
  translateToCenter: function(coordinate, containerSize) {
    var result = -1*coordinate + (containerSize/2);
    if (DEBUG) console.log("Translating To Center: (coordinate, containerSize): ", coordinate, containerSize, result);
    return result;
  },
  
  translateFromCenter: function(centerPoint, containerSize) {
    var result = -1*(centerPoint - (containerSize/2) )
    if (DEBUG) console.log("Translating From Center: (centerPoint, containerSize, result): ", centerPoint, containerSize, result);
    return result;
  },
  
  translateCoordinate: function(sourceCoord, sourceSize, destSize) { // return destCoord
    var result = (sourceCoord*destSize)/sourceSize;
    if (DEBUG) console.log("Translating coordinate space: (sourceCoord, sourceSize, destSize, result): ", sourceCoord, sourceSize, destSize, result);
    return result;
  },
  
  toggleState: function() {
    
    if (this.state == "in") {
      if (DEBUG) console.log("Zooming Out");
      this.state = "out";
      var source = this.zoomed_in_map;
      var destination = this.zoomed_out_map;
    }
    else {
      if (DEBUG) console.log("Zooming In");
      this.state = "in";
      var source = this.zoomed_out_map;
      var destination = this.zoomed_in_map;
    }

    destination.show();

    var sourceCenterX = this.translateFromCenter(source.getX(), source.container.size.width);
    var destinationCenterX = this.translateCoordinate(sourceCenterX, source.map_image.size.width, destination.map_image.size.width);
    var destinationX = this.translateToCenter(destinationCenterX, destination.container.size.width);
    
    var sourceCenterY = this.translateFromCenter(source.getY(), source.container.size.height);
    var destinationCenterY = this.translateCoordinate(sourceCenterY, source.map_image.size.height, destination.map_image.size.height);
    var destinationY = this.translateToCenter(destinationCenterY, destination.container.size.height);

    destination.setXY(destinationX, destinationY);

    source.hide();

    this.updateToggleButton();
  },

  updateToggleButton: function() {
    this.toggleButton.update(this.state == 'in' ? "Zoom Out" : "Zoom In");
  }

}