var clipRight = 182;
var clipLeft = 0;

var firstVideo = null;
var lastVideo = null;
var videoContainer = null;

var leftButton = null;
var rightButton = null;

var container = null;
var buttonPadding = 28;

var _scrollTimer = null;

var firstTimeVideo=true;  //only sets video player properties on first playthrough. Certain properties were causing problems if set multiple times


////////////  onload  /////////////////

jQuery(document).ready(function(){
								
	generateMap();
	
	
	jQuery(".menuButtonContainer a").click(function () {
		//alert("position--- x: "+ jQuery(this).parent().position().left + ", y: "+ jQuery(this).parent().position().top);

		////  replace flash object within the video player div with new flash object using link's url.  /////
		var vidId = jQuery(this).attr('videoId');
		generateSwf(vidId);
		
	
	}).attr("videoId", function(){

		//////  move the video id to an attribute other than href so it doesn't trigger the link anymore  //////
		var urlString = jQuery(this).attr("href");
		var urlArr = urlString.split('=');
		jQuery(this).removeAttr('href');
		
		return urlArr[1];
	}).hover(
		/*over*/
		function(){
			jQuery(this).parent().fadeTo("fast", 1);	
		},
		/*out*/
		function(){
			jQuery(this).parent().fadeTo("fast", 0.5);
	
		}
	).each(function(){
		jQuery(this).parent().css("cursor","pointer");			
		jQuery(this).parent().fadeTo("fast", 0.5);
	});
	
	//when the video player first loads, select the first video player link
	loadFirstVideo();
	
	
	//jQuery(".menuButtonContainer a").removeAttr('href');

	
});



//////////  generates the video player swf using swfobject  ////////////

function generateSwf(VideoId){

	var flashvars = {
			m: VideoId,
			v: '2',
			sr: '0',
			type: 'video'
		};
		var params = {
			wmode:'opaque'	
		};
		var attributes = {};
		
		swfobject.embedSWF('http://lads.myspace.com/videos/vplayer.swf', 'video', "306", "256", "9", '#161616', flashvars, params, attributes);
		
}

/////////  generates map using swfobject  //////////

function generateMap(){
		var flashvars = {};
		var params = {
			wmode:'opaque'	
		};
		var attributes = {};
		
		swfobject.embedSWF('flash/map.swf', 'myspaceMap', "981", "505", "9", '#ffffff', flashvars, params, attributes);		
}



function loadFirstVideo(){
	var firstVideo = jQuery(".menuButtonContainer a:first").attr('videoId');
	generateSwf(firstVideo);	
}


///////////   get screen dimensions   ///////////////
function alertSize() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  
  
  var returnArr = {width:myWidth, height:myHeight};
  return (returnArr);
  //alert( 'Width = ' + myWidth );
  //alert( 'Height = ' + myHeight );
}

////////////////////////////////////////////////////

function openVideoPanel(){
	

	videoContainer = document.getElementById('header');
	var screenDimensions = alertSize();

	var containerWidth = screenDimensions['width']/2 - 294;
	var strWidth = containerWidth + 'px';
	videoContainer.style.left = strWidth;
	videoContainer.style.top = '40px';
	
	videoContainer.style.display = "block";	
	jQuery("#video").attr('display', 'inline');

	if(firstTimeVideo){
		initializeScroller();
	}
	
	goLeft();
	goRight();
	
	firstTimeVideo=false;
	
}

function closeVideoPanel(){
	thisMovie("myspaceMap").enableFlash();	
	
	videoContainer = document.getElementById('header');
	videoContainer.style.display = "none";
	loadFirstVideo();
}


function thisMovie(movieName) {
	if (navigator.appName.indexOf("Microsoft") != -1) {
    	return window[movieName];
    } else {
    	return document[movieName];
    }
}


//	change the position of the element by position
function initializeScroller()
{
	firstVideo = document.getElementById('firstVideo');
	lastVideo = document.getElementById('lastVideo');
	videoContainer = document.getElementById('header');
	
	container = document.getElementById('menu');
	
	//	position the element correctly ...
	
	leftButton = document.getElementById("menuContainer");
	rightButton = document.getElementById("next");
	
	container.style.left = leftButton.offsetLeft + 28 + 31 + "px";
	container.style.top = leftButton.offsetTop + "px";
	
	container.style.width = (lastVideo.offsetLeft - firstVideo.offsetLeft + 56) + "px";
}

function goLeft()
{
	if(container.offsetLeft + container.offsetWidth >
		rightButton.offsetLeft)
	{
		//alert("moving left");
		
		clipLeft += 46;
		clipRight += 46;
		
		container.style.clip = 'rect(0px,' + clipRight + 'px,46px,' + clipLeft + 'px)';
		container.style.left = (container.offsetLeft - 46) + "px";
	}
	//else
		//alert("cannot move left:" + container.offsetLeft + "," + container.offsetWidth + ":" + rightButton.offsetLeft + ":" + container.offsetHeight);
}

function goRight()
{
	if(container.offsetLeft <
		(leftButton.offsetLeft + 28 + 31))
	{
		//alert("moving right");
		
		clipLeft -= 46;
		clipRight -= 46
		
		container.style.clip = 'rect(0px,' + clipRight + 'px,46px,' + clipLeft + 'px)';
		container.style.left = (container.offsetLeft + 46) + "px";
	}
	//else
		//alert("cannot move left:" + container.offsetLeft + "," + container.offsetWidth + ":" + rightButton.offsetLeft);
}