/*
FILE CONCAT ADD FILE
PATH: /ft/resources/client/DateSelect.1.js
*/
/*
This file requires Element and Events from jslib

Creates 3 select boxes (month, day, year)
arguments for DateSelect:
	container = what the select boxes should be appended to
	date = could be single date or date array.  Format can be either JS or Alerts style
	labels = could be single label or label array.
	monthType = how the months should be displayed (abbr: 3 letter month; upper: 3 letter month uppercase; num: month number; full: full month name
	yearCount = how many years to display in select box
	separator = include an html element to separate more than one group of select boxes.
	selectedDate = single date or date array.
*/

function DateSelect(args) { this.setDateSelectBoxes(args); }

DateSelect.prototype.setDateSelectBoxes = function(args)
{
	this.container = args.container || document.body;
	var date = args.date || new Date();
	var labels = args.labels || "";
	this.separator = args.separator || "";

	this.monthType = args.monthType || "full";
	this.yearCount = args.yearCount || 3;

	this.labels = this.convertToArray(labels);
	this.dates = this.convertToArray(date);
	this.selectedDates = this.convertToArray(args.selectedDate);

	this.monthSelect = [];
	this.daySelect = [];
	this.yearSelect = [];

	var months, splitDate, dayCount, selectedDate;
	for ( var i=0; i<this.dates.length; i++ )
	{
		if ( i  && this.separator != "" ) {
			Element.create("span", "", this.separator, this.container);
		}

		if (!(this.dates[i] instanceof Date)) {
			this.dates[i] = this.convertDateFormat(this.dates[i]);
		}
		if (this.selectedDates)
		{
			if (!(this.selectedDates[i] instanceof Date))
			{
				this.selectedDates[i] = this.convertDateFormat(this.selectedDates[i]);
			}
		}

		var currentDate = new Date();
		var currentYear = currentDate.getFullYear();

		splitDate = this.splitSelectDates(this.dates[i]);

		if (this.selectedDates instanceof Array) {
			selectedDate = this.splitSelectDates(this.selectedDates[i]);
		} else {
			selectedDate = splitDate;
		}

		months = this.getMonthLabels();

		if ( this.labels[i] ) {
			Element.create("label", "", this.labels[i], this.container);
		}

		var selects = this.buildSelectElements();
		this.monthSelect[i] = selects.month;
		this.daySelect[i] = selects.day;
		this.yearSelect[i] = selects.year;

		this.setMonth(i, months, splitDate, selectedDate);
		this.setDate(i, splitDate, selectedDate);
		this.setYear(i, currentYear, splitDate, selectedDate);
	}
	this.setDatesJS();
}

DateSelect.prototype.buildSelectElements = function()
{
	return {
		month: Element.create("select", { className: "dateSelectMonth" }, "", this.container)
		,day: Element.create("select", { className: "dateSelectDay" }, "", this.container)
		,year: Element.create("select", { className: "dateSelectYear" }, "", this.container)
	};
}


DateSelect.prototype.setMonth = function(i, months, splitDate, selectedDate) {
	for ( var x=0; x<months.length; x++ ) {
		var opt = Element.create("option", { value:x+1 }, months[x][this.monthType], this.monthSelect[i]);
		if ( x == selectedDate.mm ) {
			opt.selected = true;
		}
	}
	Events.add({ element:this.monthSelect[i], type:"change", handler:this.daysInMonthSelectBox, context:this, data:{index:i} });
}


DateSelect.prototype.setDate = function(i, splitDate, selectedDate) {
	dayCount = this.daysInMonth(selectedDate.yy, (selectedDate.mm+1));
	for ( var x=1; x<dayCount+1; x++ ) {
		var opt = Element.create("option", { value:x }, x, this.daySelect[i]);
		if ( x == selectedDate.dd ) {
			opt.selected = true;
		}
	}
	Events.add({ element:this.daySelect[i], type:"change", handler:this.setDatesJS, context:this });
}


DateSelect.prototype.setYear = function(i, currentYear, splitDate, selectedDate) {
	currentYear = splitDate.yy < currentYear ? splitDate.yy : currentYear;

	for ( var x=0; x<this.yearCount; x++ ) {
		var opt = Element.create("option", { value:currentYear }, currentYear, this.yearSelect[i]);
		if ( currentYear == selectedDate.yy ) {
			opt.selected = true;
		}
		currentYear++;
	}
	// this event will check to see if it is leap year
	Events.add({ element:this.yearSelect[i], type:"change", handler:this.daysInMonthSelectBox, context:this, data:{index:i} });
}


