if(!String.prototype.endsWith){
	String.prototype.endsWith = function(pattern) {
	    var d = this.length - pattern.length;
	    return d >= 0 && this.lastIndexOf(pattern) === d;
	};
}
function trimDim(dim){
	dim = ""+dim;
	if( dim && ( dim.endsWith('px') || dim.endsWith('pt'))){
		dim = dim.substring(0,dim.length-2);
	}
	return dim;
}

// default is 400
// it should be calculated when graph is added 
// so single graph will fit in whole page
var graphH = 400;


function addSlider(selector) {
	jQuery("#svg"+selector).each(function(){
		var $svg  = jQuery(this).find('svg');
        createSlider($svg,selector);
        prescaleSVG($svg,selector);
        $svg.parent().draggable().css({'margin-top':'20px'}); //'option','containment','parent'
         
         //TODO:
         // here get the available space height 
         // substract the bar height 
         // later this numbers must be used when user slides slider
         // and also this numbers must be updated on resize window event 
         var topH = jQuery("#tabs-GRAPH").offset().top;
         var wH = jQuery(window).height();
         if(topH<wH){
         		graphH = Math.floor(wH-topH);
         }
         //console.log(wH-topH);
         //console.log(graphH );
         
         $svg.parent().parent().css({height:graphH});
         $svg.parent().parent().addClass("lightBorder").css({width:"99.5%"});
        
         
         var zoomFactor = 1.3;
         $svg.parent().bind('click',function(event){
        	dblClickZoom($svg,selector,event.pageX,event.pageY, zoomFactor);
        	return false;
         });
         $svg.parent().bind("contextmenu",function(event){
        	dblClickZoom($svg,selector,event.pageX,event.pageY, 1/zoomFactor);
        	return false;
         });
	});	
}

function sliderClickZoom($svg,selector,pointX,pointY,factor){
	var oldScale = db[selector].scale; 
	var newScale = factor; 
	db[selector].scale = newScale;

	if(oldScale!=newScale){ 
		zoomFromOldToNewScale(oldScale,newScale, $svg,pointX,pointY,selector);
	}
}

function dblClickZoom($svg,selector,pointX,pointY,factor){
	var oldScale = db[selector].scale; 
	var newScale = calculateDblClickScale(oldScale,factor); 
	db[selector].scale = newScale;

	if(oldScale!=newScale){ 
		zoomFromOldToNewScale(oldScale,newScale, $svg,pointX,pointY,selector);
	}
}

function zoomFromOldToNewScale(oldScale,newScale, $svg,pointX,pointY,selector){
		var offset = $svg.offset();
		var pointLocOnSvgX = pointX-offset.left;
		var pointLocOnSvgY = pointY-offset.top;
		
		var deltaX = (pointLocOnSvgX/oldScale)*(newScale-oldScale);
		var deltaY = (pointLocOnSvgY/oldScale)*(newScale-oldScale);
		 
		scaleSVG($svg,selector);
		moveSVGByDeltas($svg, deltaX,deltaY);
}



