/*@cc_on _d=document;eval('var document=_d')@*/

var SimpleChart = function() {
	var genres;

	var originalBackgroundColor = "#F5F5F5";

  var expandingBackgroundColor = "#FFFF00";

	var defaultGenreIds = [ 101000, 103000, 106000, 107000 ];

  var stickyHeaderHeight = 16;

  var previousId = "";

  var currentCellTop = "";

  var currentCellLeft = "";

  var currentCellHeight = "";

  var currentCellWidth = "";

  var originalOffsetTop;

  var isLoadFinished = false;

  var bottomLine;

  var overlayFlg = 0;


	var clearStationSelectors = function() {
		var selectors = $$("div#station-selectors .station-selector");
		for ( var i = 0; i < selectors.length; i++) {
			selectors[i].style.display = "none";
		}
	}

	var loadCheckedGenreIds = function() {
		var cookie = document.cookie;
		if (cookie && cookie.match(/gtv\.checkedGenreIds=\[([0-9,]*)\]/)) {
			return RegExp.$1.split(",");
		} else {
			return defaultGenreIds;
		}
	}

	var saveCheckedGenreIds = function() {
		var cookie = "gtv.checkedGenreIds=[";
		var first = true;
		for ( var genreId in genres) {
			if (genres[genreId].checked) {
				if (first) {
					first = false
				} else {
					cookie += ","
				}
				cookie += genreId;
			}
		}
		cookie += "]; path=/";
		var expires = new Date();
		expires.setTime(expires.getTime() + 1000 * 60 * 60 * 24 * 365);
		cookie += "; expires=" + expires.toGMTString();
		document.cookie = cookie;
	}

	var syncGenres = function() {
		var nodes = $("chartColumn").childNodes;
		var genreIdPattern = /cell-genre-(\d{3}0{3})/;
		for ( var i = 0; i < nodes.length; i++) {
			var node = nodes[i];
			if (node.nodeType == 1) {
				var classAttribute = node.attributes["class"];
				if (classAttribute) {
					if (classAttribute.value.match(genreIdPattern)) {
						var genreId = RegExp.$1;
						var genre = genres[genreId];
						if (genre) {
							if (genre.checked) {
								node.style.backgroundColor = genre.color;
							} else {
								node.style.backgroundColor = originalBackgroundColor;
							}
						}
					}
				}
			}
		}
	}

	var syncCheckboxes = function() {
		for ( var genreId in genres) {
			var genre = genres[genreId];
			var headerCheckBox = $("chart-header-genre-" + genreId);
			var footerCheckBox = $("chart-footer-genre-" + genreId);
			if (headerCheckBox) {
				headerCheckBox.checked = genre.checked;
			}
			if (footerCheckBox) {
				footerCheckBox.checked = genre.checked;
			}
		}
	}

	return {
		update : function(select) {
			select.form.submit();
		},

    expandAndRewrite : function(id) {
      SimpleChart.expandCell(id);
      SimpleChart.overlayStickyHeader();
    },

    expandCell : function(id) {
      if ( !isLoadFinished ) { return; }
      var cell = $(id);
      var cumulativeOffset = Position.cumulativeOffset(cell);
      var cellTop = cumulativeOffset[1];
      var cellLeft = cumulativeOffset[0];
      var cellHeight = cell.scrollHeight;

      if ( (cellTop + cellHeight) > bottomLine ) {
        SimpleChart.overlayCell(id);
      } else {
        if ( previousId != id ) {
          SimpleChart.shrinkCell(previousId);
        }
        cell.originalHeight = cell.style.height;
        cell.originalWidth = cell.style.width;
        cell.originalBackgroudColor = cell.style.backgroundColor;
        if (cell.scrollHeight > cell.offsetHeight) {
          cell.style.height = cell.scrollHeight + "px";
        }
        cell.style.width = cell.scrollWidth + "px";
        cell.style.zIndex = 50;
        cell.style.borderLeft = '1px solid #304d6b';
        cell.style.borderTop = '1px solid #304d6b';
        cell.style.borderRight = '2px solid #304d6b';
        cell.style.borderBottom = '2px solid #304d6b';
        cell.style.backgroundColor = expandingBackgroundColor;
        subCells = cell.getElementsByClassName("schedule-title");
        subCells = $A(subCells);
        if (subCells.length == 0) {
          subCells = cell.getElementsByClassName("schedule-titleC");
          subCells = $A(subCells);
        }
        subCells.each(function(subCell){
          subCell.style.color = '#0000CD';
        });
        currentCellTop = cellTop;
        currentCellLeft = cellLeft;
        currentCellHeight = cell.scrollHeight;
        currentCellWidth = cell.scrollWidth;
        previousId = id;
      }
    },

    overlayCell : function(id) {
      if ( !isLoadFinished ) { return; }
      var cell = $(id);
      if ( previousId != "" ) {
        SimpleChart.shrinkCell(previousId);
      }
      SimpleChart.hideSelect();
      cell.onmouseover = function() {};
      cell.onmouseout = function() {};
      var cumulativeOffset = Position.cumulativeOffset(cell);
      var cellTop = cumulativeOffset[1];
      var cellLeft = cumulativeOffset[0];
      var overlayCell = document.createElement("div");
      $("chartOverlay").appendChild(overlayCell);
      overlayCell.id = id + "overlay";
      overlayCell.className = cell.className;
      var styleArray = [];
      styleArray.push('z-index : 50; ');
      styleArray.push('position : absolute; ');
      styleArray.push('top : ' + (cellTop - 2) + 'px; ');
      styleArray.push('left : ' + (cellLeft - 2) + 'px; ');
      styleArray.push('height : ' + (cell.scrollHeight + 10) + 'px; ');
      styleArray.push('width : ' + (cell.scrollWidth - 3) + 'px; ');
      styleArray.push('background-color : ' + expandingBackgroundColor + '; ');
      styleArray.push('border : 2px solid #304d6b; ');
      overlayCell.style.cssText = styleArray.join(' ');
      overlayCell.innerHTML = cell.innerHTML.replace("schedule-title", "schecule-title\" style=\"color:#0000CD; display:block; margin-right:0.5em;\"");
      var tempNodes = overlayCell.getElementsByTagName("a");
      var tempNodesLength = tempNodes.length;
      for (var i = 0; i < tempNodesLength; i++ ) {
        if (tempNodes[i].name == "iepg-button") {
          Event.observe(tempNodes[i], 'click', function(e) {
            var id = Event.element(e).id.substring(5);
            window.setTimeout("openIepgBalloon('"+id+"')", 850);
          });
        } else if ( tempNodes[i].name == "clip-button") {
          Event.observe(tempNodes[i], 'click', function(e) {
            var id = Event.element(e).id.substring(5);
            openClipBalloon(id);
          });
        }
      }
      currentCellTop = cellTop;
      currentCellLeft = cellLeft;
      currentCellHeight = cell.scrollHeight + 30;
      currentCellWidth = cell.scrollWidth;
      Event.observe(id + "overlay", "click",
        function(event) {
          var elem = Event.element(event);
          if (elem.tagName.toLowerCase() == "div"  && elem.id == id + "overlay"){
            SimpleChart.shrinkCell(id);
           }
         }, false);
      previousId = id;
      overlayFlg = 1;
    },

    shrinkCell : function(id) {
      if ( id == '' ) {
        id = previousId;
      }
      if ( overlayFlg == 1 ) {
        SimpleChart.shrinkOverlay(id);
      } else {
        var cell = $(id);
        if ( cell != null ) {
          if ( cell.originalHeight != null ) {
            cell.style.height = cell.originalHeight;
            cell.style.width = cell.originalWidth;
          }
          if ( cell.originalBackgroudColor != null ) {
            cell.style.backgroundColor = cell.originalBackgroudColor;
          }
          cell.style.zIndex = 1;
          cell.style.border = '';
          cell.style.borderBottom = '1px solid black';
          cell.style.borderRight = '1px solid black';
          subCells = cell.getElementsByClassName("schedule-title");
          subCells = $A(subCells);
          if (subCells.length == 0) {
            subCells = cell.getElementsByClassName("schedule-titleC");
            subCells = $A(subCells);
          }
          subCells.each(function(subCell){
            subCell.style.color = '#056BCD';
          });
        }
      }
    },

    shrinkOverlay : function(id) {
      SimpleChart.displaySelect();
      var cell = $(id);
      var overlayDiv = $("chartOverlay");
      if (overlayDiv.childNodes.length > 0) {
        overlayDiv.removeChild($(id + "overlay"));
      }
      if (cell != null ) {
        cell.onmouseover = function() { SimpleChart.expandCell(id); };
        cell.onmouseout = function() { SimpleChart.expandCell(id); };
      }
      overlayFlg = 0;
    },

    overlayStickyHeader : function() {
      if ( !isLoadFinished ) { return; }
      if(navigator.userAgent.indexOf("MSIE") != -1) {
        var removeCell = $("overlayStickyHeader");
        if ( removeCell != null ) {
          Element.remove(removeCell);
        }
        var originalElem = $("sticky-header");
        var overlayStickyHeader = originalElem.cloneNode(true);
        var scrollTop = document.body.scrollTop
          || document.documentElement.scrollTop - 3;
        if ( currentCellTop <= (scrollTop + stickyHeaderHeight) || currentCellTop == "") {
          if (originalOffsetTop == undefined) {
            originalOffsetTop = Position.cumulativeOffset($("cell-zero"))[1];
          }
          if (scrollTop < originalOffsetTop) {
            overlayStickyHeader.style.display = "none";
          } else {
            overlayStickyHeader.id = "overlayStickyHeader";
            overlayStickyHeader.style.top = Position.cumulativeOffset($("sticky-header"))[1]+ 1 + "px";
            overlayStickyHeader.style.left = Position.cumulativeOffset($("sticky-header"))[0] + "px";
            overlayStickyHeader.style.display = "";
            $("chartOverlayHeader").appendChild(overlayStickyHeader);
          }
        }
      }
    },

		initGenres : function() {
			genres = {};
			var genreIds = [ 100000, 101000, 102000, 103000, 104000, 105000,
					106000, 107000, 108000, 109000, 110000, 111000, 115000 ];
			for ( var i = 0; i < genreIds.length; i++) {
				var genreId = genreIds[i];
				var element = $("genre-color-example-" + genreId);
				if (element) {
					var color = Element.getStyle(element, "background-color");
					genres[genreId] = {
						checked : false,
						color : color
					}
				}
			}
			var checkedGenreIds = loadCheckedGenreIds();
			for ( var i = 0; i < checkedGenreIds.length; i++) {
				var genre = genres[checkedGenreIds[i]];
				if (genre) {
					genre.checked = true;
				}
			}
			syncGenres();
			syncCheckboxes();
		},

    shrinkCellByMousemove : function() {
      Event.observe(document.body, 'mousemove',
        function(event) {
          if ( overlayFlg == 1 ) {
            if ( Event.pointerY(event) < currentCellTop || Event.pointerY(event) > currentCellTop + currentCellHeight ) {
              SimpleChart.shrinkCell('');
            } else if ( Event.pointerX(event) < currentCellLeft || Event.pointerX(event) > currentCellLeft + currentCellWidth ) {
              SimpleChart.shrinkCell('');
            }
          }
        }, false);
    },

		toggleGenre : function(checked, genreId, part) {
			genres[genreId].checked = checked;
			var correspondingPart = (part == "header") ? "footer" : "header";
			var correspondingElement = $("chart-" + correspondingPart
					+ "-genre-" + genreId);
			if (correspondingElement) {
				correspondingElement.checked = checked;
			}
			syncGenres();
			saveCheckedGenreIds();
		},

		toggleGenres : function(checked) {
			var check = function(part) {
				var inputs = $$("ul#chart-" + part + "-genres input");
				for ( var i = 0; i < inputs.length; i++) {
					var input = inputs[i];
					if (input.type == 'checkbox') {
						input.checked = checked;
					}
				}
			}
			check("header");
			check("footer");
			for ( var genreId in genres) {
				genres[genreId].checked = checked;
			}
			syncGenres();
			saveCheckedGenreIds();
		},

		toggleStationSelector : function(id, position) {
			var selector = $("station-selector-" + id);
			var open = (selector.style.display != "none");
			clearStationSelectors();
			if (!open) {
				var cell = $("cell-station-" + position + "-" + id);
				var cumulativeOffset = Position.cumulativeOffset(cell);
				var left = cumulativeOffset[0];
				var top = cumulativeOffset[1] + cell.offsetHeight;
				selector.style.position = 'absolute';
				selector.style.zIndex = 40;
				selector.style.left = left + "px";
				selector.style.top = top + "px";
				selector.style.display = "";
			}
		},

    hideSelect : function() {
      if (navigator.userAgent.indexOf("Mozilla/4.0 (compatible; MSIE 6.0") == 0 ||
        navigator.userAgent.indexOf("MSIE 6.0") == 0) {
        var footer = $('simpleChartFooter');
        if (footer != null ) {
          var elems = footer.getElementsByTagName("select");
          var elemLength = elems.length;
          for (i = 0; i < elemLength; i++) {
            elems[i].style.display = "none";
          }
        }
      }
    },

    displaySelect : function() {
      if (navigator.userAgent.indexOf("Mozilla/4.0 (compatible; MSIE 6.0") == 0 ||
        navigator.userAgent.indexOf("MSIE 6.0") == 0) {
        var footer = $('simpleChartFooter');
        if ( footer != null ) {
          var elems = footer.getElementsByTagName("select");
          var elemLength = elems.length;
          for (i = 0; i < elemLength; i++) {
            elems[i].style.display = "";
          }
        }
      }
    },

    pageLoadFinished : function() {
      var overlayDiv = $("chartOverlayAnchor");
      if ( overlayDiv == null ) {
        overlayDiv = $('chartOverlay');
      }
      var overlayDivCumulativeOffset = Position.cumulativeOffset(overlayDiv);
      bottomLine = overlayDivCumulativeOffset[1] - stickyHeaderHeight;
      isLoadFinished = true
    },

		handleClick : function(event) {
			if (!event
					|| event.srcElement
					&& event.srcElement.className
							.indexOf("station-selector-caller") != -1) {
				return;
			}
			if (event.target
					&& event.target.className
							.indexOf("station-selector-caller") != -1) {
				return;
			}
			clearStationSelectors();
		}

	}
}();

Event.observe(window, "load", SimpleChart.pageLoadFinished );
Event.observe(window, "load", SimpleChart.initGenres);
Event.observe(window, "load", SimpleChart.shrinkCellByMousemove);
Event.observe(window.document, "click", SimpleChart.handleClick);

