/*		
	
	var opts = {
		mapBounds: {'max':{'width':null,'height':null},'min':{'width':null,'height':null}},
		eleMask: '#id' ,
		eleBox: '#id' ,
		eleSlider: '#id' ,
		eleCss: '#id',
		editPinPos : true
	}
		
*/	
var MyMap = Class.create();

MyMap.prototype = {

    mapBounds : {'max':{'width':null,'height':null},'min':{'width':null,'height':null}},
    eleMask : null ,
    eleBox : null ,
    eleSlider : null ,
    elePins : [],
    base : {},
    eleCss : null ,
    pinSelect : '[class^="mapPin"]',
    editPinPos : false ,
    initialize: function(opts) 
    {        
        if(opts.mapBounds != undefined) {
    		this.mapBounds = opts.mapBounds;
    	}
        if(opts.eleMask != undefined) {
    		this.eleMask = $(opts.eleMask);
    	}
        if(opts.eleBox != undefined) {
    		this.eleBox = $(opts.eleBox);
    		new Draggable(opts.eleBox,{snap:this.chkBox.bind(this)});
    	}
        if(opts.eleCss != undefined) {
    		this.eleCss = $(opts.eleCss);
    	}
        if(opts.eleSlider != undefined) {
    		this.eleSlider = $(opts.eleSlider);
    	}
        if(opts.editPinPos == true) {
    		this.editPinPos = true;
    	}
    	this.elePins = this.eleBox.select(this.pinSelect);
		// save original values
		this.elePins.each(function(item,i){
			this.base[item.id] = {'top':parseInt(item.getStyle('top')), 'left':parseInt(item.getStyle('left')) };
		}.bind(this));
		
		
		this.eleBox.setStyle({'width':this.mapBounds.min.width+'px','height':this.mapBounds.min.height+'px'});
		this.base[ this.eleBox.id ] = {'top':parseInt(this.eleBox.getStyle('top')), 
						  'left':parseInt(this.eleBox.getStyle('left')),
						  'width':this.eleBox.getWidth(),
						  'height':this.eleBox.getHeight()
						};
						
						
						
						
		this.setPinPos();
		this.centerBox();
    },
	start : function() 
	{
		new Control.Slider(this.eleSlider.down('.handle'), this.eleSlider, {
			range: $R(this.mapBounds.min.width, this.mapBounds.max.width),
			sliderValue: this.mapBounds.min.width,
			onSlide: function(value) {
				this.scaleBox(value);
			}.bind(this),
			onChange: function(value) { 
				this.scaleBox(value);
			}.bind(this)
		});
	},
	scaleBox : function(value) 
	{
		var b1 = this.eleBox.getDimensions();
		var h = (this.mapBounds.max.height*value)/this.mapBounds.max.width;
		// difference in size after scale
		var diff_w = (value - b1.width)/2; 
		var diff_h = (h - b1.height)/2; 	
		// reposition x/y to scale from center	
		var x   = parseInt(this.eleBox.getStyle('left'))-diff_w;
		var y   = parseInt(this.eleBox.getStyle('top'))-diff_h;
		var pos = this.chkBox(x,y);	
		this.eleBox.setStyle({ top: pos[1] + 'px', left: pos[0] + 'px', width: value + 'px', height: h + 'px'});
		this.scalePinPos(value);
	},
	scalePinPos : function(value) 
	{
		var ratio = this.mapBounds.min.width/value;
		this.elePins.each(function(item,i) {
			var l = this.base[item.id].left/ratio;
			var t = this.base[item.id].top/ratio;
			item.setStyle({ 'top': t + 'px', 'left': l + 'px' });
		}.bind(this));
	},
	chkBox : function(x,y) 
	{
		var bd     = this.eleBox.getDimensions();
		var md     = this.eleMask.getDimensions();
		var diff_x = bd.width-md.width;
		var diff_y = bd.height-md.height;
		var new_x  = (x > 0) ? 0 : ((x < -(diff_x)) ? -(diff_x) : x);
		var new_y  = (y > 0) ? 0 : ((y < -(diff_y)) ? -(diff_y) : y);
		return [ new_x, new_y ];
	},
    centerBox : function() 
    {
		var m = this.eleMask.getDimensions();
		var e = this.eleBox.getDimensions();
		var left = (m.width/2) - (e.width/2);
		var top  = (m.height/2) - (e.height/2);
		this.eleBox.setStyle({'top':top+'px','left':left+'px'});
	},
	setPinPos: function() 
	{
		if(this.editPinPos) {
			this.elePins.each(function(item,i){
				new Draggable(item);
				var obj = function(){ this.outputPinPos(); }
				item.observe('mouseout',obj.bind(this));
			}.bind(this));
		}
	},
	outputPinPos : function() 
	{
		if(this.eleCss!=null) {
			this.eleCss.update();
			str = '';
			this.elePins.each(function(item,i) {
				this.eleCss.insert('#'+item.id+' {top:'+item.getStyle('top')+';left:'+item.getStyle('left')+";}\n");
			}.bind(this));
		}
	}
}