DateSelect.prototype.getMonthLabels = function() {
	var months = [
		{ abbr: "Jan", upper: "JAN", num: "01", full: "January" },
		{ abbr: "Feb", upper: "FEB", num: "02", full: "February" },
		{ abbr: "Mar", upper: "MAR", num: "03", full: "March" },
		{ abbr: "Apr", upper: "APR", num: "04", full: "April" },
		{ abbr: "May", upper: "MAY", num: "05", full: "May" },
		{ abbr: "Jun", upper: "JUN", num: "06", full: "June" },
		{ abbr: "Jul", upper: "JUL", num: "07", full: "July" },
		{ abbr: "Aug", upper: "AUG", num: "08", full: "August" },
		{ abbr: "Sep", upper: "SEP", num: "09", full: "September" },
		{ abbr: "Oct", upper: "OCT", num: "10", full: "October" },
		{ abbr: "Nov", upper: "NOV", num: "11", full: "November" },
		{ abbr: "Dec", upper: "DEC", num: "12", full: "December" }
		];

	return months;
}

// gets the number of days in a month and factors in Leap Year
DateSelect.prototype.daysInMonth = function(year, month) {
	var days = new Date(year, month, 0);
	var monthDays = days.getDate();

	return monthDays;
}

DateSelect.prototype.daysInMonthSelectBox = function(e, el, data) {
	var dayIndex = this.daySelect[data.index].value;

	var monthDays = this.daysInMonth(this.yearSelect[data.index].value, this.monthSelect[data.index].value);

	Element.removeChildNodes(this.daySelect[data.index], "");
	for ( var i=1; i<monthDays+1; i++ ) {
		var opt = Element.create("option", { value:i }, i, this.daySelect[data.index]);

		if ( i == dayIndex ) {
			opt.selected = true;
		}
	}

	this.setDatesJS();
}

DateSelect.prototype.convertToArray= function(arr) {
	if (arr !== undefined && !Element.isArray(arr) ) {
		arr = [arr];
	}

	return arr;
}

//converts Alert format dates to JS dates
DateSelect.prototype.convertDateFormat= function(str) {
	str = String(str);

	if ( str.length == 8) {
        var date =  new Date(str.substring(0,4), str.substring(4,6) - 1, str.substring(6,8));
		if ( isNaN(date) ) {
			date = new Date();
		}
		return date;
    } else if ( str.length == 5 || str.indexOf(".") > -1 ) {
		var date = this.msToJsDate(str);
		return date;
    } else if ( str.length == 10 || str.indexOf("-") > -1 ) {
        var date =  new Date(str.substring(0,4), str.substring(5,7) - 1, str.substring(8,10));
		if ( isNaN(date) ) {
			date = new Date();
		}
		return date;
    } else {
        return new Date();
    }
}

DateSelect.prototype.splitSelectDates = function(date, prepend) {
	var yy = date.getFullYear();
	var mm = date.getMonth();
	var dd = date.getDate();

	if ( prepend ) {
		mm = mm+1 < 10 ? "0"+(mm+1) : mm+1;
		dd = dd < 10 ? "0"+dd : dd;
	}

	return { yy:yy, mm:mm, dd:dd };
}

DateSelect.prototype.msToJsDate = function(date) {
	var jsdate =new Date(((date-25569)*86400000));
	var timezone = jsdate.getTimezoneOffset();
	var d = new Date(((date-25569+(timezone/(60*24)))*86400000));

	return d;
}

DateSelect.prototype.setDatesJS = function() {
	var date = [];
	
	for ( var i in this.dates ) {
		if ("function" != typeof this.dates[i]) {
			date.push(new Date(this.yearSelect[i].value, this.monthSelect[i].value-1, this.daySelect[i].value));
		}
	}
	this.selectDate = date;

	if (this.dateChangedCallback) {
		this.dateChangedCallback(date);
	}
}

// returns date or date array as a JS date
DateSelect.prototype.getDatesArray = function() {
	var selectDate = this.selectDate;
	return selectDate;
}

