<script type="text/javascript">
var mouseDownPosition = 0;
var mouseDownValue = -1;

function slider_Loaded(sender, args) {
    slider_SetValue(sender.findName("Mslider_SkewAngleX"), 100);
    slider_SetValue(sender.findName("Mslider_SkewAngleY"), 100);
    slider_SetValue(sender.findName("Mslider_SkewCenterX"), 100);
    slider_SetValue(sender.findName("Mslider_SkewCenterY"), 100);
    slider_SetValue(sender.findName("Mslider_ScaleScaleX"), 110);
    slider_SetValue(sender.findName("Mslider_ScaleScaleY"), 110);
    slider_SetValue(sender.findName("Mslider_ScaleCenterX"), 100);
    slider_SetValue(sender.findName("Mslider_ScaleCenterY"), 100);
    slider_SetValue(sender.findName("Mslider_CanvasLeft"), 100);
    slider_SetValue(sender.findName("Mslider_CanvasTop"), 100);

    slider_SetValue(sender.findName("Rslider_SkewAngleX"), 100);
    slider_SetValue(sender.findName("Rslider_SkewAngleY"), 100);
    slider_SetValue(sender.findName("Rslider_SkewCenterX"), 100);
    slider_SetValue(sender.findName("Rslider_SkewCenterY"), 100);
    slider_SetValue(sender.findName("Rslider_ScaleScaleX"), 110);
    slider_SetValue(sender.findName("Rslider_ScaleScaleY"), 110);
    slider_SetValue(sender.findName("Rslider_ScaleCenterX"), 100);
    slider_SetValue(sender.findName("Rslider_ScaleCenterY"), 100);
    slider_SetValue(sender.findName("Rslider_CanvasLeft"), 100);
    slider_SetValue(sender.findName("Rslider_CanvasTop"), 100);

    slider_SetValue(sender.findName("Oslider_GradientStop1"), 0);
    slider_SetValue(sender.findName("Oslider_GradientStop2"), 1);
}

function slider_MouseLeftButtonDown(sender, args) {
    var coordinate = args.getPosition(null).x - sender["Canvas.Left"];
    slider_SetValue(sender, coordinate);
}

function slider_thumb_MouseLeftButtonDown(sender, args) {
   switch (sender.name) {
   case "Mslider_thumb_SkewAngleX":
      var slider = sender.findName("Mslider_SkewAngleX");
      break;

   case "Mslider_thumb_SkewAngleY":
      var slider = sender.findName("Mslider_SkewAngleY");
      break;

   case "Mslider_thumb_SkewCenterX":
      var slider = sender.findName("Mslider_SkewCenterX");
      break;

   case "Mslider_thumb_SkewCenterY":
      var slider = sender.findName("Mslider_SkewCenterY");
      break;

   case "Mslider_thumb_ScaleScaleX":
      var slider = sender.findName("Mslider_ScaleScaleX");
      break;

   case "Mslider_thumb_ScaleScaleY":
      var slider = sender.findName("Mslider_ScaleScaleY");
      break;

   case "Mslider_thumb_ScaleCenterX":
      var slider = sender.findName("Mslider_ScaleCenterX");
      break;

   case "Mslider_thumb_ScaleCenterY":
      var slider = sender.findName("Mslider_ScaleCenterY");
      break;

   case "Mslider_thumb_CanvasLeft":
      var slider = sender.findName("Mslider_CanvasLeft");
      break;

   case "Mslider_thumb_CanvasTop":
      var slider = sender.findName("Mslider_CanvasTop");
      break;

   case "Rslider_thumb_SkewAngleX":
      var slider = sender.findName("Rslider_SkewAngleX");
      break;

   case "Rslider_thumb_SkewAngleY":
      var slider = sender.findName("Rslider_SkewAngleY");
      break;

   case "Rslider_thumb_SkewCenterX":
      var slider = sender.findName("Rslider_SkewCenterX");
      break;

   case "Rslider_thumb_SkewCenterY":
      var slider = sender.findName("Rslider_SkewCenterY");
      break;

   case "Rslider_thumb_ScaleScaleX":
      var slider = sender.findName("Rslider_ScaleScaleX");
      break;

   case "Rslider_thumb_ScaleScaleY":
      var slider = sender.findName("Rslider_ScaleScaleY");
      break;

   case "Rslider_thumb_ScaleCenterX":
      var slider = sender.findName("Rslider_ScaleCenterX");
      break;

   case "Rslider_thumb_ScaleCenterY":
      var slider = sender.findName("Rslider_ScaleCenterY");
      break;

   case "Rslider_thumb_CanvasLeft":
      var slider = sender.findName("Rslider_CanvasLeft");
      break;

   case "Rslider_thumb_CanvasTop":
      var slider = sender.findName("Rslider_CanvasTop");
      break;

   case "Oslider_thumb_GradientStop1":
      var slider = sender.findName("Oslider_GradientStop1");
      break;

   case "Oslider_thumb_GradientStop2":
      var slider = sender.findName("Oslider_GradientStop2");
      break;

   }

    sender.captureMouse();
    mouseDownValue = slider_GetValue(slider);
    mouseDownPosition = args.getPosition(null).x;
}

function slider_thumb_MouseLeftButtonUp(sender, args) {
    sender.releaseMouseCapture();
    mouseDownValue = -1;
}

function slider_thumb_MouseMove(sender, args) {
   switch (sender.name) {
   case "Mslider_thumb_SkewAngleX":
      var slider = sender.findName("Mslider_SkewAngleX");
      break;

   case "Mslider_thumb_SkewAngleY":
      var slider = sender.findName("Mslider_SkewAngleY");
      break;

   case "Mslider_thumb_SkewCenterX":
      var slider = sender.findName("Mslider_SkewCenterX");
      break;

   case "Mslider_thumb_SkewCenterY":
      var slider = sender.findName("Mslider_SkewCenterY");
      break;

   case "Mslider_thumb_ScaleScaleX":
      var slider = sender.findName("Mslider_ScaleScaleX");
      break;

   case "Mslider_thumb_ScaleScaleY":
      var slider = sender.findName("Mslider_ScaleScaleY");
      break;

   case "Mslider_thumb_ScaleCenterX":
      var slider = sender.findName("Mslider_ScaleCenterX");
      break;

   case "Mslider_thumb_ScaleCenterY":
      var slider = sender.findName("Mslider_ScaleCenterY");
      break;

   case "Mslider_thumb_CanvasLeft":
      var slider = sender.findName("Mslider_CanvasLeft");
      break;

   case "Mslider_thumb_CanvasTop":
      var slider = sender.findName("Mslider_CanvasTop");
      break;

   case "Rslider_thumb_SkewAngleX":
      var slider = sender.findName("Rslider_SkewAngleX");
      break;

   case "Rslider_thumb_SkewAngleY":
      var slider = sender.findName("Rslider_SkewAngleY");
      break;

   case "Rslider_thumb_SkewCenterX":
      var slider = sender.findName("Rslider_SkewCenterX");
      break;

   case "Rslider_thumb_SkewCenterY":
      var slider = sender.findName("Rslider_SkewCenterY");
      break;

   case "Rslider_thumb_ScaleScaleX":
      var slider = sender.findName("Rslider_ScaleScaleX");
      break;

   case "Rslider_thumb_ScaleScaleY":
      var slider = sender.findName("Rslider_ScaleScaleY");
      break;

   case "Rslider_thumb_ScaleCenterX":
      var slider = sender.findName("Rslider_ScaleCenterX");
      break;

   case "Rslider_thumb_ScaleCenterY":
      var slider = sender.findName("Rslider_ScaleCenterY");
      break;

   case "Rslider_thumb_CanvasLeft":
      var slider = sender.findName("Rslider_CanvasLeft");
      break;

   case "Rslider_thumb_CanvasTop":
      var slider = sender.findName("Rslider_CanvasTop");
      break;

   case "Oslider_thumb_GradientStop1":
      var slider = sender.findName("Oslider_GradientStop1");
      break;

   case "Oslider_thumb_GradientStop2":
      var slider = sender.findName("Oslider_GradientStop2");
      break;

   }
    if (mouseDownValue != -1) {
        var newValue = mouseDownValue
        + (args.getPosition(null).x - mouseDownPosition);
        
        slider_SetValue(slider, newValue);
    }
}

