par7133
/
Xbox-and-JS-OOP


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
							
<!DOCTYPE html>
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
	
  <meta charset="UTF-8"/>
  
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  
  <title>Xbox & Javascript OOP</title>
  		
  <meta name="description" content="Playing, Xbox, by, Javascript, OOP"/>
  <meta name="keywords" content="Playing with Xbox by Javascript OOP"/>
  <meta http-equiv="author" content="5 Mode"/>
    		
</head>
	
<body style="background-color: #FFFFFF;">

    <br/><br/><br/><br/><br/><br/><br/>

		<span id="UXloading" style="visibility:visible">
			<img id="UXxbox_over_1" name="UXxbox_frame_1" src="img/button_xbox3_frame_1.gif" border="0" widh="1px" height="1px"/> 
			<img id="UXxbox_over_2" name="UXxbox_frame_2" src="img/button_xbox3_frame_2.gif" border="0" widh="1px" height="1px"/> 
			<img id="UXxbox_over_3" name="UXxbox_frame_3" src="img/button_xbox3_frame_3.gif" border="0" widh="1px" height="1px"/> 
			<img id="UXxbox_over_4" name="UXxbox_frame_4" src="img/button_xbox3_frame_4.gif" border="0" widh="1px" height="1px"/> 
		</span>

		<br/>

		<span id="UXcontainer" style="visibility:visible">
			<p align="center">
				<table border="0" width="100%" height="90%">
					<tr>
						<td height="70%" align="center">
							<p align="center">
								<input id="xboxlink" type="hidden" value="http://www.5mode.com" />
								<img id="xbox" border="0" src="img/button_xbox3.gif" class="xbox" style="cursor:pointer" title="Start Here" alt="Start Here" />
							</p>
						</td>
					</tr>
				</table>
			</p>
		</span>

	<script src="js/jquery-1.5.js"></script>

 <script>

	function XboxButtonAnimation () {

	  var _intervalID = 0;
      var cyclesCounter = 0;
      var totFrames = 4; // NUMBER OF ANIMATION FRAMES

	  var loadingTime_default = 2000;
	  var frameDuration_default = 300;
	  var exitDuration_default = 400;
	  var cycles_default = 2;

	  var LoadingTime = loadingTime_default;
	  var FrameDuration = frameDuration_default;
	  var ExitDuration = exitDuration_default;
	  var Cycles = cycles_default;
	  
      var cyclesCounter = 0;	  
	  	  
      this.SetCycles = SetCycles;
      this.SetLoadingTime = SetLoadingTime;
      this.SetFrameDuration = SetFrameDuration;
      this.SetExitDuration= SetExitDuration;
      // --------
	  this.ValidateInstance=ValidateInstance;
	  this.Start=Start;
	  this.RenderFrame=RenderFrame;
	  this._ClearCallingInterval=_ClearCallingInterval;
	  this._ClearCallingIntervalExit=_ClearCallingIntervalExit;
	  this.FrameFactory=FrameFactory;
	  this.Reset=Reset;
	  this.Exit=Exit;
  
    // Properties
    function SetCycles(cycles) {
      Cycles = !isNaN(cycles) ? cycles : 0;
    }
    
    function SetExitDuration(exitduration) {
      ExitDuration = !isNaN(exitduration) ? exitduration : 0;      
    }

    function SetFrameDuration(frameduration) {
      FrameDuration = !isNaN(frameduration) ? frameduration : 0;      
    }

    function SetLoadingTime(loadingtime) {
      LoadingTime = !isNaN(loadingtime) ? loadingtime : 0;      
    }

    // Methods
    function ValidateInstance() {
       if  (isNaN(Cycles) || (Cycles==0)) Cycles = cycles_default;
       if  (isNaN(LoadingTime) || (LoadingTime==0)) LoadingTime = loadingTime_default;
       if  (isNaN(FrameDuration) || (FrameDuration==0)) FrameDuration = frameDuration_duration;
       if  (isNaN(ExitDuration) || (ExitDuration==0)) ExitDuration = exitDuration_duration;
    }	  
	  
	  function Start() {
	     ValidateInstance();
	     cyclesCounter = Cycles;
	     FrameFactory(1);
	  }
	   
	  function RenderFrame(step) {
		$('.xbox').attr( 'src', 'img/button_xbox3_frame_' + step + '.gif' );
	  }
	
	  function _ClearCallingInterval() {
		 if (_intervalID!=0) window.clearTimeout(_intervalID);
	  }

	  function _ClearCallingIntervalExit() {
		 if (_intervalID!=0) window.clearInterval(_intervalID);
	  }

	  function FrameFactory(iframe) {
		 _ClearCallingInterval();
		 RenderFrame(iframe);
		 if (iframe==1 && (cyclesCounter==Cycles)) {
		   // FROM THE FIRST FRAME      
		   _intervalID=window.setTimeout(function() {FrameFactory(iframe+1);}, LoadingTime);
		 } else {
		   if (iframe==totFrames) {
		     // LAST FRAME  
		     cyclesCounter--;
			 if (cyclesCounter>=1) {
			    // LOAD FIRST FRAME
				_intervalID=window.setTimeout(function() {FrameFactory(1);}, FrameDuration);
			 } else {
			    // END ANIMATION
				_intervalID=window.setTimeout(function() {Exit(true);}, FrameDuration);
			 }
           } else {
             // NORMAL LOAD		   
		     _intervalID=window.setTimeout(function() {FrameFactory(iframe+1);}, FrameDuration);
		   }
		 }  
	  }
	
	  function Reset() {
      _ClearCallingIntervalExit();		 
      cyclesCounter=Cycles;     
		  $('.xbox').attr( 'src', 'img/button_xbox3.gif' );
	  }
	  
	  function Exit(success) {
		  _intervalID=window.setInterval(function() {Reset();}, ExitDuration);
		  if (success) window.open( $('#xboxlink').attr( 'value' ) , '' ,'_blank');
	  }

	}

  var PageXboxButtonAni = null;
  <!-- Click - Event Handler -->  
  $(function() {
       $(".xbox").click(function () {	
            // Xbox Animation
            if (!PageXboxButtonAni) {
              PageXboxButtonAni = new XboxButtonAnimation();			  
              PageXboxButtonAni.SetCycles(2);
              PageXboxButtonAni.SetLoadingTime(2000);
              PageXboxButtonAni.SetFrameDuration(300);
              PageXboxButtonAni.SetExitDuration(400);               
              PageXboxButtonAni.Start();
              PageXboxButtonAni = null;
            }	  
       })
  })
  
</script>
    
</body>
</html>