/* Copyright CMC Markets. All rights reserved. */

retailsites.seminars =  { };

////////////////////////////////////////////////////////////////////////////////////////////////////
// Seminar Calendar
////////////////////////////////////////////////////////////////////////////////////////////////////

/**
 * Creates a new instance of a SeminarCalendar
 * @constructor
 * @requires jQuery
 */
retailsites.seminars.SeminarCalendar = function() 
{
};

/**
 * Fields and Constants
 */
retailsites.seminars.SeminarCalendar.prototype = 
{
	dayCount: 0,
	toolTipCharacterLimit: 200,
	
	//CONSTANTS
	SLIDE_DURATION: 700,
	TABLE_WIDTH: 546
}

/**
 * Initialises the calendar. This should only be called once the DOM has loaded
 */
retailsites.seminars.SeminarCalendar.prototype.init = function()
{
	this._setupStyles();
	this._calendarSlideSetup();
	this._checkboxFilterSetup("#seminarSelect input");
	this._checkboxFilterSetup("#regionSelect input");
	this._seminarTooltipsSetup();
}

/**
 * Initial styles for javascript enabled browsers
 */
retailsites.seminars.SeminarCalendar.prototype._setupStyles = function()
{
	jQuery("#seminarCalendar").css("overflow", "hidden");	
	
	//make the sliders visible
	jQuery("#seminarCalendar div#controls").css("display", "block");	
	
	//make the filters visible
	jQuery("#seminarCalendar div#filters").css("display", "block");	
	
	//ensure calendar has a left style defined for MSIE
	jQuery("#seminarCalendar table").css("left", 0);	
};

/**
 * Makes the change week calendar buttons work.
 */
retailsites.seminars.SeminarCalendar.prototype._calendarSlideSetup = function()
{
	var slideDuration = this.SLIDE_DURATION;
	var tableWidth = this.TABLE_WIDTH;
	var thisSeminarCalendar = this;
		
	//move the calendar dates forward
	jQuery("#slideForward").click(function() {
	
		var currentLeft = jQuery("#seminarCalendar table").css("left");
		var currentLeft = currentLeft.replace("px", "");
		
		var newLeft = parseInt(currentLeft) - tableWidth;
		
		//don't scroll past this value
		var leftLimit = -(Math.round((tableWidth / 7) * thisSeminarCalendar.dayCount))
		
		if(newLeft % tableWidth == 0 && newLeft > leftLimit)
		{
			jQuery("#seminarCalendar table").animate({"left" : newLeft}, slideDuration);
		}
	});
	
	//move the calendar dates backward
	jQuery("#slideBack").click(function() 
	{
		var currentLeft = jQuery("#seminarCalendar table").css("left");
		var currentLeft = currentLeft.replace("px", "");
		var newLeft = parseInt(currentLeft) + tableWidth;

		if(newLeft % tableWidth == 0 && newLeft <= 0)
		{
			jQuery("#seminarCalendar table").animate({"left" : newLeft}, slideDuration);
		}
	});	
};

/**
 * Makes the filter checkboxes work
 * @param checkboxSelector a xpath expression to select all checkbox inputs
 * 						   with which this function makes work
 */
retailsites.seminars.SeminarCalendar.prototype._checkboxFilterSetup = function(checkboxParentSelector)
{
	jQuery(checkboxParentSelector).each(function() 
	{
		jQuery(this).click(function() 
		{
			//decide if clicking the checkbox will show or hide elements
			var visibility;
			if(jQuery(this).is(":checked"))
			{
				visibility = "visible";
			}
			else
			{
				visibility = "hidden";
			}
			
			//for each hidden field with same value as the checkbox
			//set its parent form element's visibility
			var checkboxValue = jQuery(this).val();
			//jQuery("input[@value=" + checkboxValue + "]").each(function() 
			jQuery("input[@name=dyn_name]").each(function() 
			{
				if(jQuery(this).val() == checkboxValue)
				{
					jQuery(this).parent("form").css("visibility", visibility);
				}
			});
		});
	});
};

/**
 * Shows tooltips
 */