function slider_GetValue(sender) {
   switch (sender.name) {
   case "Mslider_SkewAngleX":
      var thumb = sender.findName("Mslider_thumb_SkewAngleX");
      break;

   case "Mslider_SkewAngleY":
      var thumb = sender.findName("Mslider_thumb_SkewAngleY");
      break;

   case "Mslider_SkewCenterX":
      var thumb = sender.findName("Mslider_thumb_SkewCenterX");
      break;

   case "Mslider_SkewCenterY":
      var thumb = sender.findName("Mslider_thumb_SkewCenterY");
      break;

   case "Mslider_ScaleScaleX":
      var thumb = sender.findName("Mslider_thumb_ScaleScaleX");
      break;

   case "Mslider_ScaleScaleY":
      var thumb = sender.findName("Mslider_thumb_ScaleScaleY");
      break;

   case "Mslider_ScaleCenterX":
      var thumb = sender.findName("Mslider_thumb_ScaleCenterX");
      break;

   case "Mslider_ScaleCenterY":
      var thumb = sender.findName("Mslider_thumb_ScaleCenterY");
      break;

   case "Mslider_CanvasLeft":
      var thumb = sender.findName("Mslider_thumb_CanvasLeft");
      break;

   case "Mslider_CanvasTop":
      var thumb = sender.findName("Mslider_thumb_CanvasTop");
      break;

   case "Rslider_SkewAngleX":
      var thumb = sender.findName("Rslider_thumb_SkewAngleX");
      break;

   case "Rslider_SkewAngleY":
      var thumb = sender.findName("Rslider_thumb_SkewAngleY");
      break;

   case "Rslider_SkewCenterX":
      var thumb = sender.findName("Rslider_thumb_SkewCenterX");
      break;

   case "Rslider_SkewCenterY":
      var thumb = sender.findName("Rslider_thumb_SkewCenterY");
      break;

   case "Rslider_ScaleScaleX":
      var thumb = sender.findName("Rslider_thumb_ScaleScaleX");
      break;

   case "Rslider_ScaleScaleY":
      var thumb = sender.findName("Rslider_thumb_ScaleScaleY");
      break;

   case "Rslider_ScaleCenterX":
      var thumb = sender.findName("Rslider_thumb_ScaleCenterX");
      break;

   case "Rslider_ScaleCenterY":
      var thumb = sender.findName("Rslider_thumb_ScaleCenterY");
      break;

   case "Rslider_CanvasLeft":
      var thumb = sender.findName("Rslider_thumb_CanvasLeft");
      break;

   case "Rslider_CanvasTop":
      var thumb = sender.findName("Rslider_thumb_CanvasTop");
      break;

   case "Oslider_GradientStop1":
      var thumb = sender.findName("Oslider_thumb_GradientStop1");
      break;

   case "Oslider_GradientStop2":
      var thumb = sender.findName("Oslider_thumb_GradientStop2");
      break;

   }
    return thumb["Canvas.Left"] + .5 * thumb.width;
}

