/* Tooltip for the NAMS logo */
$(function(){
	$("#logoNams").tooltip({
		    showURL: false,
			bodyHandler: function()
			{
			    return $("div#tooltipNams").html();
			},
			track: false,
			fade: 250
			});

	$("#logoIIMS").tooltip({
	    showURL: false,
		bodyHandler: function()
		{
		    return $("div#tooltipIIMS").html();
		},
		track: false,
		fade: 250
		});

});



/* Animation plugin that moves around html elements, zooms them, etc.. */

(function($){
	
	$.fn.animatepageGetWrapperId = function() {
			return 'animatepage-outer-' + this.attr('id');
	};
})(jQuery);
	
(function($){
	
	$.fn.animatepageWrapper = function(widthTxt) {
		
		var _self = this;
		
		this.wrapper = $("<div></div>")
			.attr("id", _self.animatepageGetWrapperId())
			.css({
				'position': 'absolute',
				'border-width': '0px',
				'margin': '0px',
				'padding': '0px'
				});
			
		if (widthTxt != '')
		{
			this.wrapper.width(widthTxt);
		}
		this.wrap(this.wrapper);
		
		return this;
	};
})(jQuery);
	
(function($){
		
	$.fn.animatepage = function(elements, options) {
		var _self = this;
		var settings = $.extend({
			animations: null
		}, options || {});
		
		this.refOffset = this.offset();

		/* When elements are removed, the height and width of the container should remain the same */
		this.css('height', this.innerHeight());
		this.css('width', this.innerWidth());

		_self.$newElements = $("<div></div>"); /* Store the new elements here */
		_self.$newElements.css('top', _self.refOffset.top);   // maybe margins and padding should be compensated.
		_self.$newElements.css('left', _self.refOffset.left);
		_self.$newElements.width(_self.width());
		_self.$newElements.height(_self.height());
		
		this.find(elements).each(function(){
			var elementOffset = $(this).offset();
			var elementWidth = $(this).width();
			var elementHeight = $(this).height();

			var elementTop = elementOffset.top - _self.refOffset.top
			- (parseInt(_self.css('paddingTop'), 10) || 0)
			- (parseInt(_self.css('marginTop'), 10) || 0)
			;
			
			var elementLeft = elementOffset.left - _self.refOffset.left 
				- (parseInt(_self.css('padding-left'), 10) || 0)
				- (parseInt(_self.css('margin-left'), 10) || 0)
				;
		
			var $newElement = $(this).clone();
			
			$newElement.appendTo(_self.$newElements);

			$newElement.css({'position': 'absolute',
							 'top': elementTop,
							 'left': elementLeft,
							 'width': elementWidth,
							 'height': elementHeight});
			$newElement.animatepageWrapper();
		});

		this.empty();
		this.append(_self.$newElements.contents());
		
		return this;
	}
}) (jQuery); 


