var LP_Width = 380;
var LP_Height = 100;
var LP_Border_Size = 4;



//create a new element which will function as a link preview
var Link_Preview = new Element('div',
{
	'id':'link_preview',
	'styles':
	{
		'width':LP_Width,
		//'height':LP_Height,
		'border-bottom':'1px solid #000',
		'border-right':'1px solid #000',
		'background':'#fff',
		'position':'absolute',
		'z-index':'60000'

	}
}).adopt(Link_Preview_Inner = new Element('div',
	{
		'class':'inner',
		'styles':
		{
			'border':LP_Border_Size+'px solid #30AB3F',
			'min-height': LP_Height
			//LP_Height-(LP_Border_Size*2)
		}

	}
).adopt(Loading_Graphic = new Element('img',{

		'src':'/imgs/ajax-loader.gif',
		'width':15,
		'mheight':15,
		'alt':'Loading',
		'styles':
		{
			'position':'relative',
			'top':((LP_Height-(LP_Border_Size*2))/2)-7,
			'left':((LP_Width-(LP_Border_Size*2))/2)-7
		}
})));




//


window.addEvent('domready', function(){

	//if this a course landing page apply class so colour coding can apply
	var page_class = $('page-text').getProperty('class');
	if(page_class.contains('landing_page_container'))
	{
		//get course id via regex
		var rs_class_name = page_class.match(/landing_page_container_(\d{1,4})/i);

		Link_Preview.addClass("preview_page_"+rs_class_name[1]);
	}


//	Link_Preview_Inner.set('html','<h1>blah</h2><p>para</p>');
//	Link_Preview.inject('body_tag','bottom');

//	alert("removing");
//	$('link_preview').dispose();
//	alert("putting back");
//	Link_Preview_Inner.set('html','<h1>blahefergretg er</h2><p>rgtarewg ra gwa</p>');
//	Link_Preview.inject('body_tag','bottom');


	$$('a.preview').each( function(item, index){
		//console.log(item.get('text'))


		//fix display problems - JM to replace this when time permits
		var linkSize = item.getSize();
		item.setStyles(
		{
			'width':(linkSize.x-40)+'px',
			'display':'block'
		});

		$try( function(){ item.getParent('p').setStyle( 'margin-bottom',10 ); } );

		//if( item.getParent('p') )
			





		//remove title if exist
		if(item.getProperty('title'))
			item.removeProperty('title');

		//set coordinates for Link box
		function getCoordinates(event, pageSize, newHeight)
		{
			if((event.page.x + LP_Width + 10) >= pageSize.x)
				moveToX = event.page.x-LP_Width-10;
			else
				moveToX = event.page.x+10;

			EL_Height = (newHeight) ? newHeight : LP_Height;
			//console.log('newheight'+newHeight);
			//console.log(EL_Height);

			if((event.client.y + EL_Height +10) >= pageSize.y)
				moveToY = event.page.y-EL_Height-10;
			else
				moveToY = event.page.y+10;

			return [moveToX,moveToY];
		}

		item.addEvents({

			'click':function(event)
			{
				event.stop();
			},

			'mouseover':function(event)
			{
				//var preview_content_url = item.getProperty('href');
				//console.log(preview_content_url);

				//get page size and mouse coordinates
				var pageSize = window.getSize();
				//console.log(pageSize);
				//console.log("x:"+event.client.x + " , y:" +event.client.y);



				(function(){
					Link_Preview.inject($('body_tag'),'bottom');

					var elem_height = null;
					if($('link_preview'))
						var elem_height = $('link_preview').getSize();


					var preview_coordinates = getCoordinates(event, pageSize, elem_height.y);

					Link_Preview.setStyles({
						'top': preview_coordinates[1],
						'left': preview_coordinates[0]
					});
				}).delay(20);

				new Request.HTML({
					//url:,
					onSuccess:function(responseTree, responseElements, responseHTML, responseJavaScript)
					{
						Link_Preview_Inner.set('html', responseHTML);

						if(Link_Preview_Inner.getElement('h2'))
								Link_Preview_Inner.getElement('h2').addClass('path_icon');

						//get page size and mouse coordinates
						var pageSize = window.getSize();

						//console.log("moving");
						if($('link_preview'))
						{
							var elem_height = $('link_preview').getSize();
							var preview_coordinates = getCoordinates(event, pageSize, elem_height.y);
							$('link_preview').setStyles({
								'top': preview_coordinates[1],
								'left': preview_coordinates[0]
							});
						}
					},

					onFailure:function()
					{
						//alert("faliure");
					}
				}).get(item.getProperty('href')+'?content_only');

				//event.target.addEvent
			},

			'mousemove': function(event)
			{
				//get page size and mouse coordinates
				var pageSize = window.getSize();

				//console.log("moving");
				if($('link_preview'))
				{
					var elem_height = $('link_preview').getSize();
					
					var preview_coordinates = getCoordinates(event, pageSize, elem_height.y);

					$('link_preview').setStyles({
						'top': preview_coordinates[1],
						'left': preview_coordinates[0]
					});
				}
			},

			'mouseout':function(event)
			{
				(function(){

					if($('link_preview'))
						$('link_preview').dispose();
					Link_Preview_Inner.getChildren().dispose();
					Link_Preview_Inner.adopt(Loading_Graphic);

				}).delay(10);
			}
		});

		//item.get
	},this);




	// Gets all paragraphs with a listed class name and add a span tag as the first child element
	$$('p.support_icon, p.tutor_icon, p.exam_icon, p.key_icon, p.materials_icon, p.days_icon, p.clock_icon').each(function(item, index)
	{
		new Element('span', { 'class':'icon' }).inject(item, 'top');
	});




//	applies opacity to all elements that require it
	$$('.set_opacity').each(function(item,index)
	{
		//check if class exists "alpha_xx"
		var item_class = item.getProperty('class');
		if(item_class.contains('alpha_'))
		{
			var opacity_match = item_class.match(/alpha_(\d{1,2})/i);
			//console.log("opacity: "+opacity_match);
			item.set('opacity', '.'+opacity_match[1]);
		}
	});

//	if(page_class.contains('landing_page_container'))
//	{
//		//get course id via regex
//		var rs_class_name = page_class.match(/landing_page_container_(\d{1,4})/i);
//
//		Link_Preview.addClass("preview_page_"+rs_class_name[1]);
//	}


//	gets all ul tags inside left-panel and adds surrounding divs to style
	$$('#left-panel ul').each(function(item,index)
	{
		if(
			!item.getParent('.course-panel') &&
			!item.getParent('.text-container') &&
			!item.hasClass('no-style') &&
			!item.getParent('#tabbed-nav')
		)
		{

			//ul is not inside menu so apply stlyes
			var wrapper_div = new Element('div',
			{
				'class':'styled_ul'
			})

			var inner_wrapper_div = new Element('div',
			{
				'class':'styled_ul_inner'
			})


			inner_wrapper_div.wraps(item);

			//applies extra divs if classname is supplied for positioning of images inside ul styled boxes
			if(item.hasClass('step1')) inner_wrapper_div.grab(new Element('div', { 'class':'step1' }), 'bottom');
			else if(item.hasClass('step2')) inner_wrapper_div.grab(new Element('div', { 'class':'step2' }), 'bottom');
			else if(item.hasClass('step3')) inner_wrapper_div.grab(new Element('div', { 'class':'step3' }), 'bottom');
			else if(item.hasClass('step4')) inner_wrapper_div.grab(new Element('div', { 'class':'step4' }), 'bottom');

			wrapper_div.wraps(inner_wrapper_div);

			//This hack works to find if there is a page navigation menu and
			//if the ul box coordinates coordinates clash with the menu
			//coodinates then we change the styled UL class names to initiate new classes
			if($('page_navigation'))
			{
				//get the coodinates of the page menu
				var menu_coords = $('page_navigation').getCoordinates();
				var ul_position = wrapper_div.getPosition();

				if( menu_coords.bottom >= ul_position.y )
				{
					wrapper_div.removeClass('styled_ul');
					wrapper_div.addClass('styled_ul_small');
					inner_wrapper_div.removeClass('styled_ul_inner');
					inner_wrapper_div.addClass('styled_ul_inner_small');
				}
			}

			if($('cs-landing-right'))
			{
				//get the coodinates of the page menu
				var menu_coords = $('cs-landing-right').getCoordinates();
				var ul_position = wrapper_div.getPosition();

				if( menu_coords.bottom >= ul_position.y )
				{
					wrapper_div.removeClass('styled_ul');
					wrapper_div.addClass('styled_ul_small');
					inner_wrapper_div.removeClass('styled_ul_inner');
					inner_wrapper_div.addClass('styled_ul_inner_small');
				}
			}




			if(Browser.Engine.trident4)
			{
				var inner_wrapper_size = inner_wrapper_div.getSize();
				inner_wrapper_div.setStyle('height', inner_wrapper_size.y)
			}


		}
	});



});