function slider_SetValue(sender, newValue) {
    if (newValue > sender.width) {
        newValue = sender.width;
    }
    if (newValue < 0) {
        newValue = 0;
    }

    switch (sender.name) {
    case "Mslider_SkewAngleX":
       {
       var thumb = sender.findName("Mslider_thumb_SkewAngleX");
       thumb["Canvas.Left"] = newValue - .5 * thumb.width;

       var Pos = thumb["Canvas.Left"] + .5*thumb.width -100;

       sender.findName("MsliderPos_SkewAngleX").Text=Pos.toString();
       sender.findName("MainSkewTransform").AngleX=Pos;
       break;
       }

    case "Mslider_SkewAngleY":
       {
       var thumb = sender.findName("Mslider_thumb_SkewAngleY");
       thumb["Canvas.Left"] = newValue - .5 * thumb.width;

       var Pos = thumb["Canvas.Left"] + .5*thumb.width -100;

       sender.findName("MsliderPos_SkewAngleY").Text=Pos.toString();
       sender.findName("MainSkewTransform").AngleY=Pos;
       break;
       }

    case "Mslider_SkewCenterX":
       {
       var thumb = sender.findName("Mslider_thumb_SkewCenterX");
       thumb["Canvas.Left"] = newValue - .5 * thumb.width;

       var Pos = (thumb["Canvas.Left"] + .5*thumb.width)/2-50;

       sender.findName("MsliderPos_SkewCenterX").Text=Pos.toString();
       sender.findName("MainSkewTransform").CenterX=Pos;
       break;
       }

    case "Mslider_SkewCenterY":
       {
       var thumb = sender.findName("Mslider_thumb_SkewCenterY");
       thumb["Canvas.Left"] = newValue - .5 * thumb.width;

       var Pos = (thumb["Canvas.Left"] + .5*thumb.width)/2-50;

       sender.findName("MsliderPos_SkewCenterY").Text=Pos.toString();
       sender.findName("MainSkewTransform").CenterY=Pos;
       break;
       }

    case "Mslider_ScaleScaleX":
       {
       var thumb = sender.findName("Mslider_thumb_ScaleScaleX");
       thumb["Canvas.Left"] = newValue - .5 * thumb.width;

       var Pos = (thumb["Canvas.Left"] + .5*thumb.width)/10-10;

       sender.findName("MsliderPos_ScaleScaleX").Text=Pos.toString();
       sender.findName("MainScaleTransform").ScaleX=Pos;
       break;
       }

    case "Mslider_ScaleScaleY":
       {
       var thumb = sender.findName("Mslider_thumb_ScaleScaleY");
       thumb["Canvas.Left"] = newValue - .5 * thumb.width;

       var Pos = (thumb["Canvas.Left"] + .5*thumb.width)/10-10;

       sender.findName("MsliderPos_ScaleScaleY").Text=Pos.toString();
       sender.findName("MainScaleTransform").ScaleY=Pos;
       break;
       }

    case "Mslider_ScaleCenterX":
       {
       var thumb = sender.findName("Mslider_thumb_ScaleCenterX");
       thumb["Canvas.Left"] = newValue - .5 * thumb.width;

       var Pos = (thumb["Canvas.Left"] + .5*thumb.width)/2-50;

       sender.findName("MsliderPos_ScaleCenterX").Text=Pos.toString();
       sender.findName("MainScaleTransform").CenterX=Pos;
       break;
       }

    case "Mslider_ScaleCenterY":
       {
       var thumb = sender.findName("Mslider_thumb_ScaleCenterY");
       thumb["Canvas.Left"] = newValue - .5 * thumb.width;

       var Pos = (thumb["Canvas.Left"] + .5*thumb.width)/2-50;

       sender.findName("MsliderPos_ScaleCenterY").Text=Pos.toString();
       sender.findName("MainScaleTransform").CenterY=Pos;
       break;
       }

    case "Mslider_CanvasLeft":
       {
       var thumb = sender.findName("Mslider_thumb_CanvasLeft");
       thumb["Canvas.Left"] = newValue - .5 * thumb.width;

       var Pos = (thumb["Canvas.Left"] + .5*thumb.width)*4.5;

       sender.findName("MsliderPos_CanvasLeft").Text=Pos.toString();
       sender.findName("MainImageCanvas")["Canvas.Left"]=Pos;
       break;
       }

    case "Mslider_CanvasTop":
       {
       var thumb = sender.findName("Mslider_thumb_CanvasTop");
       thumb["Canvas.Left"] = newValue - .5 * thumb.width;

       var Pos = (thumb["Canvas.Left"] + .5*thumb.width)*3;

       sender.findName("MsliderPos_CanvasTop").Text=Pos.toString();
       sender.findName("MainImageCanvas")["Canvas.Top"]=Pos;
       break;
       }

    case "Rslider_SkewAngleX":
       {
       var thumb = sender.findName("Rslider_thumb_SkewAngleX");
       thumb["Canvas.Left"] = newValue - .5 * thumb.width;

       var Pos = thumb["Canvas.Left"] + .5*thumb.width-100;

       sender.findName("RsliderPos_SkewAngleX").Text=Pos.toString();
       sender.findName("ReflectionSkewTransform").AngleX=Pos;
       break;
       }

    case "Rslider_SkewAngleY":
       {
       var thumb = sender.findName("Rslider_thumb_SkewAngleY");
       thumb["Canvas.Left"] = newValue - .5 * thumb.width;

       var Pos = thumb["Canvas.Left"] + .5*thumb.width-100;

       sender.findName("RsliderPos_SkewAngleY").Text=Pos.toString();
       sender.findName("ReflectionSkewTransform").AngleY=Pos;
       break;
       }

    case "Rslider_SkewCenterX":
       {
       var thumb = sender.findName("Rslider_thumb_SkewCenterX");
       thumb["Canvas.Left"] = newValue - .5 * thumb.width;

       var Pos = (thumb["Canvas.Left"] + .5*thumb.width)/2-50;

       sender.findName("RsliderPos_SkewCenterX").Text=Pos.toString();
       sender.findName("ReflectionSkewTransform").CenterX=Pos;
       break;
       }

    case "Rslider_SkewCenterY":
       {
       var thumb = sender.findName("Rslider_thumb_SkewCenterY");
       thumb["Canvas.Left"] = newValue - .5 * thumb.width;

       var Pos = (thumb["Canvas.Left"] + .5*thumb.width)/2-50;

       sender.findName("RsliderPos_SkewCenterY").Text=Pos.toString();
       sender.findName("ReflectionSkewTransform").CenterY=Pos;
       break;
       }

    case "Rslider_ScaleScaleX":
       {
       var thumb = sender.findName("Rslider_thumb_ScaleScaleX");
       thumb["Canvas.Left"] = newValue - .5 * thumb.width;

       var Pos = (thumb["Canvas.Left"] + .5*thumb.width)/10-10;

       sender.findName("RsliderPos_ScaleScaleX").Text=Pos.toString();
       sender.findName("ReflectionScaleTransform").ScaleX=Pos;
       break;
       }

    case "Rslider_ScaleScaleY":
       {
       var thumb = sender.findName("Rslider_thumb_ScaleScaleY");
       thumb["Canvas.Left"] = newValue - .5 * thumb.width;

       var Pos = (thumb["Canvas.Left"] + .5*thumb.width)/10-10;

       sender.findName("RsliderPos_ScaleScaleY").Text=Pos.toString();
       sender.findName("ReflectionScaleTransform").ScaleY=Pos;
       break;
       }

    case "Rslider_ScaleCenterX":
       {
       var thumb = sender.findName("Rslider_thumb_ScaleCenterX");
       thumb["Canvas.Left"] = newValue - .5 * thumb.width;

       var Pos = (thumb["Canvas.Left"] + .5*thumb.width)/2-50;

       sender.findName("RsliderPos_ScaleCenterX").Text=Pos.toString();
       sender.findName("ReflectionScaleTransform").CenterX=Pos;
       break;
       }

    case "Rslider_ScaleCenterY":
       {
       var thumb = sender.findName("Rslider_thumb_ScaleCenterY");
       thumb["Canvas.Left"] = newValue - .5 * thumb.width;

       var Pos = (thumb["Canvas.Left"] + .5*thumb.width)/2-50;

       sender.findName("RsliderPos_ScaleCenterY").Text=Pos.toString();
       sender.findName("ReflectionScaleTransform").CenterY=Pos;
       break;
       }

    case "Rslider_CanvasLeft":
       {
       var thumb = sender.findName("Rslider_thumb_CanvasLeft");
       thumb["Canvas.Left"] = newValue - .5 * thumb.width;

       var Pos = (thumb["Canvas.Left"] + .5*thumb.width)*4.5;

       sender.findName("RsliderPos_CanvasLeft").Text=Pos.toString();
       sender.findName("ReflectionImageCanvas")["Canvas.Left"]=Pos;
       break;
       }

    case "Rslider_CanvasTop":
       {
       var thumb = sender.findName("Rslider_thumb_CanvasTop");
       thumb["Canvas.Left"] = newValue - .5 * thumb.width;

       var Pos = (thumb["Canvas.Left"] + .5*thumb.width)*3;

       sender.findName("RsliderPos_CanvasTop").Text=Pos.toString();
       sender.findName("ReflectionImageCanvas")["Canvas.Top"]=Pos;
       break;
       }

    case "Oslider_GradientStop1":
       {
       var thumb = sender.findName("Oslider_thumb_GradientStop1");
       thumb["Canvas.Left"] = newValue - .5 * thumb.width;

       var Pos = (thumb["Canvas.Left"] + .5*thumb.width)/200;

       sender.findName("OsliderPos_GradientStop1").Text=Pos.toString();
       sender.findName("ReflGradientStop1").Offset=Pos;
       break;
       }

    case "Oslider_GradientStop2":
       {
       var thumb = sender.findName("Oslider_thumb_GradientStop2");
       thumb["Canvas.Left"] = newValue - .5 * thumb.width;

       var Pos = (thumb["Canvas.Left"] + .5*thumb.width)/200;

       sender.findName("OsliderPos_GradientStop2").Text=Pos.toString();
       sender.findName("ReflGradientStop2").Offset=Pos;
       break;
       }

    }

}

