var otherVids = 1;
var selfVids = 1;
var hiddenFlash = "";
function createVideoSortable(){
	// This creates the sortable list of videos
	var sortVideo = new Sortables('player-wrapper', {
		handle: '.videos',
		opacity: 0.7,
		//This creates clone of the element so you can see where you are dragging it if turned to true
		clone: true, 
		onStart: function(el,clone){
			hiddenFlash = el.getElement('.videos').innerHTML;
			clone.getElement('.videos').innerHTML = "";
			el.getElement('.videos').innerHTML = "";
		},
		onComplete: function(el,clone){
			el.getElement('.videos').innerHTML = hiddenFlash;
			hiddenFlash = "";
		}
	});

	// This is used for the temporary button to add new videos to the player
	if($('addCamera'))
	{
		$('addCamera').addEvent('click', function(e) {
			e.stop();
			otherVids++;
			// Create the container for the video and info that will be sortable
			var newVideoCont = createNewElm('div','video-containers','other-video-container'+otherVids);
			// Set the margins to what is set by the player controls
			newVideoCont.style.margin = $('video-border-input').value + 'px';
			// Create the expander container
			var newVideoExpand = createNewElm('div','video-expander','videoR'+vidResize);
			vidResize++;
			newVideoCont.appendChild(newVideoExpand);

			var newVideoClose = createNewElement('div','video-close-box');
			newVideoClose.innerHTML = "X";
			newVideoClose.onClick = "closeVideo(this);";
			newVideoExpand.appendChild(newVideoClose);

			// Create the video container
			var newVideo = createNewElm('div','videos','videoO'+otherVids);
			// Insert video container into sortable container
			newVideoExpand.appendChild(newVideo);
			// Create the video info container
			var newVideoInfo = createNewElm('div','videos-info');
			// Hides the info if the option to show the name is not checked
			if(!$('show-names').checked)
			{
				newVideoInfo.style.height = 0 +'px';
				newVideoInfo.style.display = 'none';
			}
			// Insert video info contrainer into sortable container
			newVideoExpand.appendChild(newVideoInfo);
			// Create the image of the camera
			var newCamera = createNewElm('img',false,false,false,'images/camera_gray.png');
			// Insert the image into the video info container
			newVideoInfo.appendChild(newCamera);
			// Create the text for the video
			var newSpan = createNewElm('p',false,false,'simon - logitech_1');
			// Insert the text into the info container
			newVideoInfo.appendChild(newSpan);
			// Create the handle for the sort
			var newVideoHandle = createNewElm('div','video-sort-handle');
			// Insert the handle into the info container
			newVideoExpand.appendChild(newVideoHandle);
			// Insert the sortable container into the page
			$('player-wrapper').appendChild(newVideoCont);
			//We have to add the list item to our Sortable object so it's sortable.
			sortVideo.addItems($(newVideoCont.id));
			// Runs function to resize video
			adjustVideoSize(newVideo);
			videoResize(newVideo);
			videoHover(newVideoExpand);
			
			//round the corners
			// Nifty("div#videoO"+otherVids, "transparent top");
			
			//reset the scroll bar
			adjustBar('player');
		});
	}

	// This is used for the temporary button to add new videos to the player
	if($('addSelfCamera'))
	{
		$('addSelfCamera').addEvent('click', function(e) {
			e.stop();
			selfVids++;
			// Create the container for the video and info that will be sortable
			var newVideoCont = createNewElm('div','video-containers','self-video-container'+selfVids);
			// Create the expander container
			var newVideoExpand = createNewElm('div','video-expander','videoR'+vidResize);
			vidResize++;
			newVideoCont.appendChild(newVideoExpand);
			// Set the margins to what is set by the player controls
			newVideoCont.style.margin = $('video-border-input').value + 'px';
			
			var newVideoClose = createNewElement('div','video-close-box');
			newVideoClose.innerHTML = "X";
			newVideoClose.onClick = "closeVideo(this);";
			newVideoExpand.appendChild(newVideoClose);
			
			// Create the save recording box
			var newSaveCont = createNewElm('div','save-record','save-record'+selfVids);
			newSaveCont.innerHTML = "give your video a name<br />				<input class=\"input-camera\" type=\"text\" name=\"save_recording"+selfVids+"\" id=\"save-recording"+selfVids+"\" /><br />				<div class=\"bottom-options\" style=\"float:none;\"><a onclick=\"hideElement('save-record"+selfVids+"'); return false;\" href=\"#\">cancel</a> <a onclick=\"hideElement('save-record"+selfVids+"'); return false;\" href=\"#\">save</a></div>";
			newVideoExpand.appendChild(newSaveCont);
			
			// Create the video container
			var newVideo = createNewElm('div','videos','videoS'+selfVids);
			// Insert video container into sortable container
			newVideoExpand.appendChild(newVideo);
			// Create the video info container
			var newVideoInfo = createNewElm('div','videos-info');
			// Hides the info if the option to show the name is not checked
			if(!$('show-names').checked)
			{
				newVideoInfo.style.height = 0 +'px';
				newVideoInfo.style.display = 'none';
			}
			// Insert video info contrainer into sortable container
			newVideoExpand.appendChild(newVideoInfo);
			// Create the image of the camera
			var newCamera = createNewElm('img',false,'self-cam'+selfVids,false,'images/camera_gray.png');
			newCamera.onClick = 'startRecording('+selfVids+',true);';
			// Insert the image into the video info container
			newVideoInfo.appendChild(newCamera);
			// Create the text for the video
			var newSpan = createNewElm('p','self-cyan','cam-name'+selfVids,'simon - logitech_'+selfVids);
			// Insert the text into the info container
			newVideoInfo.appendChild(newSpan);
			
			// Create the self controls menu
			var newSelfMenu = createNewElm('div','video-self','video-self'+selfVids);
			newSelfMenu.innerHTML = "<div id=\"video-live"+selfVids+"\" onclick=\"goLive("+selfVids+");\" class=\"video-live go-live lighten"+selfVids+" Tips\" rel=\"click here to begin streaming your video live to the group.\"><img src=\"images/go_live.png\" /> Go Live</div>					<div id=\"video-record"+selfVids+"\" onclick=\"startRecording("+selfVids+");\" class=\"video-record lighten"+selfVids+" Tips\" rel=\"record a video\"><img src=\"images/record.png\" /> Record</div>					<div id=\"video-advanced"+selfVids+"\" onclick=\"openCameraOptions("+selfVids+");\" class=\"video-advanced lighten"+selfVids+" Tips\" rel=\"advanced camera options\"><img src=\"images/advanced_gear.png\" /> Advanced</div>"
			newVideoExpand.appendChild(newSelfMenu);
			if($('show-names').checked)
				newSelfMenu.style.bottom = 29 + 'px';
			else
				newSelfMenu.style.bottom = 11 + 'px';
			// Create the handle for the sort
			var newVideoHandle = createNewElm('div','video-sort-handle');
			// Insert the handle into the info container
			newVideoExpand.appendChild(newVideoHandle);
			// Insert the sortable container into the page
			$('player-wrapper').appendChild(newVideoCont);
			//We have to add the list item to our Sortable object so it's sortable.
			sortVideo.addItems($(newVideoCont.id));
			// Runs function to resize video
			adjustVideoSize(newVideo);
			videoResize(newVideo);
			//Creates the slide function of the self controls menu
			createSelfHide(selfVids);
			createTips('Tips');
			lightenText('lighten'+selfVids,32);
			videoHover(newVideoExpand);
			
			//round the corners
			// Nifty("div#videoS"+selfVids, "transparent top");
			
			//reset the scroll bar
			adjustBar('player');
		});
	}
}

