/*https://github.com/skidding/dragdealer*/ (function(root,factory){if(typeof define==="function"&&define.amd){define(factory)}else{root.Dragdealer=factory()}})(this,function(){var Dragdealer=function(wrapper,options){this.bindMethods();this.options=this.applyDefaults(options||{});this.wrapper=this.getWrapperElement(wrapper);if(!this.wrapper){return}this.handle=this.getHandleElement(this.wrapper,this.options.handleClass);if(!this.handle){return}this.init();this.bindEventListeners()};Dragdealer.prototype={defaults:{disabled:false,horizontal:true,vertical:false,slide:true,steps:0,snap:false,loose:false,speed:.1,xPrecision:0,yPrecision:0,handleClass:"handle"},init:function(){this.value={prev:[-1,-1],current:[this.options.x||0,this.options.y||0],target:[this.options.x||0,this.options.y||0]};this.offset={wrapper:[0,0],mouse:[0,0],prev:[-999999,-999999],current:[0,0],target:[0,0]};this.change=[0,0];this.stepRatios=this.calculateStepRatios();this.activity=false;this.dragging=false;this.tapping=false;this.reflow();if(this.options.disabled){this.disable()}},applyDefaults:function(options){for(var k in this.defaults){if(!options.hasOwnProperty(k)){options[k]=this.defaults[k]}}return options},getWrapperElement:function(wrapper){if(typeof wrapper=="string"){return document.getElementById(wrapper)}else{return wrapper}},getHandleElement:function(wrapper,handleClass){var childElements=wrapper.getElementsByTagName("div"),handleClassMatcher=new RegExp("(^|\\s)"+handleClass+"(\\s|$)"),i;for(i=0;i1){for(var i=0;i<=this.options.steps-1;i++){stepRatios[i]=i/(this.options.steps-1)}}return stepRatios},setWrapperOffset:function(){this.offset.wrapper=Position.get(this.wrapper)},calculateBounds:function(){var bounds={top:this.options.top||0,bottom:-(this.options.bottom||0)+this.wrapper.offsetHeight,left:this.options.left||0,right:-(this.options.right||0)+this.wrapper.offsetWidth};bounds.availWidth=bounds.right-bounds.left-this.handle.offsetWidth;bounds.availHeight=bounds.bottom-bounds.top-this.handle.offsetHeight;return bounds},calculateValuePrecision:function(){var xPrecision=this.options.xPrecision||Math.abs(this.bounds.availWidth),yPrecision=this.options.yPrecision||Math.abs(this.bounds.availHeight);return[xPrecision?1/xPrecision:0,yPrecision?1/yPrecision:0]},bindMethods:function(){this.onHandleMouseDown=bind(this.onHandleMouseDown,this);this.onHandleTouchStart=bind(this.onHandleTouchStart,this);this.onDocumentMouseMove=bind(this.onDocumentMouseMove,this);this.onWrapperTouchMove=bind(this.onWrapperTouchMove,this);this.onWrapperMouseDown=bind(this.onWrapperMouseDown,this);this.onWrapperTouchStart=bind(this.onWrapperTouchStart,this);this.onDocumentMouseUp=bind(this.onDocumentMouseUp,this);this.onDocumentTouchEnd=bind(this.onDocumentTouchEnd,this);this.onHandleClick=bind(this.onHandleClick,this);this.onWindowResize=bind(this.onWindowResize,this)},bindEventListeners:function(){addEventListener(this.handle,"mousedown",this.onHandleMouseDown);addEventListener(this.handle,"touchstart",this.onHandleTouchStart);addEventListener(document,"mousemove",this.onDocumentMouseMove);addEventListener(this.wrapper,"touchmove",this.onWrapperTouchMove);addEventListener(this.wrapper,"mousedown",this.onWrapperMouseDown);addEventListener(this.wrapper,"touchstart",this.onWrapperTouchStart);addEventListener(document,"mouseup",this.onDocumentMouseUp);addEventListener(document,"touchend",this.onDocumentTouchEnd);addEventListener(this.handle,"click",this.onHandleClick);addEventListener(window,"resize",this.onWindowResize);var _this=this;this.interval=setInterval(function(){_this.animate()},25);this.animate(false,true)},unbindEventListeners:function(){removeEventListener(this.handle,"mousedown",this.onHandleMouseDown);removeEventListener(this.handle,"touchstart",this.onHandleTouchStart);removeEventListener(document,"mousemove",this.onDocumentMouseMove);removeEventListener(this.wrapper,"touchmove",this.onWrapperTouchMove);removeEventListener(this.wrapper,"mousedown",this.onWrapperMouseDown);removeEventListener(this.wrapper,"touchstart",this.onWrapperTouchStart);removeEventListener(document,"mouseup",this.onDocumentMouseUp);removeEventListener(document,"touchend",this.onDocumentTouchEnd);removeEventListener(this.handle,"click",this.onHandleClick);removeEventListener(window,"resize",this.onWindowResize);clearInterval(this.interval)},onHandleMouseDown:function(e){Cursor.refresh(e);preventEventDefaults(e);stopEventPropagation(e);this.activity=false;this.startDrag()},onHandleTouchStart:function(e){Cursor.refresh(e);stopEventPropagation(e);this.activity=false;this.startDrag()},onDocumentMouseMove:function(e){Cursor.refresh(e);if(this.dragging){this.activity=true}},onWrapperTouchMove:function(e){Cursor.refresh(e);if(!this.activity&&this.draggingOnDisabledAxis()){if(this.dragging){this.stopDrag()}return}preventEventDefaults(e);this.activity=true},onWrapperMouseDown:function(e){Cursor.refresh(e);preventEventDefaults(e);this.startTap()},onWrapperTouchStart:function(e){Cursor.refresh(e);preventEventDefaults(e);this.startTap()},onDocumentMouseUp:function(e){this.stopDrag();this.stopTap()},onDocumentTouchEnd:function(e){this.stopDrag();this.stopTap()},onHandleClick:function(e){if(this.activity){preventEventDefaults(e);stopEventPropagation(e)}},onWindowResize:function(e){this.reflow()},enable:function(){this.disabled=false;this.handle.className=this.handle.className.replace(/\s?disabled/g,"")},disable:function(){this.disabled=true;this.handle.className+=" disabled"},reflow:function(){this.setWrapperOffset();this.bounds=this.calculateBounds();this.valuePrecision=this.calculateValuePrecision();this.updateOffsetFromValue()},getStep:function(){return[this.getStepNumber(this.value.target[0]),this.getStepNumber(this.value.target[1])]},getValue:function(){return this.value.target},setStep:function(x,y,snap){this.setValue(this.options.steps&&x>1?(x-1)/(this.options.steps-1):0,this.options.steps&&y>1?(y-1)/(this.options.steps-1):0,snap)},setValue:function(x,y,snap){this.setTargetValue([x,y||0]);if(snap){this.groupCopy(this.value.current,this.value.target);this.updateOffsetFromValue();this.callAnimationCallback()}},startTap:function(){if(this.disabled){return}this.tapping=true;this.setWrapperOffset();this.setTargetValueByOffset([Cursor.x-this.offset.wrapper[0]-this.handle.offsetWidth/2,Cursor.y-this.offset.wrapper[1]-this.handle.offsetHeight/2])},stopTap:function(){if(this.disabled||!this.tapping){return}this.tapping=false;this.setTargetValue(this.value.current)},startDrag:function(){if(this.disabled){return}this.dragging=true;this.setWrapperOffset();this.offset.mouse=[Cursor.x-Position.get(this.handle)[0],Cursor.y-Position.get(this.handle)[1]]},stopDrag:function(){if(this.disabled||!this.dragging){return}this.dragging=false;var target=this.groupClone(this.value.current);if(this.options.slide){var ratioChange=this.change;target[0]+=ratioChange[0]*4;target[1]+=ratioChange[1]*4}this.setTargetValue(target)},callAnimationCallback:function(){var value=this.value.current;if(this.options.snap&&this.options.steps>1){value=this.getClosestSteps(value)}if(!this.groupCompare(value,this.value.prev)){if(typeof this.options.animationCallback=="function"){this.options.animationCallback.call(this,value[0],value[1])}this.groupCopy(this.value.prev,value)}},callTargetCallback:function(){if(typeof this.options.callback=="function"){this.options.callback.call(this,this.value.target[0],this.value.target[1])}},animate:function(direct,first){if(direct&&!this.dragging){return}if(this.dragging){var prevTarget=this.groupClone(this.value.target);var offset=[Cursor.x-this.offset.wrapper[0]-this.offset.mouse[0],Cursor.y-this.offset.wrapper[1]-this.offset.mouse[1]];this.setTargetValueByOffset(offset,this.options.loose);this.change=[this.value.target[0]-prevTarget[0],this.value.target[1]-prevTarget[1]]}if(this.dragging||first){this.groupCopy(this.value.current,this.value.target)}if(this.dragging||this.glide()||first){this.updateOffsetFromValue();this.callAnimationCallback()}},glide:function(){var diff=[this.value.target[0]-this.value.current[0],this.value.target[1]-this.value.current[1]];if(!diff[0]&&!diff[1]){return false}if(Math.abs(diff[0])>this.valuePrecision[0]||Math.abs(diff[1])>this.valuePrecision[1]){this.value.current[0]+=diff[0]*this.options.speed;this.value.current[1]+=diff[1]*this.options.speed}else{this.groupCopy(this.value.current,this.value.target)}return true},updateOffsetFromValue:function(){if(!this.options.snap){this.offset.current=this.getOffsetsByRatios(this.value.current)}else{this.offset.current=this.getOffsetsByRatios(this.getClosestSteps(this.value.current))}if(!this.groupCompare(this.offset.current,this.offset.prev)){this.renderHandlePosition();this.groupCopy(this.offset.prev,this.offset.current)}},renderHandlePosition:function(){if(this.options.horizontal){this.handle.style.left=String(this.offset.current[0])+"px"}if(this.options.vertical){this.handle.style.top=String(this.offset.current[1])+"px"}},setTargetValue:function(value,loose){var target=loose?this.getLooseValue(value):this.getProperValue(value);this.groupCopy(this.value.target,target);this.offset.target=this.getOffsetsByRatios(target);this.callTargetCallback()},setTargetValueByOffset:function(offset,loose){var value=this.getRatiosByOffsets(offset);var target=loose?this.getLooseValue(value):this.getProperValue(value);this.groupCopy(this.value.target,target);this.offset.target=this.getOffsetsByRatios(target)},getLooseValue:function(value){var proper=this.getProperValue(value);return[proper[0]+(value[0]-proper[0])/4,proper[1]+(value[1]-proper[1])/4]},getProperValue:function(value){var proper=this.groupClone(value);proper[0]=Math.max(proper[0],0);proper[1]=Math.max(proper[1],0);proper[0]=Math.min(proper[0],1);proper[1]=Math.min(proper[1],1);if(!this.dragging&&!this.tapping||this.options.snap){if(this.options.steps>1){proper=this.getClosestSteps(proper)}}return proper},getRatiosByOffsets:function(group){return[this.getRatioByOffset(group[0],this.bounds.availWidth,this.bounds.left),this.getRatioByOffset(group[1],this.bounds.availHeight,this.bounds.top)]},getRatioByOffset:function(offset,range,padding){return range?(offset-padding)/range:0},getOffsetsByRatios:function(group){return[this.getOffsetByRatio(group[0],this.bounds.availWidth,this.bounds.left),this.getOffsetByRatio(group[1],this.bounds.availHeight,this.bounds.top)]},getOffsetByRatio:function(ratio,range,padding){return Math.round(ratio*range)+padding},getStepNumber:function(value){return this.getClosestStep(value)*(this.options.steps-1)+1},getClosestSteps:function(group){return[this.getClosestStep(group[0]),this.getClosestStep(group[1])]},getClosestStep:function(value){var k=0;var min=1;for(var i=0;i<=this.options.steps-1;i++){if(Math.abs(this.stepRatios[i]-value)Cursor.yDiff||!this.options.vertical&&Cursor.yDiff>Cursor.xDiff}};var bind=function(fn,context){return function(){return fn.apply(context,arguments)}};var addEventListener=function(element,type,callback){if(element.addEventListener){element.addEventListener(type,callback,false)}else if(element.attachEvent){element.attachEvent("on"+type,callback)}};var removeEventListener=function(element,type,callback){if(element.removeEventListener){element.removeEventListener(type,callback,false)}else if(element.detachEvent){element.detachEvent("on"+type,callback)}};var preventEventDefaults=function(e){if(!e){e=window.event}if(e.preventDefault){e.preventDefault()}e.returnValue=false};var stopEventPropagation=function(e){if(!e){e=window.event}if(e.stopPropagation){e.stopPropagation()}e.cancelBubble=true};var Cursor={x:0,y:0,xDiff:0,yDiff:0,refresh:function(e){if(!e){e=window.event}if(e.type=="mousemove"){this.set(e)}else if(e.touches){this.set(e.touches[0])}},set:function(e){var lastX=this.x,lastY=this.y;if(e.pageX||e.pageY){this.x=e.pageX;this.y=e.pageY}else if(e.clientX||e.clientY){this.x=e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;this.y=e.clientY+document.body.scrollTop+document.documentElement.scrollTop}this.xDiff=Math.abs(this.x-lastX);this.yDiff=Math.abs(this.y-lastY)}};var Position={get:function(obj){var curleft=0,curtop=0;if(obj.offsetParent){do{curleft+=obj.offsetLeft;curtop+=obj.offsetTop}while(obj=obj.offsetParent)}return[curleft,curtop]}};return Dragdealer}); $(document).ready(function(){ //set defaults $("#plan-holder").text('Personal Plan:'); $("#device-holder").text('0-3 Devices'); $(".info-price").html('$ 0 / month'); $(".annual-price").html('$0'); new Dragdealer('pr-slider', { animationCallback: function(x, y) { var slider_value = ((Math.round(x * 100))); //$("#pr-slider .value").text(slider_value); var stripe_width = slider_value+1; $(".stripe").css("width", ""+stripe_width+"%"); //set personal if(slider_value > 0 && slider_value < 6){ $("#plan-holder").text('Personal Plan:'); $("#device-holder").text('0-3 Devices'); $(".info-price").html('$ 0 / month'); $("#green-highlight").hide(); } //set basic if(slider_value > 5 && slider_value < 37){ $("#plan-holder").text('Basic Plan:'); $("#orange-highlight").hide(); $("#green-highlight").show(); $("#green-highlight").css("width", ""+(slider_value+40.5)+"%"); if(slider_value > 5){ $(".info-price").html('$ 29 / month'); $(".annual-price").html('$ 290'); $("#device-holder").text('Up to 10 Devices'); } if(slider_value > 11){ $(".info-price").html('$ 59 / month'); $(".annual-price").html('$ 590'); $("#device-holder").text('Up to 20 Devices'); } if(slider_value > 18){ $(".info-price").html('$ 89 / month'); $(".annual-price").html('$ 890'); $("#device-holder").text('Up to 30 Devices'); } if(slider_value > 24){ $(".info-price").html('$ 119 / month'); $(".annual-price").html('$ 1190'); $("#device-holder").text('Up to 40 Devices'); } if(slider_value > 31){ $(".info-price").html('$ 149 / month'); $(".annual-price").html('$ 1490'); $("#device-holder").text('Up to 50 Devices'); } } //set business if(slider_value > 38 && slider_value < 83){ $("#plan-holder").text('Business Plan:'); $("#green-highlight").css("width", "314px"); $("#orange-highlight").show(); $("#blue-highlight").hide(); /* if(slider_value > 38){ $(".info-price").html('$ 249 / month'); $(".annual-price").html('$ 2490'); $("#device-holder").text('Up to 50 Devices'); }*/ if(slider_value > 38){ $(".info-price").html('$ 359 / month'); $(".annual-price").html('$ 3590'); $("#device-holder").text('Up to 75 Devices'); } if(slider_value < 40){ $("#orange-highlight").hide(); } if(slider_value > 40){ $("#orange-highlight").css("width", ""+(slider_value/4.8)+"%"); } if(slider_value > 44){ $(".info-price").html('$ 579 / month'); $(".annual-price").html('$ 5790'); $("#device-holder").text('Up to 125 Devices'); $("#orange-highlight").css("width", ""+(slider_value/2.5)+"%"); } if(slider_value > 50){ $("#orange-highlight").css("width", ""+(slider_value/1.7)+"%"); } if(slider_value > 57){ $(".info-price").html('$ 799 / month'); $(".annual-price").html('$ 7990'); $("#device-holder").text('Up to 175 Devices'); } if(slider_value > 68){ $("#orange-highlight").css("width", ""+(slider_value/1.6)+"%"); } if(slider_value > 70){ $(".info-price").html('$ 999 / month'); $(".annual-price").html('$ 9990'); $("#device-holder").text('Up to 225 Devices'); } } //set enterprise if(slider_value > 83){ $("#plan-holder").text('Enterprise Plan:'); $("#orange-highlight").css("width", "433px"); if(slider_value > 84){ $("#blue-highlight").css("width", ""+(slider_value/24)+"%"); $("#blue-highlight").show(); } if(slider_value > 88){ $("#blue-highlight").css("width", ""+(slider_value/10)+"%"); } if(slider_value > 93){ $("#blue-highlight").css("width", ""+(slider_value/8)+"%"); } if(slider_value > 97){ $("#blue-highlight").css("width", ""+(slider_value/6)+"%"); } $(".info-price").html('Contact us'); $(".annual-price").html(''); $("#device-holder").text('Unlimited Devices'); } } }); }); body{ background: #edebeb; } .range-holder{ margin: 3em auto; padding: 200px 0 70px 0; width: 960px; background: url("https://dl.dropboxusercontent.com/u/4277345/codepen/pr-plan-scale.png") bottom center no-repeat; } .dragdealer { position: relative; height: 30px; background: #FFF; border-radius: 8px; border: 1px solid #a7a7a7; } .dragdealer .handle { position: absolute; top: 0; left: 0; } .stripe{ background: #ddd url("https://dl.dropboxusercontent.com/u/4277345/codepen/stripe-bg.png") top left repeat; position: absolute; top: 0; left: 0; margin: 3px; height: 24px; border-radius: 8px; } #green-highlight{position: absolute; top:0; left: 67px; height: 24px; opacity: .5; background: #8dc63f; display: none;} #orange-highlight{position: absolute; top:0; left: 381px; height: 24px; opacity: .5; background: #e07c00; display: none;} #blue-highlight{position: absolute; top:0; left: 814px; height: 24px; opacity: .5; background: #008da8; display: none;} .square{ position: absolute; top: 0; left: 0; margin-top: -13px; margin-left: -10px; cursor: pointer; width: 50px; height: 37px; background: #505054; border-radius: 8px; color: #FFF; font-size: 14px; line-height: 30px; text-align: center; padding-top: 13px; } .menu-line{width: 50%; margin: 2px auto; height: 5px; background: #FFF; display: block;} .infobox{ position: absolute; top: 0; left: 0; margin-top: -235px; margin-left: -117px; width: 260px; height: 190px; background: #FFF; padding: 0px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; border: #008da8 solid 2px; } .infobox:after { content: ''; position: absolute; border-style: solid; border-width: 20px 23px 0; border-color: #FFFFFF transparent; display: block; width: 0; z-index: 1; bottom: -20px; left: 107px; } .infobox:before { content: ''; position: absolute; border-style: solid; border-width: 21px 24px 0; border-color: #008da8 transparent; display: block; width: 0; z-index: 0; bottom: -23px; left: 106px; } .titlebar{ background: #008da8; color: #FFF; padding: .5em; line-height: 1.5em; font-size: 15px; } #plan-holder{font-weight: bold;} .innerbox{ padding: 1em; } .info-price{color: #e07c00; font-size: 33px; line-height: 1.8em;} .annual-label{ color: #505054; font-size: 14px; font-weight: bold; width: 110px; line-height: 1.8em;} .annual-price{color: #939393; font-size: 17px; width: 110px;}
default logo

Americall

Seattle NOC Form – Enter sales inquiries:

You have selected no fields



Contact Us Now

+1 212 319 1717  
[]
1 Step 1
Nameyour full name
Telephonewith country code
MessageHow Can We Help You?
0 /
Previous
Next

Or Contact a Local Expert:

Jubin Pejman - Managing Director - US Sales

For US Sales Email Jubin at: jubin@fcm360.com

Jubin has over 20 years of E-Commerce and application hosting and development experience. In his roles at LTCM, JP Morgan’s Lab Morgan, GFI Group and Check Free Investment Services he built trading applications for some of the world’s largest financial companies. Jubin has helped thousands of organizations with their complex hosting requirements over the past decade.

Peter Heales - Managing Director - EMEA

For EMEA Sales Email Peter at: pheales@fcm360.com

Peter has over 30 years experience in the business. As former head of derivatives operations EMEA at Bear Stearns, European Chairman of the Futures Industry Association and other leadership roles at JP Morgan and ICAP Peter helped numerous clients achieve their goals and run successful operations.