// JavaScript Document
var $j = jQuery.noConflict();
$j(document).ready(function(){

rolloverInit();  


 //1.create scroll effect
 //2. handle the selection of the navigation
 //3. prev + next images
 //4. support vertical and horizontal
 var $panels = $j('#slider .panel');
 var $container = $j('#slider .scrollContainer'); 
 var horizontal = true;
 	  if (horizontal) {
		 $panels.css({
			'float' : 'left',
			'position' : 'relative'
		  });
		$container.css('width', 2550); 
	// $container.css('width', $panels[0].offsetWidth * $panels.length);
	 }
 var $scroll = $j('#slider .scroll').css('overflow', 'hidden');
 
 var scrollOptions = {
		target: $scroll,
		items: $panels,
		navigation: '.scroll_navigation',
		//prev: 'img.left',
		//next: 'img.right',
		axis: 'xy',
		duration: 500,
		easing: 'swing'
		//onAfter: trigger,
	};
	
  $j('#slider').serialScroll(scrollOptions);
  $j.localScroll(scrollOptions);
  



function rolloverInit() {
    var imageArray = $j('.RolloverImage');
    for (var i=0; i<imageArray.length; i++) {
            setupRollover(imageArray[i]);
    }
}

function setupRollover(thisImage) {
	thisImage.outImage = new Image();
	thisImage.outImage.src = thisImage.src;
	thisImage.onmouseout = rollOut;
	
	thisImage.overImage = new Image();
	thisImage.overImage.src = "images/" + thisImage.id + "_over.jpg"; 
	thisImage.onmouseover = rollOver;
	
	thisImage.clickImage = new Image();
	thisImage.clickImage.src = "images/" + thisImage.id + "_on.jpg";
	thisImage.onclick = rollClick;
}

function rollOut() {	
	this.src = this.outImage.src;
}

function rollOver() {
	if(lastClick) {
		if(lastClick.id != this.id){
			this.src = this.overImage.src;	
		}
	}
	else {
		this.src = this.overImage.src;
	}	
}

function rollClick() {
	if(lastClick){		
		lastClick.onmouseout = rollOut;
		lastClick.src = lastClick.outImage.src;
	}	
	this.src = this.clickImage.src;
	this.onmouseout = rollClickSecond;
	lastClick = this;

	if(this.id == "step_1") {
		$j("main_image_video_box_inner_home").html('<div id="player_home" style="width:400px; height:280px"></div>'); 
		$f("player_home", "/flowplayer/flowplayer-3.0.5.swf",  {
	playlist: [
			    {
			    url: 'http://superagent.com/images/splash_step_1.jpg', 
			    autoPlay: true,
				scaling: 'orig'
                },
	
		        {
			    url: 'http://superagent.com/media/step_1.flv', 
			    autoPlay: true,
				autoBuffering: true 
		        }
			  ],
	plugins:  {
		controls: {all:false, scrubber:true, play:true, mute:true,
			bufferColor: '#FFFFFF', progressColor: '#FF6600', buttonColor: '#FF6600', buttonOverColor: '#83B90B',
			height: 22, autoHide: 'always', width: '98%', bottom: 5, left: '50%', borderRadius: 15
		}
	}
});
	}
	
	else if(this.id == "step_2") {
		$j("main_image_video_box_inner_home").html('<div id="player_home" style="width:400px; height:280px"></div>');
		$f("player_home", "/flowplayer/flowplayer-3.0.5.swf",  {
	playlist: [
			    {
			    url: 'http://superagent.com/images/splash_step_2.jpg', 
			    autoPlay: true,
				scaling: 'orig'
                },
	
		        {
			    url: 'http://superagent.com/media/step_2.flv', 
			    autoPlay: true, 
				autoBuffering: true 
		        }
			  ],
	plugins:  {
		controls: {all:false, scrubber:true, play:true, mute:true,
			bufferColor: '#FFFFFF', progressColor: '#FF6600', buttonColor: '#FF6600', buttonOverColor: '#83B90B',
			height: 22, autoHide: 'always', width: '98%', bottom: 5, left: '50%', borderRadius: 15
		}
	}
});
	}
	
	else if(this.id == "step_3") {
		$j("main_image_video_box_inner_home").html('<div id="player_home" style="width:400px; height:280px"></div>');
		$f("player_home", "/flowplayer/flowplayer-3.0.5.swf",  {
	playlist: [
			    {url: 'http://superagent.com/images/splash_step_3.jpg', autoPlay: true, scaling: 'orig'},
		        {url: 'http://superagent.com/media/step_3.flv', autoPlay: true, autoBuffering: true}
			  ],
	plugins:  {
		controls: {all:false, scrubber:true, play:true, mute:true,
			bufferColor: '#FFFFFF', progressColor: '#FF6600', buttonColor: '#FF6600', buttonOverColor: '#83B90B',
			height: 22, autoHide: 'always', width: '98%', bottom: 5, left: '50%', borderRadius: 15}
	        }
        });
	}
	
	else if(this.id == "step_4") {
		$j("main_image_video_box_inner_home").html('<div id="player_home" style="width:400px; height:280px"></div>');
		$f("player_home", "/flowplayer/flowplayer-3.0.5.swf",  {
	playlist: [
			    {url: 'http://superagent.com/images/splash_step_4.jpg', autoPlay: true, scaling: 'orig'},
		        {url: 'http://superagent.com/media/step_4.flv', autoPlay: true, autoBuffering: true},
				{url: 'http://superagent.com/images/end_screen_step_4_video.jpg', autoPlay: true, autoBuffering: true}
			  ],
	plugins:  {
		controls: {all:false, scrubber:true, play:true, mute:true,
			bufferColor: '#FFFFFF', progressColor: '#FF6600', buttonColor: '#FF6600', buttonOverColor: '#83B90B',
			height: 22, autoHide: 'always', width: '98%', bottom: 5, left: '50%', borderRadius: 15}
	         }
         });
	}
	
	else if(this.id == "home") {
		$j("main_image_video_box_inner_home").html('<div id="player_home" style="width:400px; height:280px"></div>');
		$f("player_home", "/flowplayer/flowplayer-3.0.5.swf",  {
	playlist: [
			    {url: 'http://superagent.com/images/splash_intro_fire.jpg', scaling: 'orig'},
		        {url: 'http://superagent.com/media/intro.flv', autoPlay: false, autoBuffering: true}
			  ],
	plugins:  {
		controls: {all:false, scrubber:true, play:true, mute:true, 
			bufferColor: '#FFFFFF', progressColor: '#FF6600', buttonColor: '#FF6600', buttonOverColor: '#83B90B',
			height: 22, autoHide: 'always', width: '98%', bottom: 5, left: '50%', borderRadius: 15}
	          }
          });
	}
}

function rollClickSecond() {
    if(lastClick){       
        lastClick.onmouseout = rollOut;
        lastClick.src = lastClick.outImage.src;
    }   
    this.src = this.clickImage.src;
     this.onmouseout = rollClickSecond;
    lastClick = this;
}

var lastClick = null;

function Show(elementid)
{
	document.getElementById(elementid).style.display = 'block';	
}

function Hide(elementid)
{
	document.getElementById(elementid).style.display = 'none';
} 




 var $panels = $j('#why_superagent_box_slider .panel');
 var $container = $j('#why_superagent_box_slider .why_superagent_right_container'); 
 var horizontal = false;
 	  if (horizontal) {
		 $panels.css({
			'float' : 'left',
			'position' : 'relative'
		  });
		$container.css('width', 2548); 
	// $container.css('width', $panels[0].offsetWidth * $panels.length);
	 }
 var $scroll = $j('#why_superagent_box_slider .why_superagent_right_scroll').css('overflow', 'hidden');
 
 $j('#why_superagent_box_slider .why_superagent_navigation').find('a').click(selectNav);
 
 function selectNav() {
  $j(this)
    .parents('ul:first') // find the first UL parent
      .find('a') // find all the A elements
        .removeClass('selected') // remove from all
      .end() // go back to all A elements
    .end() // go back to 'this' element
    .addClass('selected');
}


 var scrollOptions = {
		target: $scroll,
		items: $panels,
		navigation: '.why_superagent_navigation',
		axis: 'xy',
		duration: 500,
		easing: 'swing'
		//onAfter: trigger,
	};
	
  $j('#why_superagent_box_slider').serialScroll(scrollOptions);
  $j.localScroll(scrollOptions);
  
});
 
 function changeType()
{
    document.getElementById("passwordbox").innerHTML = "<input type=\"password\" id=\"pwdPassword\" name=\"pwdPassword\" style=\"width: 120px; height: 20px; font-size: 14px; font-weight: bold; font-family: Arial; color: #999999; text-indent: 5px; vertical-align: middle; display: block;\" onBlur=\"changeTypeBack();\" />";
    setTimeout(
    function focusPassword() {
    document.getElementById("pwdPassword").focus();
    }, 1);
}

function changeTypeBack()
{
    if(document.getElementById("pwdPassword").value == '')
    {   
        document.getElementById("passwordbox").innerHTML = "<input type=\"text\" id=\"pwdPassword\" name=\"pwdPassword\" value=\"Password\" style=\"width: 120px; height: 20px; font-size: 14px; font-weight: bold; font-family: Arial; color: #999999; text-indent: 5px; vertical-align: middle; display: block;\" onFocus=\"changeType();\" />";
    }   
}

var urlAddress = "http://www.superagent.com/resources.html"; 
var pageName = "SuperAgent Resources"; 
function addToFavoritesResources() { 
if (window.sidebar) { window.sidebar.addPanel(pageName, urlAddress,"");} 
else if( window.external ) {window.external.AddFavorite(pageName, urlAddress); }
else { alert("Sorry! Your browser doesn't support this function.");}
}