// Function for video resize
var vidResize = 1;
var resizeVid = new Array();
function videoResize(vid){
	//Assign parent element an ID to work in IE
	if(!vid.parentNode.id || vid.parentNode.id == "")
	{
		vid.parentNode.id = "videoR" + vidResize;
		vidResize++;
	}
	// Adjust the size of the component to the size of the module position
	resizeVid[vid.id] = vid.makeResizable({
		modifiers: {x: 'width', y: 'height'},
		// Sets the resize limits
		limit: {x: [116, 503], y: [107, 562]},
		// The element that must be dragged to resize the component
		handle: $(vid.parentNode.id).getElement('.video-sort-handle'), //Needs IE Fix
		// How many pixels you must drag the resize element before it actually begins resizing
		snap: 5, 
		onComplete: function(){
			if(vid.getElement('.actual-video'))
			{
				vid.getElement('.actual-video').width = vid.offsetWidth;
				vid.getElement('.actual-video').height = vid.offsetHeight;
			}
			vid.parentNode.getElement('.videos-info').style.maxWidth = vid.offsetWidth + 'px';
			vid.parentNode.parentNode.style.width = vid.offsetWidth + 6 + 'px';
			vid.parentNode.parentNode.style.height = vid.parentNode.offsetHeight + vid.parentNode.offsetTop + 'px';
			adjustBar('player');
		}
	});
}