// returns date or date array as a JS date
DateSelect.prototype.getDatesJS = function() {
	var jsDates = this.getDatesArray();

	return jsDates.length > 1 ? jsDates: jsDates[0];
}

// returns date or date array in Alerts date format
DateSelect.prototype.getDatesAlerts = function() {
	var alertDates = [];
	var splitDate;
	var dates = this.getDatesArray();

	for ( var i in dates ) {
		if ("function" != typeof dates[i]) {
			splitDate = this.splitSelectDates(dates[i], true);
			alertDates.push( splitDate.yy + "" + splitDate.mm + "" + splitDate.dd );
		}
	}
	return alertDates.length > 1 ? alertDates : alertDates[0];
}

// returns date or date array in MS date format
DateSelect.prototype.getDatesMS = function() {
	var msDates = [];
	var dates = this.getDatesArray();

	if (!(dates instanceof Array)) {
		dates = [dates];
	}

	for ( var i in dates ) {
		if ("function" != typeof dates[i]) {
			var timezoneOffset = dates[i].getTimezoneOffset() / (60 * 24);
			var msDateObj = (dates[i].getTime() / 86400000) + (25569 - timezoneOffset);
			msDates.push(msDateObj);
		}
	}
	return msDates.length > 1 ? msDates : msDates[0];
}

// returns date or date array in DM date format
DateSelect.prototype.getDatesDM = function() {
	var dmDates = [];
	var splitDate;
	var dates = this.getDatesArray();

	for ( var i in dates ) {
		if ("function" != typeof dates[i]) {
			splitDate = this.splitSelectDates(dates[i], true);
			dmDates.push( splitDate.yy + "-" + splitDate.mm + "-" + splitDate.dd );
		}
	}
	return dmDates.length > 1 ? dmDates : dmDates[0];
}
/*
FILE CONCAT ADD FILE
PATH: /ft/resources/style/chart.alertsOverlay.css.asp
*/


.settingAlerts select, 
.settingAlerts #wsod select {
	_visibility: hidden !important;
}

#wsod #interactiveChart .alertItem,
#wsodPop #interactiveChart .alertItem {
 	position: absolute;
	width: 100%;
	border-bottom: 1px solid red;
	z-index: 20;
}

#wsod #interactiveChart .alertItem .icon,
#wsodPop #interactiveChart .alertItem .icon {
 	position: absolute;
	top: -7px;
	left: 20px;
	cursor: pointer;
	z-index: 1;
}

#wsod #interactiveChart .alertItem .modifyToolbar,
#wsodPop #interactiveChart .alertItem .modifyToolbar {
	border: 1px solid #a8a8a8;
	background: #fff;
	padding: 1px;
	position: absolute;
	left: 13px;
	top: -18px;
}

#wsod #interactiveChart .alertItem .modifyToolbar .inner,
#wsodPop #interactiveChart .alertItem .modifyToolbar .inner {
	border: 1px solid #ff0404;
	background: #ff3131 url(/ft/resources/image/alert.bg.gif?version=41787.623391203706) repeat-x 0 0;
	font-size: 12px;
	padding: 5px 10px 5px 24px;
	font-weight: bold;
	color: #fff;
	height: 22px;
	float: left;
	white-space: nowrap;

}
#wsod #interactiveChart .alertItem .modifyToolbar .value,
#wsodPop #interactiveChart .alertItem .modifyToolbar .value {
	float: left;
	line-height: 22px;
	margin-right: 5px;
}
#wsod #interactiveChart .alertItem .modifyToolbar .basicButton,
#wsodPop #interactiveChart .alertItem .modifyToolbar .basicButton {
	margin: 1px 0 0 5px;
	float: left;

}
#wsod #interactiveChart .alertsOverlay,
#wsodPop #interactiveChart .alertsOverlay {
	position: absolute;
	width: 100%;
	top: 0; left: 0;
	
	cursor: s-resize;
	z-index: 21;
	/* fix the no mouse events on transparent background fun in ie6+7 */
	*background: url(/ft/resources/image/alert.bg.gif?version=41787.623391203706) no-repeat -100px -100px;
}