function MainCheckBox(sender, args){
   <!-- 95 is checked -->
   if (sender.findName("MainCheckbox").Indices=="95")
   {
      sender.findName("MainCheckbox").Indices="133";
      sender.findName("MainImageCanvas").Visibility="Collapsed"
   }
   else
   {
      sender.findName("MainCheckbox").Indices="95";
      sender.findName("MainImageCanvas").Visibility="Visible";
   }
}

function ReflectionCheckBox(sender, args){
   <!-- 95 is checked -->
   if (sender.findName("ReflectionCheckBox").Indices=="95")
   {
      sender.findName("ReflectionCheckBox").Indices="133";
      sender.findName("ReflectionImageCanvas").Visibility="Collapsed";
   }
   else
   {
      sender.findName("ReflectionCheckBox").Indices="95";
      sender.findName("ReflectionImageCanvas").Visibility="Visible";
   }
}

function ControlsCheckBox(sender, args){
   <!-- 95 is checked -->
   if (sender.findName("ControlsCheckBox").Indices=="95")
   {
      sender.findName("ControlsCheckBox").Indices="133";
      sender.findName("Rslider_SkewAngleX").Visibility="Collapsed";
      sender.findName("Rslider_SkewAngleY").Visibility="Collapsed";
      sender.findName("Rslider_SkewCenterX").Visibility="Collapsed";
      sender.findName("Rslider_SkewCenterY").Visibility="Collapsed";
      sender.findName("Rslider_ScaleScaleX").Visibility="Collapsed";
      sender.findName("Rslider_ScaleScaleY").Visibility="Collapsed";
      sender.findName("Rslider_ScaleCenterX").Visibility="Collapsed";
      sender.findName("Rslider_ScaleCenterY").Visibility="Collapsed";
      sender.findName("Rslider_CanvasLeft").Visibility="Collapsed";
      sender.findName("Rslider_CanvasTop").Visibility="Collapsed";
      sender.findName("Mslider_SkewAngleX").Visibility="Collapsed";
      sender.findName("Mslider_SkewAngleY").Visibility="Collapsed";
      sender.findName("Mslider_SkewCenterX").Visibility="Collapsed";
      sender.findName("Mslider_SkewCenterY").Visibility="Collapsed";
      sender.findName("Mslider_ScaleScaleX").Visibility="Collapsed";
      sender.findName("Mslider_ScaleScaleY").Visibility="Collapsed";
      sender.findName("Mslider_ScaleCenterX").Visibility="Collapsed";
      sender.findName("Mslider_ScaleCenterY").Visibility="Collapsed";
      sender.findName("Mslider_CanvasLeft").Visibility="Collapsed";
      sender.findName("Mslider_CanvasTop").Visibility="Collapsed";
      sender.findName("Oslider_GradientStop1").Visibility="Collapsed";
      sender.findName("Oslider_GradientStop2").Visibility="Collapsed";
   }
   else
   {
      sender.findName("ControlsCheckBox").Indices="95";
      sender.findName("Rslider_SkewAngleX").Visibility="Visible";
      sender.findName("Rslider_SkewAngleY").Visibility="Visible";
      sender.findName("Rslider_SkewCenterX").Visibility="Visible";
      sender.findName("Rslider_SkewCenterY").Visibility="Visible";
      sender.findName("Rslider_ScaleScaleX").Visibility="Visible";
      sender.findName("Rslider_ScaleScaleY").Visibility="Visible";
      sender.findName("Rslider_ScaleCenterX").Visibility="Visible";
      sender.findName("Rslider_ScaleCenterY").Visibility="Visible";
      sender.findName("Rslider_CanvasLeft").Visibility="Visible";
      sender.findName("Rslider_CanvasTop").Visibility="Visible";
      sender.findName("Mslider_SkewAngleX").Visibility="Visible";
      sender.findName("Mslider_SkewAngleY").Visibility="Visible";
      sender.findName("Mslider_SkewCenterX").Visibility="Visible";
      sender.findName("Mslider_SkewCenterY").Visibility="Visible";
      sender.findName("Mslider_ScaleScaleX").Visibility="Visible";
      sender.findName("Mslider_ScaleScaleY").Visibility="Visible";
      sender.findName("Mslider_ScaleCenterX").Visibility="Visible";
      sender.findName("Mslider_ScaleCenterY").Visibility="Visible";
      sender.findName("Mslider_CanvasLeft").Visibility="Visible";
      sender.findName("Mslider_CanvasTop").Visibility="Visible";
      sender.findName("Oslider_GradientStop1").Visibility="Visible";
      sender.findName("Oslider_GradientStop2").Visibility="Visible";

   }
}

var MainImagemouseDownPositionx = 0;
var MainImagemouseDownPositiony = 0;
var MainImagemouseDownValuex = -1;
var MainImagemouseDownValuey = -1;

var ReflImagemouseDownPositionx = 0;
var ReflImagemouseDownPositiony = 0;
var ReflImagemouseDownValuex = -1;
var ReflImagemouseDownValuey = -1;

function MainImage_MouseLeftButtonDown(sender, args) {
//   alert(sender.name+" captureMouse");
   sender.captureMouse();
   MainImagemouseDownValuex = Image_GetValueX(sender);
   MainImagemouseDownValuey = Image_GetValueY(sender);
   MainImagemouseDownPositionx = args.getPosition(null).x;
   MainImagemouseDownPositiony = args.getPosition(null).y;
//   alert(MainImagemouseDownValuex.toString()+MainImagemouseDownValuey.toString()+args.getPosition(null).x.toString()+args.getPosition(null).y.toString());
}

function Image_SetValueX(sender, newValue) {
//alert("SetValueX To:"+newValue.toString() + "sender.width: "+sender.["Canvas.Width"]);
//    if (newValue > sender.findName("MainImageCanvas").width) {
//        newValue = sender.findName("MainImageCanvas").width;
//    }
//alert("SetValueX To:"+newValue.toString());
    if (newValue < 0) {
        newValue = 0;
    }
//alert("SetValueX To:"+newValue.toString());


    switch (sender.name) {
    case "MainImageCanvas":
       {
//          alert(newValue.ToString());
       sender["Canvas.Left"] = newValue - .5 * sender.findName("MainImagePNG").width;
       sender.findName("MsliderPos_CanvasLeft").Text=sender["Canvas.Left"].toString();
       var thumb = sender.findName("Mslider_thumb_CanvasLeft");

       thumb["Canvas.Left"] = (sender["Canvas.Left"] - .5*thumb.width)/4.5;
       break;
       }

    case "ReflectionImageCanvas":
       {
       sender["Canvas.Left"] = newValue - .5 * sender.findName("ReflImagePNG").width;
       sender.findName("RsliderPos_CanvasLeft").Text=sender["Canvas.Left"].toString();
       var thumb = sender.findName("Rslider_thumb_CanvasLeft");

//       alert(thumb.name);

       thumb["Canvas.Left"] = (sender["Canvas.Left"] - .5*thumb.width)/4.5;
       break;
       }
    }
}