// This function makes the gear in the corner toggle the controls for the player
var showPlayerControls = false;
function showVideoControls(){
	var expandHeight = 0;
	// Checks if the controls are showing
	if(!showPlayerControls)
	{
		showPlayerControls = true;
		// Since morphing doesn't allow auto height we must specify a height. The height depends on the width because if it is less than 503px wide, the 2 sides will stack
		if($('video-player-controls-container').offsetWidth < 503)
		{
			expandHeight = 310;
			$('video-player-controls-right').style.cssFloat = $('video-player-controls-right').style.styleFloat = 'left';
			$('video-player-controls-right').getElements('.video-controls-options').each(function(vidOpts){
				vidOpts.style.cssFloat = vidOpts.style.styleFloat = 'left';
			});
		}
		else
		{
			expandHeight = 187;
			$('video-player-controls-right').style.cssFloat = $('video-player-controls-right').style.styleFloat = 'right';
			$('video-player-controls-right').getElements('.video-controls-options').each(function(vidOpts){
				vidOpts.style.cssFloat = vidOpts.style.styleFloat = 'right';
			});
		}
		$('video-player-controls-content').style.height = expandHeight - 43 + 'px';
		// Expands the controls to the specified height
		expandElement("video-player-controls-container",expandHeight);
		// Adjusts the height of the video contrainer so the bottom ones can still be viewed
		compactElement("player-wrapper",$('player-wrapper').offsetHeight-expandHeight);
	}
	else
	{
		showPlayerControls = false;
		expandElement("player-wrapper",$('player-wrapper').offsetHeight+$('video-player-controls-container').offsetHeight);
		compactElement("video-player-controls-container",0);
	}
	adjustBar('player');
}

// Hides/shows the video information when the box is checked and unchecked
function hideVideoNames(){
	if($('show-names').checked)
	{
		$$('.videos-info').each(function(vidInfo){
			vidInfo.style.height = 18 + 'px';
			vidInfo.setStyles({'display':'block'});
		});
		$$('.video-self').each(function(vidSelf){
			vidSelf.style.bottom = 29 + 'px';
		});
		$$('.video-containers').each(function(vidCont){
			vidCont.style.height = vidCont.getStyle('height').toInt() + 18 + 'px';
		});
	}
	else
	{
		$$('.videos-info').each(function(vidInfo){
			vidInfo.style.height = 0 + 'px';
			vidInfo.setStyles({'display':'none'});
		});
		$$('.video-self').each(function(vidSelf){
			vidSelf.style.bottom = 11 + 'px';
		});
		$$('.video-containers').each(function(vidCont){
			vidCont.style.height = vidCont.getStyle('height').toInt() - 18 + 'px';
		});
	}
	
	adjustBar('player');
}

// Hides/shows the self video controls if the box is checked and unchecked
var hidePlayerTop = false;
function hidePlayerOptions(){
	$('player-top').addEvent('mouseenter',function(){
		if(!showPlayerControls && $('show-player-options').checked)
		{
			hidePlayerTop = false;
			expandElement("player-top",31);
			expandElement("player-top-slider",24);
			adjustBar('player');
		}
	});
	$('player-top').addEvent('mouseleave',function(){
		if(!showPlayerControls && $('show-player-options').checked)
		{
			hidePlayerTop = true;
			compactElement("player-top",5);
			compactElement("player-top-slider",0);
			adjustBar('player');
		}
	});
	$('player-top-slider').addEvent('mouseenter',function(){
		if(!showPlayerControls && $('show-player-options').checked)
		{
			hidePlayerTop = false;
			expandElement("player-top",31);
			expandElement("player-top-slider",24);
			adjustBar('player');
		}
	});

}

