//////////////////////////////////////////////////
//360 slideshow EX
//////////////////////////////////////////////////

function loadEXRotateImg(){
Uize.module ({
  required:[
    'UizeDotCom.Page.Example.library',
    'UizeDotCom.Page.Example',
    'Uize.Widget.Drag',
    'Uize.Fade.xFactory',
    'Uize.Curve.Rubber',
    'Uize.Curve.Mod'
  ],
  builder:function () {
  
      var page = window.page = new UizeDotCom.Page.Example ({evaluator:function (code) {eval (code)}});

   
      var
        totalFrames = 31,
        frameUrlEX =
          ['images/01_EX/00/360rotate/CinedeckEX_360_V1_[#frame].jpg']
		
      ;

    
      var
        rotation = 0,
        lastFrameNo = -1,
        dragStartRotation
      ;

    
      var rotationViewer = page.addChild (
        'rotationViewer',
        Uize.Widget.Drag,
        {
          cancelFade:{duration:5000,curve:Uize.Curve.Rubber.easeOutBounce ()},
          releaseTravel:function (speed) {
            var
              deceleration = 5000, 
              duration = speed / deceleration
            ;
            return {
              duration:duration,
              distance:Math.round (speed * duration / 2),
              curve:function (_value) {return 1 - (_value = 1 - _value) * _value}
            };
          },
          html:function (input) {
            var
              htmlChunks = [],
              frameNodeIdPrefix = input.idPrefix + '-frame'
            ;
            for (var frameNo = 0; ++frameNo <= totalFrames;) {
              htmlChunks.push (
                '<img' +
                  ' id="' + frameNodeIdPrefix + frameNo + '"' +
                  ' src="' + Uize.substituteInto (frameUrlEX,{frame:(frameNo < 10 ? '0' : '') + frameNo}) +'"' +
                '/>'
              );
            }
            return htmlChunks.join ('');
          },
          built:false
        }
      );
	  
	   
      var rotationViewer = page.addChild (
        'rotationViewer',
        Uize.Widget.Drag,
        {
          cancelFade:{duration:5000,curve:Uize.Curve.Rubber.easeOutBounce ()},
          releaseTravel:function (speed) {
            var
              deceleration = 5000, 
              duration = speed / deceleration
            ;
            return {
              duration:duration,
              distance:Math.round (speed * duration / 2),
              curve:function (_value) {return 1 - (_value = 1 - _value) * _value}
            };
          },
          html:function (input) {
            var
              htmlChunks = [],
              frameNodeIdPrefix = input.idPrefix + '-frame'
            ;
            for (var frameNo = 0; ++frameNo <= totalFrames;) {
              htmlChunks.push (
                '<img' +
                  ' id="' + frameNodeIdPrefix + frameNo + '"' +
                  ' src="' + Uize.substituteInto (frameUrlEX,{frame:(frameNo < 10 ? '0' : '') + frameNo}) +'"' +
                '/>'
              );
            }
            return htmlChunks.join ('');
          },
          built:false
        }
      );


	  

      function updateRotation (newRotation) {
        rotation = ((newRotation % 360) + 360) % 360;
        var frameNo = 1 + Math.round (rotation / 360 * (totalFrames - 1));
        if (frameNo != lastFrameNo) {
          rotationViewer.displayNode ('frame'+ lastFrameNo,false);
          rotationViewer.displayNode ('frame'+ (lastFrameNo = frameNo));
        }
      }
      rotationViewer.wire ({
        'Drag Start':function () {dragStartRotation = rotation},
        'Drag Update':function (e) {updateRotation (dragStartRotation - e.source.eventDeltaPos [0] / 2.5)}
      });

   
      function spin (degrees,duration,curve) {
        Uize.Fade.fade (updateRotation,rotation,rotation + degrees,duration,{quantization:1,curve:curve});
      }

   
      Uize.Node.wire (window,'load',function () {spin (360,2700,Uize.Curve.easeInOutPow (4))});

  
      page.wireUi ();	  	  
  
  }
});

}



function loadRXRotateImg(){
Uize.module ({
  required:[
    'UizeDotCom.Page.Example.library',
    'UizeDotCom.Page.Example',
    'Uize.Widget.Drag',
    'Uize.Fade.xFactory',
    'Uize.Curve.Rubber',
    'Uize.Curve.Mod'
  ],
  builder:function () {
    /*** create the example page widget ***/
      var page = window.page = new UizeDotCom.Page.Example ({evaluator:function (code) {eval (code)}});

    /*** configuration variables ***/
      var
        totalFrames = 31,
		frameUrlRX =
		  ['images/02_RX/00/360rotate/v2/CinedeckRX_360_V2_[#frame].jpg']  
      ;

    /*** state variables ***/
      var
        rotation = 0,
        lastFrameNo = -1,
        dragStartRotation
      ;

    /*** create the Uize.Widget.Drag instance ***/
      var rotationViewer = page.addChild (
        'rotationViewer',
        Uize.Widget.Drag,
        {
          cancelFade:{duration:5000,curve:Uize.Curve.Rubber.easeOutBounce ()},
          releaseTravel:function (speed) {
            var
              deceleration = 5000, // measured in pixels/s/s
              duration = speed / deceleration
            ;
            return {
              duration:duration,
              distance:Math.round (speed * duration / 2),
              curve:function (_value) {return 1 - (_value = 1 - _value) * _value}
            };
          },
          html:function (input) {
            var
              htmlChunks = [],
              frameNodeIdPrefix = input.idPrefix + '-frame'
            ;
            for (var frameNo = 0; ++frameNo <= totalFrames;) {
              htmlChunks.push (
                '<img' +
                  ' id="' + frameNodeIdPrefix + frameNo + '"' +
                  ' src="' + Uize.substituteInto (frameUrlRX,{frame:(frameNo < 10 ? '0' : '') + frameNo}) +'"' +
                '/>'
              );
            }
            return htmlChunks.join ('');
          },
          built:false
        }
      );
  

    /*** wire up the drag widget with events for updating rotation degree ***/
      function updateRotation (newRotation) {
        rotation = ((newRotation % 360) + 360) % 360;
        var frameNo = 1 + Math.round (rotation / 360 * (totalFrames - 1));
        if (frameNo != lastFrameNo) {
          rotationViewer.displayNode ('frame'+ lastFrameNo,false);
          rotationViewer.displayNode ('frame'+ (lastFrameNo = frameNo));
        }
      }
      rotationViewer.wire ({
        'Drag Start':function () {dragStartRotation = rotation},
        'Drag Update':function (e) {updateRotation (dragStartRotation - e.source.eventDeltaPos [0] / 2.5)}
      });

    /*** function for animating spin ***/
      function spin (degrees,duration,curve) {
        Uize.Fade.fade (updateRotation,rotation,rotation + degrees,duration,{quantization:1,curve:curve});
      }

    /*** initialization ***/
      Uize.Node.wire (window,'load',function () {spin (360,2700,Uize.Curve.easeInOutPow (4))});

    /*** wire up the page widget ***/
      page.wireUi ();	  	  
  
  }
});

}