KulorMainMenu = Class.create({
	// lookups
	overArr: null,
	outArr: null,
	imgPath: null,
	// pointers
	currentMain: null,
	currentSub: null,
	// timer
	timerID: null,

        initialize: function() {
	    // place menu in accordance with the placeholder
	    this.setRightPosition();
	    // add listener for browser resize
	    Event.observe(window, "resize", function(event){
		    var viewportOffset = $('body-position').viewportOffset()[0];
		    var placeholderOffset = $('placeholder-top-position').viewportOffset()[0];
		    var rightValue = viewportOffset - placeholderOffset;
		    $('kulorMainMenu').style.right = rightValue + "px";
	    });

	    this.overArr = ["menu_finnfarge_on_162x34.gif", 
			    "menu_komigang_on_156x34.gif", 
			    "menu_hjemmehos_on_178x34.gif"];
	    this.outArr = ["menu_finnfarge_off_162x34.gif", 
			   "menu_komigang_off_156x34.gif", 
			   "menu_hjemmehos_off_178x34.gif"];
	    this.imgPath = "/themes/kulor/images/kulor/";

	    // it's safe to show the menu
	    $('kulorMainMenu').removeClassName("hidden");

        },
        setRightPosition: function() {
	    var viewportOffset = $('body-position').viewportOffset()[0];
	    var placeholderOffset = $('placeholder-top-position').viewportOffset()[0];
	    var rightValue = viewportOffset - placeholderOffset;
	    $('kulorMainMenu').style.right = rightValue + "px";
	},
	hoverMainImage: function() {
	    // set main menu image
	    $('kulorMainMenu').down('div.main').down('img.menuItem',this.currentMain).src = this.imgPath + this.overArr[this.currentMain];
	    // display the correspnding sub item
	    $('kulorMainMenu').down('div.sub').down('div.subItem', this.currentMain).removeClassName("hidden");
	    $('kulorMainMenu').down('div.sub').removeClassName("hidden");
	},
	outMainImage: function() {
	    // set main menu image
	    $('kulorMainMenu').down('div.main').down('img.menuItem',this.currentMain).src = this.imgPath + this.outArr[this.currentMain];
	},
	hideSubItem: function() {
	    // hide the current sub item
	    $('kulorMainMenu').down('div.sub').down('div.subItem', this.currentMain).addClassName("hidden");
	    if (this.currentSub != null) {
		// hide the current articleWrapper
		$('kulorMainMenu').down('div.sub').down('div.subItem', this.currentMain).down('div.articleWrapper', this.currentSub).addClassName("hidden");
		// reset css on categoryName/arrow
		$('kulorMainMenu').down('div.sub').down('div.subItem',this.currentMain).down('div.categoryName',this.currentSub).removeClassName("active");
		$('kulorMainMenu').down('div.sub').down('div.subItem',this.currentMain).down('div.categoryArrow',this.currentSub).removeClassName("activeArrow");
		// destroy old sub pointer
		this.currentSub = null;
	    }
	},
	mainOver: function(i) {
	    // clear timeout if still running
	    if (this.timerID != null) {
		clearInterval(this.timerID);
		this.timerID = null;
	    }

	    // if currentMain is set, reset old main image and clear the corresponding categoryWrapper
	    if (this.currentMain != null && this.currentMain != i) {
		this.outMainImage();
		this.hideSubItem();
	    }

	    // remove old alignment of sub
	    $('kulorMainMenu').down('div.sub').removeClassName('left');
	    $('kulorMainMenu').down('div.sub').removeClassName('middle');
	    $('kulorMainMenu').down('div.sub').removeClassName('right');

	    this.currentMain = i;

	    // set new alignment of sub
	    var cssAlign;
	    switch(this.currentMain) {
	       case 0: cssAlign = "left"; break;
	       case 1: cssAlign = "middle"; break;
	       default: cssAlign = "right";
	    }
	    $('kulorMainMenu').down('div.sub').addClassName(cssAlign);

	    this.hoverMainImage();
	},
	out: function() {
	    this.timerID = setTimeout("kulorMainMenu.doOut();",1000);
	},
	doOut: function() {
	    this.timerID = null;

	    if (this.currentMain == null) {
		// reset all main menu items
		var i=0;
		$('kulorMainMenu').down('div.main').select('img.menuItem').each(function(element){
			element.src = this.imgPath + this.outArr[i];
			i++;
		}.bind(this));
		// hide all sub items
		$('kulorMainMenu').down('div.sub').select('div.subItem').each(function(element){
			element.addClassName("hidden");
		}.bind(this));

            } else {
		// reset current main menu image
		this.outMainImage();
		this.hideSubItem();
	    }

	    // ..and close the door
	    $('kulorMainMenu').down('div.sub').addClassName("hidden");
	    this.currentMain = null;
	    this.currentSub = null;
	},
	subOver: function() {
	    // clear timeout if still running
	    if (this.timerID != null) {
		clearInterval(this.timerID);
		this.timerID = null;
	    }
	},
	categoryOver: function(i) {
	    if (this.currentSub != null && this.currentSub != i) {
		// hide previously selected
		$('kulorMainMenu').down('div.sub').down('div.subItem', this.currentMain).down('div.articleWrapper', this.currentSub).addClassName("hidden");
		// reset css on categoryName/arrow
		$('kulorMainMenu').down('div.sub').down('div.subItem',this.currentMain).down('div.categoryName',this.currentSub).removeClassName("active");
		$('kulorMainMenu').down('div.sub').down('div.subItem',this.currentMain).down('div.categoryArrow',this.currentSub).removeClassName("activeArrow");
	    }
	    this.currentSub = i;
	    $('kulorMainMenu').down('div.sub').down('div.subItem', this.currentMain).down('div.articleWrapper', this.currentSub).removeClassName("hidden");
	    $('kulorMainMenu').down('div.sub').down('div.subItem',this.currentMain).down('div.categoryName',this.currentSub).addClassName("active");
	    $('kulorMainMenu').down('div.sub').down('div.subItem',this.currentMain).down('div.categoryArrow',this.currentSub).addClassName("activeArrow");
	}

    });
var kulorMainMenu;