/* Animation to play the jebel ali movie */
$(function() {
//	$("#jebelFlashDiv").hide(); 
//	return;
//	$("#mainArea1").animatepage('#text1, #jebelFlashDiv, #linkJebelAli, #img1, #img2, #img3');
	$("#mainArea1").animatepage('#text1, #linkJebelAli, #yatchSlider, #sep09News');
	$("#text1").css('overflow', 'auto');

//	var jebelThumbnail = {width: $("#jebelFlashDiv-image img").outerWidth(), height: $("#jebelFlashDiv-image img").outerHeight()};

	/* Hardcode the width & height with the same values as specified in css */
	var jebelThumbnail = {width: 205, height: 165};
	
	var $jebelLink = $("#linkJebelAli");
	var jebelLink = {width: $jebelLink.width(), height: $jebelLink.height(), 
			left: (parseInt($jebelLink.css('left'), 10) || 0), top: (parseInt($jebelLink.css('top'), 10) || 0)};
	var jebelVideo = {width: 480, height: 385};
	var textLowerHeight1 = 250;
	var textLowerHeight2 = 250;
	
	$("#jebelAli").css({position: 'relative', zIndex: 1, top: '1px', left: '0px'});
	var buttonWidth = 15;
	var buttonOffset = 5;
	var $closeButton = $("<div id='jebel_close_button'>&nbsp;</div>").width(buttonWidth).height(buttonWidth)
		.addClass('ui-icon ui-icon-close')
		.hover(function(){$(this).removeClass('ui-icon ui-icon-close').addClass('ui-icon ui-icon-closethick')}, 
				function(){$(this).removeClass('ui-icon ui-icon-closethick').addClass('ui-icon ui-icon-close')})
		.css({border: 'solid gray 0px', 
			position: 'absolute', 
			zIndex: 1,
			top: buttonOffset,
			left: (jebelVideo.width - buttonWidth - buttonOffset)
			})
		.hide();
	$("#jebelAli").append($closeButton);

	var zoomInComplete = function() {
//		enableCloseButton();
		$("#jebel_close_button").show();
		enableClosebuttonClick();
	};
	
	var zoomOutComplete = function() {
//		enableClick();
		enableThumbnailClick();
	};
	
	var zoomInFlash = function() {
		/* Move the div left */
		$(this).animate({left: "-=" + jebelLink.left}, 300, 'easeInExpo'); 
		
		/* Zoom-In thumbnail, after which hide the image and show the flash */
		$("#jebelFlashDiv-image img")
			.animate({left: "-=0"}, 300)
			.animate({width: jebelVideo.width,height: jebelVideo.height},300, 'easeOutCirc', function(){
					$(this).hide();  						   // Hide the thumbnail
					$("#jebelFlash1, #jebelFlash2")
						.width(jebelVideo.width)    		   // Set flash to full size
						.height(jebelVideo.height);
					$("#jebelFlashDiv-header").show(); // Show the header with close button
					zoomInComplete();
				});

		$("#jebelAli") 
			.animate({left: "-=0"}, 300)
			.animate({width: jebelVideo.width}, 300, 'easeOutCirc');

		/* Move down the text on the LHS */
		$("#text1")
			.animate({top: "+=" + textLowerHeight1, height: "-=" + textLowerHeight1}, 300, 'easeOutCirc')
			.animate({top: "+=" + textLowerHeight2, height: "-=" + textLowerHeight2}, 300, 'easeOutCirc');
		
	};
	
	var zoomOutFlash = function() {
		$("#jebelFlashDiv-header").hide(); // Hide the header with close button
		$("#jebelFlash1, #jebelFlash2").width(1).height(1); // Set Flash to minute size
		$("#jebelFlashDiv-image img").show(); // Show the thumbnail
		$("#jebelAli").width(jebelLink.width);  
		
		/* Move the div right */
		$(this).animate({left: "+=" + jebelLink.left},200, 'easeOutCirc'); 
	
		$("#jebelFlashDiv-image img")
			.animate({width: jebelThumbnail.width + 2, height: jebelThumbnail.height},200, 'easeOutCirc'); // Zoom-Out thumbnail
	
	
		$("#text1")
			.animate({left: "-=0"}, 200, 'easeOutQuart')
			.animate({top: "-=" + (textLowerHeight1 + textLowerHeight2), height: "+=" + (textLowerHeight1 + textLowerHeight2)},
					500, 'easeOutExpo',
					function(){zoomOutComplete()});
		
	};

//	$("#linkJebelAli").data('isZoomed', 0);
//
//	var videoClicked = function() {
//		if ($(this).data('isZoomed') == 0)
//		{
//			$(this).data('isZoomed', 1);
//			zoomInFlash.call(this);
////			$(this).append('Y');
//		}
//		else
//		{
//			$(this).data('isZoomed', 0);
//			zoomOutFlash.call(this);
////			$(this).append('N');
//		}
//		$(this).unbind("click");
//	};

//		$("#linkJebelAli").bind("click", videoClicked);
		
	var enableThumbnailClick = function(){
		$("#linkJebelAli").bind("click", function(){
			zoomInFlash.call($("#linkJebelAli"));
			$(this).unbind("click");
		});
	};

	var enableClosebuttonClick = function(){
		$("#jebel_close_button").bind("click", function(){
			zoomOutFlash.call($("#linkJebelAli"));
			$(this).unbind("click");
			$(this).hide();
		});
	};
	enableThumbnailClick();

//	$("#linkJebelAli").data('isZoomed', 1)
//				.bind("click", function(){
//					zoomInFlash.call(this);
////				$(this).unbind("click");
//			});
//		}
//		else
//		{
//			$("#linkJebelAli").data('isZoomed', 0);
//			 $closeButton.bind("click", function(){
//				 zoomOutFlash.call($("#linkJebelAli"));
////				$(this).unbind("click");
//			});
//		}

//	};
});

/* Hover effect for Jebel Ali case on home page */
/*
$(function() {
	$("div#jebelAli, #jebelFlashDiv-header").hover(
		function(){
			$(this).css('backgroundColor', '#ffff66').css('cursor', 'pointer');
		},
		function(){
			$(this).css('backgroundColor', '').css('cursor', 'auto');;
		});
});
*/


$(function() {
	featuredcontentslider.init({
		id: "slider1", //id of main slider DIV
		contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
		toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
		nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
		enablefade: [true, 0.2], //[true/false, fadedegree]
		autorotate: [true, 3000], //[true/false, pausetime]
		onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
			//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
			//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
		}
	});

	featuredcontentslider.init({
		id: "slider2", //id of main slider DIV
		contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
		toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
		nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
		enablefade: [true, 0.2], //[true/false, fadedegree]
		autorotate: [true, 2900], //[true/false, pausetime]
		onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
			//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
			//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
		}
	});
	
	featuredcontentslider.init({
		id: "slider3", //id of main slider DIV
		contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
		toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
		nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
		enablefade: [true, 0.2], //[true/false, fadedegree]
		autorotate: [true, 3100], //[true/false, pausetime]
		onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
			//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
			//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
		}
	});


	/* Slider 4 has been disabled */
	/*
	featuredcontentslider.init({
		id: "slider4", //id of main slider DIV
		contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
		toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
		nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
		enablefade: [true, 0.2], //[true/false, fadedegree]
		autorotate: [true, 3000], //[true/false, pausetime]
		onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
			//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
			//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
		}
	});
	 */
	$("#sep09News")
		.hover(function(){$(this).css('cursor', 'pointer')},
				function(){$(this).css('cursor', 'default')})
		.click(function(){location = '/projects.html'})
		.tooltip({
		    showURL: false,
			bodyHandler: function()
			{
			    return "(September 2009) Vessel Towed due to Alleged Main Engine breakdown in Mid-Indian Ocean - Consultation towards various on board issues<br> <b>Click For More Details.</b>";
			},
			track: false,
			fade: 250})
		;
});