retailsites.seminars.SeminarCalendar.prototype._seminarTooltipsSetup = function() 
{
	var tooltipOn = false;
	
	var characterLimit = this.toolTipCharacterLimit;
				
	jQuery("#seminarCalendar div.events h5").each(function() 
	{
		var tooltip;
		
		//creates a tooltip with the relevant description
		jQuery(this).mouseover(function(e) {
		
			if(!tooltipOn)
			{
				tooltipOn = true;
				
				tooltip = document.createElement("div");
				jQuery(tooltip).addClass("seminarTooltip");
					
				//find the description for this tooltip
				var description = jQuery(this).siblings("input[@name=dyn_description]").val();

				if(description.length > characterLimit)
				{
					description = description.substring(0, characterLimit) + "...";
				}
						
				jQuery(tooltip).append(description);
				
				jQuery("body").append(tooltip);
			}
		});
		
		//moves it about
		jQuery(this).mousemove(function(e) 
		{
			if(tooltipOn)
			{
				//move with mouse
				var x = (e.pageX - 200) + "px";
				var y = (e.pageY - 175) + "px";
				jQuery(tooltip).css({"left" : x, "top" :  y });
			}
		});
		
		//destroys the tooltip
		jQuery(this).mouseout(function() 
		{
			jQuery(tooltip).remove();
			tooltipOn = false;
		});				
	});
};

////////////////////////////////////////////////////////////////////////////////////////////////////
// Seminar Map
////////////////////////////////////////////////////////////////////////////////////////////////////

/**
 * Seminar map object
 * @requires jQuery, Google Maps 2 Api
 */			
retailsites.seminars.SeminarMap = function(mapSelector) 
{
	this.mapSelector = mapSelector;
};
retailsites.seminars.SeminarMap.prototype = 
{
	mapSelector: null,
	venue: null,
	zoom: 14,
	bullMarkerImageUri: "http://www.cmcmarkets.ca/repository/images/icons/bull_map_icon.png",
	
	//constants
	DEFAULT_MAP_HEIGHT: 300		
};


/**
 * Initialise the map. 
 */
retailsites.seminars.SeminarMap.prototype.init = function(venue,visible) 
{
    var thisSeminarMap = this;
	var mapElement = jQuery(this.mapSelector).get(0);
	
	if(GBrowserIsCompatible() &&  mapElement != null) 
	{
		var map = new GMap2(mapElement);
	   	
	    //add controls
	    map.addControl(new GLargeMapControl());
	    map.setCenter(new GLatLng(54.367759, -94.746094), thisSeminarMap.zoom);
	        
	    //add seminar venue
	    var geocoder = new GClientGeocoder();
		geocoder.getLatLng(venue, function(latlng) 
		{ 
			//callback
			var marker = thisSeminarMap.createBullMarker(latlng, jQuery("#venueAddress"));
		   	map.addOverlay(marker);
		   	map.setCenter(latlng, thisSeminarMap.zoom);

		   	// if visible is set true, then stay open, otherwise, set height = 0; 
		   	if(!visible){
			   	//hide after (setCenter must be set while height is 300)
			   	jQuery(mapElement).css("height", 0);
		   	}
		});
		
							
		jQuery("#seminarMapToggle").click(function() 
		{
			thisSeminarMap.toggleShowMap();
		});
	}
	else
	{
		jQuery("#seminarMapToggle").css("display", "none");
	}
};

retailsites.seminars.SeminarMap.prototype.createBullMarker = function(latlng, element) 
{
    //custom marker icon
    var icon = new GIcon();
    icon.image = this.bullMarkerImageUri;
    icon.iconSize = new GSize(33, 33);
    icon.iconAnchor = new GPoint(20, 20);
	icon.infoWindowAnchor = new GPoint(1, 1);
	
	var marker = new GMarker(latlng, icon);
	GEvent.addListener(marker, "click", function() 
	{
		 marker.openInfoWindow(element);
	});
	
	return marker;
};

retailsites.seminars.SeminarMap.prototype.toggleShowMap = function() 
{		
	var mapHeight = jQuery(this.mapSelector).height();
	if(mapHeight == this.DEFAULT_MAP_HEIGHT)
	{
		jQuery(this.mapSelector).animate({"borderWidth" : 0, "height" : 0}, 400);
	}
	else if(mapHeight == 0)
	{
		jQuery(this.mapSelector).animate({"borderWidth" : 1, "height" : this.DEFAULT_MAP_HEIGHT}, 400);
	}

};