// Hides and shows the self video controls when mouseover self video contrainer
function createSelfHide(idNum){
	// Creates the morph
	createMorph('video-self'+idNum,500);
	$('self-video-container'+idNum).addEvent('mouseenter',function(){
		morphs['video-self'+idNum].start({
		    'height': 78 //Morphs the height from the current to 78px
		});
	});
	$('self-video-container'+idNum).addEvent('mouseleave',function(){
		morphs['video-self'+idNum].start({
		    'height': 0 //Morphs the height from the current to 0px
		});
	});
}

// Adjust the margins between the videos
function adjustVideoBorder(){
	$$('.video-containers').each(function(vidBorder){
		vidBorder.style.padding = $('video-border-input').value + 'px';
	});
	
	adjustBar('player');
}

// Adjust the size of the video and info container
function adjustVideoSize(elm){
	// Starting width and height of the video
	var baseW = 166;
	var baseH = 150;
	var step = $('video-size-input').value;
	if(step < 10)
		var percent = 1 - ( (10 - step) * .025);
	else
		var percent = 1 + ( (step - 10) * .05);
	// Checks if just sizing one video
	if(elm)
	{
		elm.style.width = Math.round(baseW * percent) + 'px';
		elm.style.height = Math.round(baseH * percent) + 'px';
		$(elm.parentNode.id).getElement('.videos-info').style.maxWidth = Math.round(baseW * percent) + 'px';
		$(elm.parentNode.id).parentNode.style.width = elm.offsetWidth + 6 + 'px';
		$(elm.parentNode.id).parentNode.style.height = $(elm.parentNode.id).offsetHeight + $(elm.parentNode.id).offsetTop + 'px';
	}
	else
	{
		$$('.videos').each(function(vid){
			vid.style.width = Math.round(baseW * percent) + 'px';
			vid.style.height = Math.round(baseH * percent) + 'px';
			if(vid.getElement('.actual-video'))
			{
				vid.getElement('.actual-video').width = vid.offsetWidth;
				vid.getElement('.actual-video').height = vid.offsetHeight;
			}
		});
		$$('.videos-info').each(function(vidInfo){
			vidInfo.style.maxWidth = Math.round(baseW * percent) + 'px';
		});
		$$('.video-containers').each(function(vidCont){
			vidCont.style.width = vidCont.getElement('.videos').offsetWidth + 6 + 'px';
			vidCont.style.height = vidCont.getElement('.video-expander').offsetHeight + vidCont.getElement('.video-expander').offsetTop + 'px';
		});
	}
	adjustBar('player');
}

// Set your camera to live/private
var isLive = new Array();
function goLive(idNum){
	if(!isLive[idNum])
	{
		$('video-live'+idNum).innerHTML = '<img src="images/stop_live.png" /> Go Private';
		$('video-live'+idNum).style.color = '#EBA64A';
		if(!startRecord[idNum])
			$('self-cam'+idNum).src = 'images/camera_green.png';
		isLive[idNum] = true;
	}
	else
	{
		$('video-live'+idNum).innerHTML = '<img src="images/go_live.png" /> Go Live';
		$('video-live'+idNum).style.color = '#7DAC59';
		if(!startRecord[idNum])
			$('self-cam'+idNum).src = 'images/camera_gray.png';
		isLive[idNum] = false;
	}
}

// Start/stop recording your video
var startRecord = new Array();
function startRecording(idNum,camClick){
	if(!startRecord[idNum] && !camClick)
	{
		$('video-record'+idNum).innerHTML = '<img src="images/stop_record.png" /> Stop Record';
		$('self-cam'+idNum).src = 'images/camera_red.png';
		startRecord[idNum] = true;
	}
	else if(startRecord[idNum])
	{
		$('video-record'+idNum).innerHTML = '<img src="images/record.png" /> Record';
		$('save-record'+idNum).style.visibility = "visible";
		if(isLive[idNum])
			$('self-cam'+idNum).src = 'images/camera_green.png';
		else
			$('self-cam'+idNum).src = 'images/camera_gray.png';
		startRecord[idNum] = false;
	}
}