#wsod #interactiveChart .alertsOverlay .instructions .instructionsShade,
#wsodPop #interactiveChart .alertsOverlay .instructions .instructionsShade {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: #666;
	opacity: .1;
	filter: alpha(opacity=10);
}
#wsod #interactiveChart .alertsOverlay .instructions p,
#wsodPop #interactiveChart .alertsOverlay .instructions p {
	font-size: 20px;
	font-weight: bold;
	color: #333;
	text-align: center;
	margin-top: 20px;
}

#wsod #interactiveChart .alertValue,
#wsodPop #interactiveChart .alertValue,
#wsod #interactiveChart .alertValueShade,
#wsodPop #interactiveChart .alertValueShade {
	position: absolute;
	width: 100%;
	left: 0;
}
#wsod #interactiveChart .alertValueShade,
#wsodPop #interactiveChart .alertValueShade {
	_font-size: 0px;
}
#wsod #interactiveChart .alertValue,
#wsodPop #interactiveChart .alertValue {
	border-bottom: 1px solid red;
}

#wsod #interactiveChart .alertValue .valueInstructions,
#wsodPop #interactiveChart .alertValue .valueInstructions {
	position: absolute;
	right: 10px;
	font-size: 11px;
	color: #333;
	font-weight: bold;
	top: -16px;
}

#wsod #interactiveChart .alertValueShade,
#wsodPop #interactiveChart .alertValueShade {
	background: #666;
	opacity: .1;
	filter: alpha(opacity=10);
}

#wsod #interactiveChart .valueAbove,
#wsodPop #interactiveChart .valueAbove {
	top: 0;
}

#wsod #interactiveChart .valueBelow,
#wsodPop #interactiveChart .valueBelow {
	bottom: 0;
}

#wsod #interactiveChart .alertDisplay,
#wsodPop #interactiveChart .alertDisplay {
	position: absolute;
	top: -35px;
	left: 50px;
	border: 1px solid #a8a8a8;
	z-index: 1;
	opacity: .97;
	filter: alpha(opacity=97);
	
	_float: left;
}

#wsod #interactiveChart .alertDisplayContent,
#wsodPop #interactiveChart .alertDisplayContent {
	background: #888;
	border: 1px solid #fff;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	
	_float: left;
}

#wsod #interactiveChart .alertDisplayContent h4,
#wsodPop #interactiveChart .alertDisplayContent h4 {
	border: 1px solid #ff0404;
	
	border-bottom-color: #6b6b6b;
	background: #ff3131 url(/ft/resources/image/alert.bg.gif?version=41787.623391203706) repeat-x 0 0;
	font-weight: bold;
	font-size: 12px;
	*padding: 5px 0;
	
}

#wsod #interactiveChart .alertDisplayContent h4 .icon-alert-sent,
#wsodPop #interactiveChart .alertDisplayContent h4 .icon-alert-sent {
	color: #fff;
	padding: 0px 17px;
	margin: 4px;
	width: 120px;	
}

#wsod #interactiveChart .alertDisplayText,
#wsodPop #interactiveChart .alertDisplayText {
	padding: 6px;	
	
	_clear: both;
}

#wsod #interactiveChart .alertDisplayText .price,
#wsodPop #interactiveChart .alertDisplayText .price,
#wsod #interactiveChart .alertDisplayText .pctChange,
#wsodPop #interactiveChart .alertDisplayText .pctChange {
	font-size: 20px;
	margin-right: 5px;
	line-height: 26px;
}

#wsod #interactiveChart .alertDisplayText .pctChange,
#wsodPop #interactiveChart .alertDisplayText .pctChange {
	color: #bdbdbd;
}


#wsod .setAlertsErrorPopup .popupInner,
#wsodPop .setAlertsErrorPopup .popupInner {
	font-size: 11px;
	width: 280px;
}

#wsod .setAlertsErrorPopup .popupContent,
#wsodPop .setAlertsErrorPopup .popupContent {
	padding-top: 10px;
}

#wsod .setAlertsErrorPopup ul,
#wsodPop .setAlertsErrorPopup ul {
	list-style-type: disc;
	color: #333;
	margin: 10px;
}

#wsod .setAlertsErrorPopup li,
#wsodPop .setAlertsErrorPopup li {
	margin: 3px 10px;
}

#wsod .setAlertsErrorPopup a,
#wsodPop .setAlertsErrorPopup a {
	margin: 8px 0 0 88px;
	_display: inline;
}