// ==UserScript==
// @name           Webical Google Skin
// @namespace      Webical - http://www.webical.org
// @description    Google Calendar Skin for Webical.org by Mattijs Hoitink
// @include        http://demo.webical.org/*
// @include        http://localhost:8888/webical/*
// ==/UserScript==


// get the dateSwitcher list by it's id
var dateSwitcher = document.getElementById('dateSwitcher');
var rangeLabel = document.getElementById('rangeLabel');
if(dateSwitcher != null && rangeLabel != null) {
	// version 0.2 does not have a static id for the date switcher, so get them per view
	if(dateSwitcher == null) { // fallback for version 0.2 DAY view
		dateSwitcher = document.getElementById('contentPanel_calendarViewsTabs_panel_dayViewDateSwitcherPanel');
	}
	if(dateSwitcher == null) { // fallback for version 0.2 WEEK view
		dateSwitcher = document.getElementById('contentPanel_calendarViewsTabs_panel_weekViewDateSwitcherPanel');
	}
	if(dateSwitcher == null) { // fallback for version 0.2 MONTH view
		dateSwitcher = document.getElementById('contentPanel_calendarViewsTabs_panel_monthViewDateSwitcherPanel');
	}

	// remove the rangeLabel from the listrangeLabelLi
	if(rangeLabel.parentNode.tagName == "li") {
		dateSwitcher.removeChild(rangeLabel.parentNode);
	}
	else { // fallback for version 0.2
		rangeLabel.parentNode.removeChild(rangeLabel);
	}

	// create a new li
	var rangeLabelLi = document.createElement('li');

	// change the rangelabel text
	var rangeLabelText = rangeLabel.innerHTML;
	if(rangeLabelText.substr(0, 14) == "Current date: ") {
		rangeLabel.innerHTML = rangeLabelText.substr(14);
	}
	rangeLabelLi.appendChild(rangeLabel);

	// add it to the end of the list
	if(dateSwitcher != null) {
		dateSwitcher.insertBefore(rangeLabelLi, rangeLabelLi.nextSibling);
	}
}

gskin = 'body { background: #fff; }';
gskin += 'a { color: #4B5ECC; text-decoration: underline; }';
gskin += 'a:hover { color: #4B5ECC; text-decoration: none; }';
gskin += '#headerPanel{ height: 25px; position: absolute; top: 0; text-align: right; border-bottom: 1px solid #C9D7F1; }';
gskin += '#headerPanel ul { position: absolute; top: auto; left: auto; bottom: auto; right: 10px; }';
gskin += '#headerPanel li { color: #000000; float: left; text-transform: none; }';
gskin += '#headerPanel li a { border: 0px; display: block; font-size: 1.0em; padding: 2px 5px; color: #4B5ECC; text-decoration: underline; }';
gskin += '#headerPanel li a:hover { color: #4B5ECC; text-decoration: none; }';
gskin += '.calendarView .tab-row { height: 18px; right: 18px; top: 1px; }';
gskin += '.calendarView .tab-row li, .tab-row li { text-transform: none; }';
gskin += '.calendarView .tab-row li a { border: 0px solid #E8EEF7; background: #E8EEF7; padding: 2px 4px; z-index: 10; }';
gskin += '.calendarView .tab-row li a span { margin: 0; }';
gskin += '.calendarView .tab-row li a:hover { border: 0px solid #E8EEF7; background: #E8EEF7; }';
gskin += '.calendarView .tab-row li.selected a { border: 0px solid #C3D9FF; background-color: #C3D9FF; }';
gskin += '#dateSwitcher, #contentPanel_calendarViewsTabs_panel_dayViewDateSwitcherPanel, #contentPanel_calendarViewsTabs_panel_weekViewDateSwitcherPanel, #contentPanel_calendarViewsTabs_panel_monthViewDateSwitcherPanel { top: auto; right: auto; bottom: auto; left: 0px; }';
gskin += '#previousLink, #nextLink { height: 17px; width: 29px; }';
gskin += '#previousLink { background: transparent url(http://www.google.com/calendar/images/btn_prev.gif) no-repeat scroll 0%; }';
gskin += '#nextLink { background: transparent url(http://www.google.com/calendar/images/btn_next.gif) no-repeat scroll 0%; }';
gskin += '#datePickerPanel, #contentPanel_calendarViewsTabs_panel_dayViewDatePickerPanel, #contentPanel_calendarViewsTabs_panel_weekViewDatePickerPanel, #contentPanel_calendarViewsTabs_panel_monthViewDatePickerPanel { left: -199px; margin-left: 6px; top: 48px; }';
gskin += '#datePickerPanel .smallpanel, #contentPanel_calendarViewsTabs_panel_dayViewDatePickerPanel .smallpanel, #contentPanel_calendarViewsTabs_panel_weekViewDatePickerPanel .smallpanel, #contentPanel_calendarViewsTabs_panel_monthViewDatePickerPanel .smallpanel { border-right: 0px; width: 198px; }';
gskin += '.smallpanel { border: 2px solid #C3D9FF; }';
gskin += '.smallpanel h1 { background: #C3D9FF; border-color: #C3D9FF; }';
gskin += '#contentPanelArea { background: #FFFFFF; border-color: #C3D9FF; border-style: none; border-width: 0px; bottom: 0px; left: 0px; position: absolute; top: 50px; z-index: 1; }';
gskin += '#calendarViewPanel { top: 21px; }';
gskin += '#calendarViewPanelContentBlock { border: 5px solid #C3D9FF; }';
gskin += '#monthView { overflow: hidden; border-bottom: 1px solid #A2BBDD; }';
gskin += '#monthView th { background-color: #C3D9FF; text-align: center; color: #82A8D6; border-bottom: 1px solid #A2BBDD; }';
gskin += '#monthView tbody tr { border-right: 1px solid #A2BBDD; border-left: 1px solid #A2BBDD; }';
gskin += '#monthTop { background-color: #E8EEF7; color: #6A6A6B; float: left; }';
gskin += '#eventsInMonth { float: left; clear: both; }';
gskin += '#calendarViewPanel #eventsInMonth li { margin: 0; padding: 0; overflow: hidden; }';
gskin += '.dayItemMonth { height: 20%; width: 14.25%; border: 0px; border-bottom: 1px solid #CCDDEE; border-right: 1px solid #CCDDEE; }';

GM_addStyle(gskin)