// function to open the camera options and inputs the camera name based on the current name
function openCameraOptions(camId){
	var camName = $('cam-name'+camId).innerHTML.split(' - ',1);
	var camName = $('cam-name'+camId).innerHTML.replace(camName[0]+' - ','');
	$('camera_name').value = camName;
	$('video_num').value = camId;
	showElement('advanced-camera-container',true);
}

// chanages the camera name in the file info below the video
function saveCamChange(){
	var camName = $('cam-name'+$('video_num').value).innerHTML.split(' - ',1);
	$('cam-name'+$('video_num').value).innerHTML = camName[0] + " - " + $('camera_name').value;
}

// show and hide all your self cameras
function showSelfCams(){
	if($('show-self-cams').innerHTML == "show all")
	{
		for(x=1;x<=selfVids;x++)
			$('self-video-container'+x).setStyles({'display':'block'});
		$('show-self-cams').innerHTML = "hide all";
	}
	else
	{
		for(x=1;x<=selfVids;x++)
			$('self-video-container'+x).setStyles({'display':'none'});
		$('show-self-cams').innerHTML = "show all";
	}
}

var vidMagnify = new Array();
function videoHover(vidCont){
	vidCont.addEvent('mouseenter',function(){
		vidCont.getElement('.video-close-box').style.visibility = "visible";
		vidCont.parentNode.style.zIndex = 1;
		if(vidCont.offsetWidth < 161)
		{
			vidMagnify[vidCont.id] = vidCont.getElement('.videos').getStyle('height').toInt();
			vidCont.getElement('.videos').style.width = 155 + 'px';
			vidCont.getElement('.videos').style.height = 142 + 'px';
			vidCont.getElement('.videos-info').style.maxWidth = 155 + 'px';
			if(vidCont.getElement('.actual-video'))
			{
				vidCont.getElement('.actual-video').width = 155;
				vidCont.getElement('.actual-video').height = 142;
			}
		}
	});
	vidCont.addEvent('mouseleave',function(){
		vidCont.getElement('.video-close-box').style.visibility = "hidden";
		if(vidMagnify[vidCont.id])
		{
			vidCont.getElement('.videos').style.width = 0;
			vidCont.getElement('.videos').style.height = 0;
			vidCont.getElement('.videos-info').style.maxWidth = 0;
			vidCont.getElement('.videos').style.width = vidCont.parentNode.getStyle('width').toInt() - 6 + 'px';
			vidCont.getElement('.videos').style.height = vidMagnify[vidCont.id] + 'px';
			vidCont.getElement('.videos-info').style.maxWidth = vidCont.parentNode.getStyle('width').toInt() - 6 + 'px';
			if(vidCont.getElement('.actual-video'))
			{
				vidCont.getElement('.actual-video').width = vidCont.parentNode.getStyle('width').toInt() - 6;
				vidCont.getElement('.actual-video').height = vidMagnify[vidCont.id];
			}
			vidMagnify[vidCont.id] = false;
		}
		if(!vidCont.getElement('.save-record') || vidCont.getElement('.save-record').style.visibility != 'visible')
			vidCont.parentNode.style.zIndex = 0;
	});
}

function closeVideo(vid){
	vid.parentNode.parentNode.dispose();
}

// Fires the functions when the page finishes loading
window.addEvent('domready', function(){
	createDrag('player');
	setComponentLimit('player', 31);
	createScroll('player');
	changeResize('player','centermod');
	createVideoSortable();
	createSelfHide(1);
	createSlider('video-size','horizontal',10,20);
	createSlider('video-border','horizontal',0,20);
	createSlider('universal-quality','horizontal',10);
	hidePlayerOptions();
	$$('.videos').each(function(vidInfo){
		videoResize(vidInfo);
	});
	$$('.video-expander').each(function(vidCont){
		videoHover(vidCont);
	});
});