function Image_SetValueY(sender, newValue) {
    if (newValue < 0) {
        newValue = 0;
    }

    switch (sender.name) {
    case "MainImageCanvas":
       {
       sender["Canvas.Top"] = newValue - .5 * sender.findName("MainImagePNG").height;
       sender.findName("MsliderPos_CanvasTop").Text=sender["Canvas.Top"].toString();
       var thumb = sender.findName("Mslider_thumb_CanvasTop");

       thumb["Canvas.Left"] = (sender["Canvas.Top"] - .5*thumb.width)/4.5;
       break;
       }

    case "ReflectionImageCanvas":
       {
       sender["Canvas.Top"] = newValue - .5 * sender.findName("ReflImagePNG").height;
       sender.findName("RsliderPos_CanvasTop").Text=sender["Canvas.Top"].toString();
       var thumb = sender.findName("Rslider_thumb_CanvasTop");

       thumb["Canvas.Left"] = (sender["Canvas.Top"] - .5*thumb.width)/4.5;
       break;
       }
    }
}

function Image_GetValueX(sender, newValue){
   return sender["Canvas.Left"] + .5 * sender.findName("MainImagePNG").width;
}

function Image_GetValueY(sender, newValue){
   return sender["Canvas.Top"] + .5 * sender.findName("MainImagePNG").height;
}

function MainImage_MouseLeftButtonUp(sender, args) {
//   alert(sender.name+" releaseMouseCapture");
    sender.releaseMouseCapture();
    MainImagemouseDownValuex = -1;
    MainImagemouseDownValuey = -1;
}

function MainImage_MouseMove(sender, args){
   if (MainImagemouseDownValuex != -1) {
       var newValue = MainImagemouseDownValuex
       + (args.getPosition(null).x - MainImagemouseDownPositionx);

       Image_SetValueX(sender, newValue);
   }
   if (MainImagemouseDownValuey != -1) {
       var newValue = MainImagemouseDownValuey
       + (args.getPosition(null).y - MainImagemouseDownPositiony);

       Image_SetValueY(sender, newValue);
   }
}

function ReflImage_MouseLeftButtonDown(sender, args) {
   sender.captureMouse();
   ReflImagemouseDownValuex = ReflImage_GetValueX(sender);
   ReflImagemouseDownValuey = ReflImage_GetValueY(sender);
   ReflImagemouseDownPositionx = args.getPosition(null).x;
   ReflImagemouseDownPositiony = args.getPosition(null).y;
   //alert("here");
}



function ReflImage_GetValueX(sender, newValue){
   return sender["Canvas.Left"] + .5 * sender.findName("ReflImagePNG").width;
}

function ReflImage_GetValueY(sender, newValue){
   return sender["Canvas.Top"] + .5 * sender.findName("ReflImagePNG").height;
}

function ReflImage_MouseLeftButtonUp(sender, args) {
    sender.releaseMouseCapture();
    ReflImagemouseDownValuex = -1;
    ReflImagemouseDownValuey = -1;
}

function ReflImage_MouseMove(sender, args){
   if (ReflImagemouseDownValuex != -1) {
       var newValue = ReflImagemouseDownValuex
       + (args.getPosition(null).x - ReflImagemouseDownPositionx);
       Image_SetValueX(sender, newValue);
   }
   if (ReflImagemouseDownValuey != -1) {
       var newValue = ReflImagemouseDownValuey
       + (args.getPosition(null).y - ReflImagemouseDownPositiony);
       
       Image_SetValueY(sender, newValue);
   }
}

</script>