function createSlider($svg,selector){
	var $parent= $svg.closest('div.rhizonik_svg');
	$parent.css({position:'relative',overflow:'hidden'});
	
	var svgNavigator = '<div class="svgNavigator" style="position:absolute; left:0; top:0; background-color:#fff;padding:8px;border-bottom:1px #ccc solid;border-right:1px #ccc solid;">'+
							'<div class="svgNavigatorMinus"></div>'+
							'<div class="svgNavigatorSlider" style="margin-top:2px;width:155px;">' +
								' <a style="left: 0%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a>'+	
							'</div>'+
							'<div class="svgNavigatorPlus"></div>'+
							'<div class="svgNavigatorVal"></div>'+
							'<div style="clear:both;"></div>'+
							'<div class="svgNavigatorLegend">' +
							'Drag to move.Use mouse buttons to zoom.'+
							//'<div><img src="/images/drag.png" /><span>use mouse to drag an image</span></div>' +
							//'<div><img src="/images/left-mouse-button.png" />use left mouse buttons to zoomin</div>' +
							//'<div><img src="/images/right-mouse-button.png" />use right mouse buttons to zoomout</div>' +
							'</div>'+
					   '</div>';

	$parent.append(svgNavigator);
	
	//not used anymore 
	$parent.find("div.svgNavigatorMinus").click(function(){
				var factor=1/1.3;
				var oldScale =db[selector].scale;
				var newScale =oldScale*factor;
				if(newScale<=0.2){
					newScale = 0.2;
				}
				db[selector].scale = newScale;
        
        		
     			var pointX = $svg.parent().parent().width()/2;
				var pointY = jQuery("#tabs-GRAPH").offset().top;
				if(selector=='explicit'){
					pointY+=graphH/2;
				}else{
					pointY+=graphH+4+graphH/2;
				}
 				
				zoomFromOldToNewScale(oldScale,newScale, $svg,pointX,pointY,selector);
	});
	//	not used anymore
	$parent.find("div.svgNavigatorPlus").click(function(){
				var factor=1.3;
				
				var oldScale =db[selector].scale;
				var newScale =oldScale*factor ;
				if(newScale>=10){
					newScale = 10;
				}
				db[selector].scale = newScale;
        
            var pointX = $svg.parent().parent().width()/2;
				var pointY = jQuery("#tabs-GRAPH").offset().top;
				if(selector=='explicit'){
					pointY+=graphH/2;
				}else{
					pointY+=graphH+4+graphH/2;
				}
				
				zoomFromOldToNewScale(oldScale,newScale, $svg,pointX,pointY,selector);
	});


	$parent.find('div.svgNavigatorSlider').slider(
			{ value:50,
			  min:2, 
			  max: 100, 
			  orientation: 'horizontal', 
			  slide: function(event, ui) {
					var pointX = $svg.parent().width()/2;
					var pointY = jQuery("#tabs-GRAPH").offset().top;
					if(selector=='explicit'){
						pointY+=graphH/2;
					}else{
						pointY+=graphH+4+graphH/2;
					}
					sliderClickZoom($svg,selector,pointX,pointY,ui.value/10);
			  }
			});
}

function prescaleSVG($svg, selector ){
	if(db[selector].oVieBoxString==null ){
		db[selector].oVieBoxString = $svg.attr('viewBox');
	}
	if(db[selector].oHeight==null ){
		db[selector].oHeight = trimDim( $svg.attr('height') );
	}
	if(db[selector].oWidth==null ){
		db[selector].oWidth = trimDim(  $svg.attr('width') );
	}

	var oWidth = db[selector].oWidth; 
	
	var windowWidth = 800; 
	if(jQuery(window).width()){
		windowWidth = jQuery(window).width();
	}
	var scale = windowWidth/oWidth;
	var height = db[selector].oHeight*scale;
	
	if(height<=310){
		scale = 310/height;
	}

	db[selector].scale=scale; 
	scaleSVG($svg,selector);
}

function scaleSVG($svg, selector ){
	updateSvgDim($svg,selector);
	updateNavigatorInfo($svg,selector);
}


function updateSvgDim($svg,selector){
	var scale = db[selector].scale; 
	var oHeight = db[selector].oHeight; 
	var oWidth = db[selector].oWidth; 
	
	var width = Math.floor(oWidth*scale);
	var height = Math.floor(oHeight*scale);

	$svg.width(width );
	$svg.height(height );
}

function updateNavigatorInfo($svg,selector){
	var scale = db[selector].scale; 
	var sliderScale = Math.floor(scale*10);
	
	$svg.closest("div.rhizonik_svg")
		.find("div.svgNavigatorVal").text(scale.toFixed(2))
		.end()
		.find('div.svgNavigatorSlider').slider('option','value',sliderScale);
}


function moveSVGByDeltas($svg, dx,dy){
	var $cont = $svg.parent();
	var mleft = trimDim( $cont.css("left")) -dx;
	var mtop = trimDim( $cont.css("top")) -dy;
	
	mleft = Math.floor(mleft)+"px";
	mtop = Math.floor(mtop)+"px";
	
	$svg.parent().css({"left":mleft,"top":mtop});
}

function calculateDblClickScale(oldScale,zoomin){
	var newScale = oldScale*zoomin;
	if(newScale>=10){
		newScale=10;
	}
	if(newScale<=0.2){
		newScale=0.2
	} 
	return newScale;	
}