<Canvas  xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Loaded="slider_Loaded" >

   <Canvas>
      <Canvas x:Name="MainImageCanvas" Cursor="Hand" Visibility="Collapsed"
        MouseLeftButtonDown="MainImage_MouseLeftButtonDown"
        MouseLeftButtonUp="MainImage_MouseLeftButtonUp"
        MouseMove="MainImage_MouseMove"
    >
         <Image Source="http://www.wynapse.com/images/VistaFish.png" x:Name="MainImagePNG"/>
         <Canvas.RenderTransform>
            <TransformGroup>
               <SkewTransform x:Name="MainSkewTransform" /> <!-- AngleY="-8" AngleX="0" CenterX="0" CenterY="0"/> -->
               <ScaleTransform x:Name="MainScaleTransform" /> <!-- ScaleY="-.5"/> -->
            </TransformGroup>
         </Canvas.RenderTransform>
      </Canvas>

      <Canvas x:Name="ReflectionImageCanvas" Cursor="Hand" Visibility="Collapsed"
        MouseLeftButtonDown="ReflImage_MouseLeftButtonDown"
        MouseLeftButtonUp="ReflImage_MouseLeftButtonUp"
        MouseMove="ReflImage_MouseMove"
        >
         <Image Source="http://www.wynapse.com/images/VistaFish.png" x:Name="ReflImagePNG">

            <Image.RenderTransform>
               <TransformGroup>
                  <SkewTransform x:Name="ReflectionSkewTransform" /> <!-- AngleY="15" AngleX="-20" CenterX="60" CenterY="00"/> -->
                  <ScaleTransform x:Name="ReflectionScaleTransform" /> <!-- ScaleY="-.5"/> -->
               </TransformGroup>
            </Image.RenderTransform>

            <Image.OpacityMask>
               <LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0">
                  <GradientStop Offset="0.25" Color="#00000000" x:Name="ReflGradientStop1" />
                  <GradientStop Offset="1.0" Color="#CC000000" x:Name="ReflGradientStop2" />
               </LinearGradientBrush>
            </Image.OpacityMask>
         </Image>

      </Canvas>

   </Canvas>

   <!--                            -->
   <!--                            -->
   <!-- C H E C K B O X    C O D E -->
   <!--                            -->
   <!--                            -->
  
   <!-- Main Checkbox -->
   <!-- 133 unchecked box, 95 checked box, 123 unchecked button, 126 checked button -->
   <Canvas Canvas.Top="0" Canvas.Left="690"  Cursor="Hand"
    MouseLeftButtonDown="MainCheckBox" >
      <Glyphs x:Name="MainCheckbox" Canvas.Left="0" Canvas.Top="2"
     Fill="white" FontUri="http://www.wynapse.com/images/wingding.ttf" FontRenderingEmSize="16" Indices="133" />
      <TextBlock x:Name="MainCheckBoxText" FontSize="14" Canvas.Left="17" Foreground="white" Text="Main Image"  />
   </Canvas>
  
   <!-- Reflection Checkbox -->
   <!-- 133 unchecked box, 95 checked box, 123 unchecked button, 126 checked button -->
   <Canvas Canvas.Top="40" Canvas.Left="690"  Cursor="Hand"
    MouseLeftButtonDown="ReflectionCheckBox" >
      <Glyphs x:Name="ReflectionCheckBox" Canvas.Left="0" Canvas.Top="2"
     Fill="white" FontUri="http://www.wynapse.com/images/wingding.ttf" FontRenderingEmSize="16" Indices="133" />
      <TextBlock x:Name="ReflectionCheckBoxText" FontSize="14" Canvas.Left="17" Foreground="white" Text="Reflection Image"  />
   </Canvas>

   <!-- Controls Checkbox -->
   <!-- 133 unchecked box, 95 checked box, 123 unchecked button, 126 checked button -->
   <Canvas Canvas.Top="80" Canvas.Left="690"  Cursor="Hand"
    MouseLeftButtonDown="ControlsCheckBox" >
      <Glyphs x:Name="ControlsCheckBox" Canvas.Left="0" Canvas.Top="2"
     Fill="white" FontUri="http://www.wynapse.com/images/wingding.ttf" FontRenderingEmSize="16" Indices="133" />
      <TextBlock x:Name="ControlsCheckBoxText" FontSize="14" Canvas.Left="17" Foreground="white" Text="Show Controls"  />
   </Canvas>

   <!--                                               -->
   <!--                                               -->
   <!-- R E F L E C T I O N   G R A P H I C   C O D E -->
   <!--                                               -->
   <!--                                               -->
  
   <!-- Reflection Skew AngleX Slider -->

   <Canvas x:Name="Rslider_SkewAngleX" Canvas.Top="200" Canvas.Left="460" Width="200" Height="45" Visibility="Collapsed"
     Background="transparent"
     MouseLeftButtonDown="slider_MouseLeftButtonDown">
      <Line x:Name="Rslider_line_SkewAngleX" Stroke="steelblue"
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
      <Path x:Name="Rslider_thumb_SkewAngleX"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="slider_thumb_MouseLeftButtonUp"
       MouseMove="slider_thumb_MouseMove"
       MouseLeftButtonDown="slider_thumb_MouseLeftButtonDown" />
      <TextBlock x:Name="RsliderPos_SkewAngleX" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="white" />
      <TextBlock FontSize="12" Canvas.Left="30" Canvas.Top="40" Foreground="white" Text="Reflection Skew AngleX"/>
   </Canvas>

   <!-- Reflection Skew AngleY Slider -->

   <Canvas x:Name="Rslider_SkewAngleY" Canvas.Top="200" Canvas.Left="690" Width="200" Height="45" Visibility="Collapsed"
     Background="transparent"
     MouseLeftButtonDown="slider_MouseLeftButtonDown">
      <Line x:Name="Rslider_line_SkewAngleY" Stroke="steelblue"
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
      <Path x:Name="Rslider_thumb_SkewAngleY"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="slider_thumb_MouseLeftButtonUp"
       MouseMove="slider_thumb_MouseMove"
       MouseLeftButtonDown="slider_thumb_MouseLeftButtonDown" />
      <TextBlock x:Name="RsliderPos_SkewAngleY" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="white" />
      <TextBlock FontSize="12" Canvas.Left="30" Canvas.Top="40" Foreground="white" Text="Reflection Skew AngleY"/>
   </Canvas>

   <!-- Reflection Skew CenterX Slider -->

   <Canvas x:Name="Rslider_SkewCenterX" Canvas.Top="270" Canvas.Left="460" Width="200" Height="45" Visibility="Collapsed"
     Background="transparent"
     MouseLeftButtonDown="slider_MouseLeftButtonDown">
      <Line x:Name="Rslider_line_SkewCenterX" Stroke="steelblue"
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
      <Path x:Name="Rslider_thumb_SkewCenterX"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="slider_thumb_MouseLeftButtonUp"
       MouseMove="slider_thumb_MouseMove"
       MouseLeftButtonDown="slider_thumb_MouseLeftButtonDown" />
      <TextBlock x:Name="RsliderPos_SkewCenterX" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="Yellow" />
      <TextBlock FontSize="12" Canvas.Left="30" Canvas.Top="40" Foreground="Yellow" Text="Reflection Skew CenterX"/>
   </Canvas>

   <!-- Reflection Skew CenterY Slider -->

   <Canvas x:Name="Rslider_SkewCenterY" Canvas.Top="270" Canvas.Left="690" Width="200" Height="45" Visibility="Collapsed"
     Background="transparent"
     MouseLeftButtonDown="slider_MouseLeftButtonDown">
      <Line x:Name="Rslider_line_SkewCenterY" Stroke="steelblue"
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
      <Path x:Name="Rslider_thumb_SkewCenterY"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="slider_thumb_MouseLeftButtonUp"
       MouseMove="slider_thumb_MouseMove"
       MouseLeftButtonDown="slider_thumb_MouseLeftButtonDown" />
      <TextBlock x:Name="RsliderPos_SkewCenterY" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="Yellow" />
      <TextBlock FontSize="12" Canvas.Left="30" Canvas.Top="40" Foreground="Yellow" Text="Reflection Skew CenterY"/>
   </Canvas>

   <!-- Reflection Scale ScaleX Slider -->

   <Canvas x:Name="Rslider_ScaleScaleX" Canvas.Top="340" Canvas.Left="460" Width="200" Height="45" Visibility="Collapsed"
     Background="transparent"
     MouseLeftButtonDown="slider_MouseLeftButtonDown">
      <Line x:Name="Rslider_line_ScaleScaleX" Stroke="steelblue"
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
      <Path x:Name="Rslider_thumb_ScaleScaleX"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="slider_thumb_MouseLeftButtonUp"
       MouseMove="slider_thumb_MouseMove"
       MouseLeftButtonDown="slider_thumb_MouseLeftButtonDown" />
      <TextBlock x:Name="RsliderPos_ScaleScaleX" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="white" />
      <TextBlock FontSize="12" Canvas.Left="30" Canvas.Top="40" Foreground="white" Text="Reflection Scale ScaleX"/>
   </Canvas>

   <!-- Reflection Scale ScaleY Slider -->

   <Canvas x:Name="Rslider_ScaleScaleY" Canvas.Top="340" Canvas.Left="690" Width="200" Height="45" Visibility="Collapsed"
     Background="transparent"
     MouseLeftButtonDown="slider_MouseLeftButtonDown">
      <Line x:Name="Rslider_line_ScaleScaleY" Stroke="steelblue"
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
      <Path x:Name="Rslider_thumb_ScaleScaleY"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="slider_thumb_MouseLeftButtonUp"
       MouseMove="slider_thumb_MouseMove"
       MouseLeftButtonDown="slider_thumb_MouseLeftButtonDown" />
      <TextBlock x:Name="RsliderPos_ScaleScaleY" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="white" />
      <TextBlock FontSize="12" Canvas.Left="30" Canvas.Top="40" Foreground="white" Text="Reflection Scale ScaleY"/>
   </Canvas>

   <!-- Reflection Scale CenterX Slider -->

   <Canvas x:Name="Rslider_ScaleCenterX" Canvas.Top="410" Canvas.Left="460" Width="200" Height="45" Visibility="Collapsed"
     Background="transparent"
     MouseLeftButtonDown="slider_MouseLeftButtonDown">
      <Line x:Name="Rslider_line_ScaleCenterX" Stroke="steelblue"
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
      <Path x:Name="Rslider_thumb_ScaleCenterX"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="slider_thumb_MouseLeftButtonUp"
       MouseMove="slider_thumb_MouseMove"
       MouseLeftButtonDown="slider_thumb_MouseLeftButtonDown" />
      <TextBlock x:Name="RsliderPos_ScaleCenterX" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="Yellow" />
      <TextBlock FontSize="12" Canvas.Left="30" Canvas.Top="40" Foreground="Yellow" Text="Reflection Scale CenterX"/>
   </Canvas>

   <!-- Reflection Scale CenterY Slider -->

   <Canvas x:Name="Rslider_ScaleCenterY" Canvas.Top="410" Canvas.Left="690" Width="200" Height="45" Visibility="Collapsed"
     Background="transparent"
     MouseLeftButtonDown="slider_MouseLeftButtonDown">
      <Line x:Name="Rslider_line_ScaleCenterY" Stroke="steelblue"
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
      <Path x:Name="Rslider_thumb_ScaleCenterY"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="slider_thumb_MouseLeftButtonUp"
       MouseMove="slider_thumb_MouseMove"
       MouseLeftButtonDown="slider_thumb_MouseLeftButtonDown" />
      <TextBlock x:Name="RsliderPos_ScaleCenterY" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="Yellow" />
      <TextBlock FontSize="12" Canvas.Left="30" Canvas.Top="40" Foreground="Yellow" Text="Reflection Scale CenterY"/>
   </Canvas>

   <!-- Reflection Canvas Left Slider -->

   <Canvas x:Name="Rslider_CanvasLeft" Canvas.Top="480" Canvas.Left="460" Width="200" Height="45" Visibility="Collapsed"
     Background="transparent"
     MouseLeftButtonDown="slider_MouseLeftButtonDown">
      <Line x:Name="Rslider_line_CanvasLeft" Stroke="steelblue"
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
      <Path x:Name="Rslider_thumb_CanvasLeft"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="slider_thumb_MouseLeftButtonUp"
       MouseMove="slider_thumb_MouseMove"
       MouseLeftButtonDown="slider_thumb_MouseLeftButtonDown" />
      <TextBlock x:Name="RsliderPos_CanvasLeft" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="white" />
      <TextBlock FontSize="12" Canvas.Left="30" Canvas.Top="40" Foreground="white" Text="Reflection Canvas Left"/>
   </Canvas>

   <!-- Reflection Canvas Top Slider -->

   <Canvas x:Name="Rslider_CanvasTop" Canvas.Top="480" Canvas.Left="690" Width="200" Height="45" Visibility="Collapsed"
     Background="transparent"
     MouseLeftButtonDown="slider_MouseLeftButtonDown">
      <Line x:Name="Rslider_line_CanvasTop" Stroke="steelblue"
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
      <Path x:Name="Rslider_thumb_CanvasTop"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="slider_thumb_MouseLeftButtonUp"
       MouseMove="slider_thumb_MouseMove"
       MouseLeftButtonDown="slider_thumb_MouseLeftButtonDown" />
      <TextBlock x:Name="RsliderPos_CanvasTop" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="white" />
      <TextBlock FontSize="12" Canvas.Left="30" Canvas.Top="40" Foreground="white" Text="Reflection Canvas Top"/>
   </Canvas>


   <!--                                   -->
   <!--                                   -->
   <!-- M A I N   G R A P H I C   C O D E -->
   <!--                                   -->
   <!--                                   -->

   <!-- Main Skew AngleX Slider -->

   <Canvas x:Name="Mslider_SkewAngleX" Canvas.Top="200" Canvas.Left="0" Width="200" Height="45" Visibility="Collapsed"
     Background="transparent"
     MouseLeftButtonDown="slider_MouseLeftButtonDown">
      <Line x:Name="Mslider_line_SkewAngleX" Stroke="steelblue"
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
      <Path x:Name="Mslider_thumb_SkewAngleX"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="slider_thumb_MouseLeftButtonUp"
       MouseMove="slider_thumb_MouseMove"
       MouseLeftButtonDown="slider_thumb_MouseLeftButtonDown" />
      <TextBlock x:Name="MsliderPos_SkewAngleX" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="white" />
      <TextBlock FontSize="12" Canvas.Left="50" Canvas.Top="40" Foreground="white" Text="Main Skew AngleX"/>
   </Canvas>

   <!-- Main Skew AngleY Slider -->

   <Canvas x:Name="Mslider_SkewAngleY" Canvas.Top="200" Canvas.Left="230" Width="200" Height="45" Visibility="Collapsed"
     Background="transparent"
     MouseLeftButtonDown="slider_MouseLeftButtonDown">
      <Line x:Name="Mslider_line_SkewAngleY" Stroke="steelblue"
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
      <Path x:Name="Mslider_thumb_SkewAngleY"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="slider_thumb_MouseLeftButtonUp"
       MouseMove="slider_thumb_MouseMove"
       MouseLeftButtonDown="slider_thumb_MouseLeftButtonDown" />
      <TextBlock x:Name="MsliderPos_SkewAngleY" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="white" />
      <TextBlock FontSize="12" Canvas.Left="50" Canvas.Top="40" Foreground="white" Text="Main Skew AngleY"/>
   </Canvas>

   <!-- Main Skew CenterX Slider -->

   <Canvas x:Name="Mslider_SkewCenterX" Canvas.Top="270" Canvas.Left="0" Width="200" Height="45" Visibility="Collapsed"
     Background="transparent"
     MouseLeftButtonDown="slider_MouseLeftButtonDown">
      <Line x:Name="Mslider_line_SkewCenterX" Stroke="steelblue"
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
      <Path x:Name="Mslider_thumb_SkewCenterX"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="slider_thumb_MouseLeftButtonUp"
       MouseMove="slider_thumb_MouseMove"
       MouseLeftButtonDown="slider_thumb_MouseLeftButtonDown" />
      <TextBlock x:Name="MsliderPos_SkewCenterX" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="Yellow" />
      <TextBlock FontSize="12" Canvas.Left="50" Canvas.Top="40" Foreground="Yellow" Text="Main Skew CenterX"/>
   </Canvas>

   <!-- Main Skew CenterY Slider -->

   <Canvas x:Name="Mslider_SkewCenterY" Canvas.Top="270" Canvas.Left="230" Width="200" Height="45" Visibility="Collapsed"
     Background="transparent"
     MouseLeftButtonDown="slider_MouseLeftButtonDown">
      <Line x:Name="Mslider_line_SkewCenterY" Stroke="steelblue"
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
      <Path x:Name="Mslider_thumb_SkewCenterY"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="slider_thumb_MouseLeftButtonUp"
       MouseMove="slider_thumb_MouseMove"
       MouseLeftButtonDown="slider_thumb_MouseLeftButtonDown" />
      <TextBlock x:Name="MsliderPos_SkewCenterY" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="Yellow" />
      <TextBlock FontSize="12" Canvas.Left="50" Canvas.Top="40" Foreground="Yellow" Text="Main Skew CenterY"/>
   </Canvas>

   <!-- Main Scale ScaleX Slider -->

   <Canvas x:Name="Mslider_ScaleScaleX" Canvas.Top="340" Canvas.Left="0" Width="200" Height="45" Visibility="Collapsed"
     Background="transparent"
     MouseLeftButtonDown="slider_MouseLeftButtonDown">
      <Line x:Name="Mslider_line_ScaleScaleX" Stroke="steelblue"
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
      <Path x:Name="Mslider_thumb_ScaleScaleX"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="slider_thumb_MouseLeftButtonUp"
       MouseMove="slider_thumb_MouseMove"
       MouseLeftButtonDown="slider_thumb_MouseLeftButtonDown" />
      <TextBlock x:Name="MsliderPos_ScaleScaleX" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="white" />
      <TextBlock FontSize="12" Canvas.Left="50" Canvas.Top="40" Foreground="white" Text="Main Scale ScaleX"/>
   </Canvas>

   <!-- Main Scale ScaleY Slider -->

   <Canvas x:Name="Mslider_ScaleScaleY" Canvas.Top="340" Canvas.Left="230" Width="200" Height="45" Visibility="Collapsed"
     Background="transparent"
     MouseLeftButtonDown="slider_MouseLeftButtonDown">
      <Line x:Name="Mslider_line_ScaleScaleY" Stroke="steelblue"
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
      <Path x:Name="Mslider_thumb_ScaleScaleY"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="slider_thumb_MouseLeftButtonUp"
       MouseMove="slider_thumb_MouseMove"
       MouseLeftButtonDown="slider_thumb_MouseLeftButtonDown" />
      <TextBlock x:Name="MsliderPos_ScaleScaleY" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="white" />
      <TextBlock FontSize="12" Canvas.Left="50" Canvas.Top="40" Foreground="white" Text="Main Scale ScaleY"/>
   </Canvas>

   <!-- Main Scale CenterX Slider -->

   <Canvas x:Name="Mslider_ScaleCenterX" Canvas.Top="410" Canvas.Left="0" Width="200" Height="45" Visibility="Collapsed"
     Background="transparent"
     MouseLeftButtonDown="slider_MouseLeftButtonDown">
      <Line x:Name="Mslider_line_ScaleCenterX" Stroke="steelblue"
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
      <Path x:Name="Mslider_thumb_ScaleCenterX"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="slider_thumb_MouseLeftButtonUp"
       MouseMove="slider_thumb_MouseMove"
       MouseLeftButtonDown="slider_thumb_MouseLeftButtonDown" />
      <TextBlock x:Name="MsliderPos_ScaleCenterX" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="Yellow" />
      <TextBlock FontSize="12" Canvas.Left="50" Canvas.Top="40" Foreground="Yellow" Text="Main Scale CenterX"/>
   </Canvas>

   <!-- Main Scale CenterY Slider -->

   <Canvas x:Name="Mslider_ScaleCenterY" Canvas.Top="410" Canvas.Left="230" Width="200" Height="45" Visibility="Collapsed"
     Background="transparent"
     MouseLeftButtonDown="slider_MouseLeftButtonDown">
      <Line x:Name="Mslider_line_ScaleCenterY" Stroke="steelblue"
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
      <Path x:Name="Mslider_thumb_ScaleCenterY"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="slider_thumb_MouseLeftButtonUp"
       MouseMove="slider_thumb_MouseMove"
       MouseLeftButtonDown="slider_thumb_MouseLeftButtonDown" />
      <TextBlock x:Name="MsliderPos_ScaleCenterY" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="Yellow" />
      <TextBlock FontSize="12" Canvas.Left="50" Canvas.Top="40" Foreground="Yellow" Text="Main Scale CenterY"/>
   </Canvas>

   <!-- Main Canvas Left Slider -->

   <Canvas x:Name="Mslider_CanvasLeft" Canvas.Top="480" Canvas.Left="0" Width="200" Height="45" Visibility="Collapsed"
     Background="transparent"
     MouseLeftButtonDown="slider_MouseLeftButtonDown">
      <Line x:Name="Mslider_line_CanvasLeft" Stroke="steelblue"
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
      <Path x:Name="Mslider_thumb_CanvasLeft"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="slider_thumb_MouseLeftButtonUp"
       MouseMove="slider_thumb_MouseMove"
       MouseLeftButtonDown="slider_thumb_MouseLeftButtonDown" />
      <TextBlock x:Name="MsliderPos_CanvasLeft" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="white" />
      <TextBlock FontSize="12" Canvas.Left="50" Canvas.Top="40" Foreground="white" Text="Main Canvas Left"/>
   </Canvas>

   <!-- Main Canvas Top Slider -->

   <Canvas x:Name="Mslider_CanvasTop" Canvas.Top="480" Canvas.Left="230" Width="200" Height="45" Visibility="Collapsed"
     Background="transparent"
     MouseLeftButtonDown="slider_MouseLeftButtonDown">
      <Line x:Name="Mslider_line_CanvasTop" Stroke="steelblue"
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
      <Path x:Name="Mslider_thumb_CanvasTop"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="slider_thumb_MouseLeftButtonUp"
       MouseMove="slider_thumb_MouseMove"
       MouseLeftButtonDown="slider_thumb_MouseLeftButtonDown" />
      <TextBlock x:Name="MsliderPos_CanvasTop" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="white" />
      <TextBlock FontSize="12" Canvas.Left="50" Canvas.Top="40" Foreground="white" Text="Main Canvas Top"/>
   </Canvas>

   <!-- Gradient Stop 1 Slider -->

   <Canvas x:Name="Oslider_GradientStop1" Canvas.Top="130" Canvas.Left="460" Width="200" Height="45" Visibility="Collapsed"
     Background="transparent"
     MouseLeftButtonDown="slider_MouseLeftButtonDown">
      <Line x:Name="Oslider_line_GradientStop1" Stroke="steelblue"
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
      <Path x:Name="Oslider_thumb_GradientStop1"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="slider_thumb_MouseLeftButtonUp"
       MouseMove="slider_thumb_MouseMove"
       MouseLeftButtonDown="slider_thumb_MouseLeftButtonDown" />
      <TextBlock x:Name="OsliderPos_GradientStop1" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="white" />
      <TextBlock FontSize="12" Canvas.Left="50" Canvas.Top="40" Foreground="white" Text="Gradient Stop 1"/>
   </Canvas>

   <!-- Gradient Stop 2 Slider -->

   <Canvas x:Name="Oslider_GradientStop2" Canvas.Top="130" Canvas.Left="690" Width="200" Height="45" Visibility="Collapsed"
     Background="transparent"
     MouseLeftButtonDown="slider_MouseLeftButtonDown">
      <Line x:Name="Oslider_line_GradientStop2" Stroke="steelblue"
       StrokeThickness="1" X1="0" Y1="25" X2="200" Y2="25"/>
      <Path x:Name="Oslider_thumb_GradientStop2"  Stroke="darkblue"  Cursor="Hand"
       Fill="red"
       Data="M0,0 L6,0 6,15 3,20 0,15z"
       MouseLeftButtonUp="slider_thumb_MouseLeftButtonUp"
       MouseMove="slider_thumb_MouseMove"
       MouseLeftButtonDown="slider_thumb_MouseLeftButtonDown" />
      <TextBlock x:Name="OsliderPos_GradientStop2" FontSize="14" Canvas.Left="98" Canvas.Top="25" Foreground="white" />
      <TextBlock FontSize="12" Canvas.Left="50" Canvas.Top="40" Foreground="white" Text="Gradient Stop 2"/>
   </Canvas>

</Canvas>