// HP Creative Studio Main Navigation
// this code needs Mootools to work properly


// link matrix for all submenu buttons
cs_sections = new Array();
cs_sections[0] = new Array();
cs_sections[1] = new Array();
cs_sections[2] = new Array();
cs_sections[3] = new Array();

cs_language_code = 'en-uk';

cs_sections[0][0] = 'p_and_s.html';
cs_sections[0][1] = 'cards.html';
cs_sections[0][2] = 'calendars.html';
cs_sections[0][3] = 'photo_frames_borders.html';
cs_sections[0][4] = 'diy_photo_gifts.html';
cs_sections[0][5] = 'posters.html';
cs_sections[0][6] = 'parties_occasions.html';
cs_sections[0][7] = 'toys_games.html';
cs_sections[0][8] = 'ironons_fabric.html';
cs_sections[0][9] = 'diy_books.html';

cs_sections[1][0] = 'SPECIAL_ICON_1';

cs_sections[2][0] = 'themes_holidays.html';
cs_sections[2][1] = 'themes_lifeevents.html';
cs_sections[2][2] = 'themes_kids.html';
cs_sections[2][3] = 'themes_otherthemes.html';

cs_sections[3][0] = 'wireless_printing.html';
cs_sections[3][1] = 'SPECIAL_ICON_0';									// reference to special endcaps in array cs_special below



cs_special = new Array();
cs_special[0] = new Array();
cs_special[0][0] = 'media/images/chrome/bottomnav/wireless_endcap.gif';		// icon url
cs_special[0][1] = '140';												// width
cs_special[0][2] = '';													// url if any
cs_special[1] = new Array();
cs_special[1][0] = 'media/images/chrome/bottomnav/brands_endcap.gif';	// icon url
cs_special[1][1] = '188';												// width
cs_special[1][2] = 'themes_partners.html';									// url if any


// global variables
var cs_bottom_vertical = 31;
var cs_bottom_horizontal = 2;

var cs_bottomnav_on = 0;
var cs_sub_on_left = 0;
var cs_sub_on_right;
var cs_url_main_preset = -1;
var cs_url_nav_preset = 0;
var cs_url_sub_preset = 0;

cs_main_x = new Array();
cs_main_x_start = new Array();
var cs_sub_number;
var cs_sub_delta_x;
var cs_sub_back_width;


// called from page onload handler
function cs_setup_bottomnav() {

	// analyze available sections and set geometry
	if (cs_sections.length == 4) {
		cs_main_x[0] = cs_bottom_horizontal;
		cs_main_x[1] = cs_bottom_horizontal+577;
		cs_main_x[2] = cs_bottom_horizontal+673;
		cs_main_x[3] = cs_bottom_horizontal+769;
		cs_sub_number = 5;												// max number of items visible in submenu
		cs_sub_delta_x = 89;
		cs_sub_back_width = 480;
	}
	// TODO: Add values for 2-3 buttons

	cs_sub_on_right = cs_sub_number - 1;

	// analyze URL to determine current section
	cs_currentsection = 0;
	if (this.location.href.indexOf('/theme') != -1) {
		cs_currentsection = 2;
	}
	if (this.location.href.indexOf('/themes_partners') != -1) {
		cs_currentsection = 1;
	}
	if (this.location.href.indexOf('/wireless') != -1) {
		cs_currentsection = 3;
	}
	// set the positions for the main buttons based on current section
	for (csa=0;csa<cs_sections.length;csa++) {
		if (csa <= cs_currentsection) {
			cs_main_x_start[csa] = cs_main_x[0]+csa*96;
		} else {
			cs_main_x_start[csa] = cs_main_x[csa];
		}
	}


	// create all the divs
	for (csa=0;csa<cs_sections.length;csa++) {
		// hit main buttons
		var div = new Element('div');
		div.setProperty('id', 'csmainhitbut'+csa);
		div.addClass('csbottomnavbuttonmainhit');
		div.injectInside('csbottomnav');
		if (csa ==  1) {						// special case for last button - it always opens quickbrowse directly
			cs_templink = 'themes_partners.html';
		} else {
			cs_templink = 'javascript:cs_open_main('+csa+')';		// all other buttons call the animation code
		}
		cscontent = '<a href="'+cs_templink+'" onMouseOver="cs_main_rollon('+csa+')" onFocus="cs_main_rollon('+csa+')" onMouseOut="cs_main_rolloff('+csa+')" onBlur="cs_main_rolloff('+csa+')"><img src="media/images/spacer.gif" width="96" height="80" border="0" alt=""><\/a>';
		$('csmainhitbut'+csa).setHTML(cscontent);
		$('csmainhitbut'+csa).setStyle('top',cs_bottom_vertical+'px');
		$('csmainhitbut'+csa).setStyle('left',cs_main_x_start[csa]+'px');
		// set up the visible main-buttons
		// off
		var div = new Element('div');
		div.setProperty('id', 'csmainbut'+csa+'off');
		div.addClass('csbottomnavbuttonmain');
		div.injectInside('csbottomnav');
		cscontent = '<img src="media/images/chrome/bottomnav/button_'+(csa+1)+'_off.gif" width="96" height="80" border="0" alt="">';
		$('csmainbut'+csa+'off').setHTML(cscontent);
		$('csmainbut'+csa+'off').setStyle('top',cs_bottom_vertical+'px');
		$('csmainbut'+csa+'off').setStyle('left',cs_main_x_start[csa]+'px');
		// on
		var div = new Element('div');
		div.setProperty('id', 'csmainbut'+csa+'on');
		div.addClass('csbottomnavbuttonmainon');
		div.injectInside('csbottomnav');
		cscontent = '<img src="media/images/chrome/bottomnav/button_'+(csa+1)+'_on.gif" width="96" height="80" border="0" alt="">';
		$('csmainbut'+csa+'on').setHTML(cscontent);
		$('csmainbut'+csa+'on').setStyle('top',cs_bottom_vertical+'px');
		$('csmainbut'+csa+'on').setStyle('left',cs_main_x[0]+csa*96+'px');
		// rollover
		var div = new Element('div');
		div.setProperty('id', 'csmainbut'+csa+'glow');
		div.addClass('csbottomnavbuttonmainon');
		div.injectInside('csbottomnav');
		cscontent = '<img src="media/images/chrome/bottomnav/button_'+(csa+1)+'_glow.gif" width="96" height="80" border="0" alt="">';
		$('csmainbut'+csa+'glow').setHTML(cscontent);
		$('csmainbut'+csa+'glow').setStyle('top',cs_bottom_vertical+'px');
		$('csmainbut'+csa+'glow').setStyle('left',cs_main_x_start[csa]+'px');
	}

	// initial setup of submenu, preset cs_bottomnav_on with current section id
	cs_bottomnav_on = cs_currentsection;
	cs_init_submenu(cs_currentsection);

	// preset submenu position based on page URL
	cs_url_fragment = this.location.href.substring(this.location.href.lastIndexOf('/')+1,this.location.href.length);
	for (csa=0;csa<cs_sections.length;csa++) {
		for (csb=0;csb<cs_sections[csa].length;csb++) {
			if (cs_url_fragment.indexOf(cs_sections[csa][csb].substring(0,cs_sections[csa][csb].length-5)) == 0) {			// see if url_fragment is beginnig of current page URL
				cs_sub_on_left = cs_sub_number * Math.floor(csb/cs_sub_number);
				cs_sub_on_right = cs_sub_on_left + cs_sub_number;
				if (cs_sub_on_right > cs_sections[cs_bottomnav_on].length) {												// make sure the subnav visible items number doesn't overrun total of subnav items
					cs_sub_on_right = cs_sections[cs_bottomnav_on].length;
				}
				cs_url_nav_preset = cs_sub_on_left;
				cs_url_sub_preset = csb - (Math.floor(csb/cs_sub_number)*cs_sub_number);
				cs_url_main_preset = csa;
			}
		}
	}

	// create hit areas and rollovers for sub menu
	for (csa=0;csa<cs_sub_number;csa++) {
		var div = new Element('div');
		div.setProperty('id', 'cssubhiton'+csa);
		div.addClass('csbottomnavbuttonsubon');
		div.injectInside('csbottomnav');
		$('cssubhiton'+csa).setStyle('top',cs_bottom_vertical+'px');
		$('cssubhiton'+csa).setOpacity(0);
		$('cssubhiton'+csa).setStyle('visibility','visible');
		var div = new Element('div');
		div.setProperty('id', 'cssubhitbut'+csa);
		div.addClass('csbottomnavbuttonsubhit');
		div.injectInside('csbottomnav');
		$('cssubhitbut'+csa).setStyle('top',cs_bottom_vertical+'px');
		cscontent = '<a href="javascript:cs_open_sub('+csa+')" onMouseOver="cs_sub_rollon('+csa+')" onFocus="cs_sub_rollon('+csa+')" onMouseOut="cs_sub_rolloff('+csa+')" onBlur="cs_sub_rolloff('+csa+')"><img src="media/images/spacer.gif" width="89" height="80" border="0" alt=""><\/a>';
		$('cssubhitbut'+csa).setHTML(cscontent);
	}

	// visual setup
	for (csa=0;csa<cs_sections.length;csa++) {
		// hit button
		$('csmainhitbut'+csa).setStyle('visibility','visible');
		// visual button
		$('csmainbut'+csa+'off').setOpacity(0);
		$('csmainbut'+csa+'off').setStyle('visibility','visible');
		$('csmainbut'+csa+'off').effect('opacity',{
			duration: 200,
			fps: 10,
			transition: Fx.Transitions.Cubic.easeOut
		}).start(0,1);
		// rollover state
		$('csmainbut'+csa+'glow').setOpacity(0);
		$('csmainbut'+csa+'glow').setStyle('visibility','visible');
	}

	// arrow back
	$('csbottomnavarrowbackleft').setStyle('top',cs_bottom_vertical+'px');
	$('csbottomnavarrowbackleft').setStyle('left',(cs_main_x_start[cs_bottomnav_on]+96)+'px');
	$('csbottomnavarrowbackleft').setStyle('visibility','visible');
	$('csbottomnavarrowbackright').setStyle('top',cs_bottom_vertical+'px');
	$('csbottomnavarrowbackright').setStyle('left',(cs_main_x_start[cs_bottomnav_on]+96+cs_sub_back_width-17)+'px');
	$('csbottomnavarrowbackright').setStyle('visibility','visible');

	// arrow glow
	$('csbottomnavarrowleftglow').setStyle('top',cs_bottom_vertical+'px');
	$('csbottomnavarrowleftglow').setStyle('left',(cs_main_x_start[cs_bottomnav_on]+96)+'px');
	$('csbottomnavarrowleftglow').setOpacity(0);
	$('csbottomnavarrowleftglow').setStyle('visibility','visible');
	$('csbottomnavarrowrightglow').setStyle('top',cs_bottom_vertical+'px');
	$('csbottomnavarrowrightglow').setStyle('left',(cs_main_x_start[cs_bottomnav_on]+96+cs_sub_back_width-17)+'px');
	$('csbottomnavarrowrightglow').setOpacity(0);
	$('csbottomnavarrowrightglow').setStyle('visibility','visible');

	// arrow hit area
	$('csbottomnavarrowlefthit').setStyle('top',cs_bottom_vertical+'px');
	$('csbottomnavarrowlefthit').setStyle('left',(cs_main_x_start[cs_bottomnav_on]+96)+'px');
	$('csbottomnavarrowrighthit').setStyle('left',(cs_main_x_start[cs_bottomnav_on]+96+cs_sub_back_width-17)+'px');
	if (cs_sub_on_left > 0) {
		$('csbottomnavarrowlefthit').setStyle('visibility','visible');
	}
	$('csbottomnavarrowrighthit').setStyle('top',cs_bottom_vertical+'px');
	if (cs_sub_on_right < cs_sections[cs_bottomnav_on].length) {
		$('csbottomnavarrowrighthit').setStyle('visibility','visible');
	}

	// visible arrow
	$('csbottomnavarrowleftoff').setStyle('top',cs_bottom_vertical+'px');
	$('csbottomnavarrowlefton').setStyle('top',cs_bottom_vertical+'px');
	$('csbottomnavarrowleftoff').setStyle('left',(cs_main_x_start[cs_bottomnav_on]+96)+'px');
	$('csbottomnavarrowlefton').setStyle('left',(cs_main_x_start[cs_bottomnav_on]+96)+'px');
	if (cs_sub_on_left == 0) {
		$('csbottomnavarrowleftoff').setStyle('visibility','visible');
	} else {
		$('csbottomnavarrowlefton').setStyle('visibility','visible');
	}

	$('csbottomnavarrowrightoff').setStyle('top',cs_bottom_vertical+'px');
	$('csbottomnavarrowrighton').setStyle('top',cs_bottom_vertical+'px');
	$('csbottomnavarrowrightoff').setStyle('left',(cs_main_x_start[cs_bottomnav_on]+96+cs_sub_back_width-17)+'px');
	$('csbottomnavarrowrighton').setStyle('left',(cs_main_x_start[cs_bottomnav_on]+96+cs_sub_back_width-17)+'px');
	if (cs_sub_on_right == cs_sections[cs_bottomnav_on].length) {
		$('csbottomnavarrowrightoff').setStyle('visibility','visible');
	} else {
		$('csbottomnavarrowrighton').setStyle('visibility','visible');
	}

	// show submenu items
	cs_slide_submenu_out();

}

// reset submenu with new icons and prep for display
function cs_init_submenu(cssection) {
	cs_sub_on_left = 0;
	$('csbottomnavsubinnerholder').setHTML('');
	// sub buttons (added to csbottomnavsubholder)
	for (csb=0;csb<cs_sections[cssection].length;csb++) {
		var div = new Element('div');
		div.setProperty('id', 'cssubbut'+cssection+'x'+csb+'off');
		div.addClass('csbottomnavbuttonsub');
		div.injectInside('csbottomnavsubinnerholder');
		if (cs_sections[cssection][csb].indexOf('SPECIAL') == -1) {		// this is a normal submenu icon
			cscontent = '<img src="media/images/chrome/bottomnav/subbutton_'+(cssection+1)+'_'+(csb+1)+'_off.gif" width="89" height="80" border="0" alt="">';
		} else {
			// parse special array
			cs_special_number = Math.floor(cs_sections[cssection][csb].substring(13,cs_sections[cssection][csb].length));	// remove "SPECIAL_ICON_"
			if (cs_special[cs_special_number][2] != '') {
				cscontent_lead = '<a href="'+cs_special[cs_special_number][2]+'">';
				cscontent_end = '<\/a>';
			} else {
				cscontent_lead = '';
				cscontent_end = '';
			}
			cscontent = cscontent_lead + '<img src="'+cs_special[cs_special_number][0]+'" width="'+cs_special[cs_special_number][1]+'" height="80" border="0" alt="">' + cscontent_end;
		}
		$('cssubbut'+cssection+'x'+csb+'off').setHTML(cscontent);
	}
	if (csb < cs_sub_number) {
		cs_sub_on_right = csb;
	} else {
		cs_sub_on_right = cs_sub_number;		// initially zero to cs_sub_number are shown if there are more than cs_sub_number items
	}
}


// initial slide-out of submenu and reveal on-state of main button
function cs_slide_submenu_out() {
	// main button
	FX_rollover = new Fx.Style('csmainbut'+cs_bottomnav_on+'on', 'opacity', {
		duration: 800,
		fps: 10,
		transition: Fx.Transitions.Cubic.easeOut
	});
	FX_rollover.start(0,1);
	// sub menu
	$('csbottomnavsubouterholder').setStyle('top',cs_bottom_vertical+'px');
	$('csbottomnavsubouterholder').setStyle('left',cs_main_x[0]+96*(cs_bottomnav_on+1)+17+'px');
	$('csbottomnavsubouterholder').setStyle('width',cs_sub_back_width+'px');
	$('csbottomnavsubinnerholder').setStyle('margin-left','-'+89*cs_sections[cs_bottomnav_on].length+200+'px');		// 200 added as safety margin for oversized special content
	$('csbottomnavsubouterholder').setStyle('visibility','visible');
	FX_initial_slide = new Fx.Style('csbottomnavsubinnerholder', 'margin-left', {
		duration: 1200,
		fps: 10,
		transition: Fx.Transitions.Cubic.easeOut
	});
	FX_initial_slide.start.pass([-89*cs_sections[cs_bottomnav_on].length-200,-cs_sub_on_left * 89], FX_initial_slide).delay(300);		// 200 added as safety margin for oversized special content
	setTimeout(cs_set_submenu_links,1500);
}


// prepare submenu rollover icons and activate hit areas
function cs_set_submenu_links() {
	for (csa=0;csa<cs_sub_number;csa++) {
		csb = csa + cs_sub_on_left;
		if (csb < cs_sub_on_right) {														// make sure we don't overrun number of available icons in submenu
			if (cs_sections[cs_bottomnav_on][csb].indexOf('SPECIAL') == -1) {				// only switch on hit areas if this icon is not a special hit area
				cscontent = '<img src="media/images/chrome/bottomnav/subbutton_'+(cs_bottomnav_on+1)+'_'+(csb+1)+'_on.gif" width="89" height="80" border="0" alt="">';
				$('cssubhiton'+csa).setHTML(cscontent);
				$('cssubhiton'+csa).setStyle('left',(cs_main_x[0]+cs_bottomnav_on*96+17+96+csa*89)+'px');
				if (cs_url_main_preset == cs_bottomnav_on  &&  cs_url_nav_preset == cs_sub_on_left  &&  csa == cs_url_sub_preset) {
					$('cssubhiton'+csa).setOpacity(1);																	// highlight submenu rollover for current section
				} else {
					$('cssubhiton'+csa).setOpacity(0);
				}
				$('cssubhiton'+csa).setStyle('visibility','visible');
				$('cssubhitbut'+csa).setStyle('left',(cs_main_x[0]+cs_bottomnav_on*96+17+96+csa*89)+'px');
				$('cssubhitbut'+csa).setStyle('visibility','visible');
			}
		}
	}
}


// hide submenu rollovers and hit areas
function cs_hide_submenu_links() {
	for (csa=0;csa<cs_sub_number;csa++) {
		$('cssubhitbut'+csa).setStyle('visibility','hidden');
		$('cssubhiton'+csa).setOpacity(0);
	}
}


// main button - rollover
var FX_rollover;
function cs_main_rollon(csbutton) {
	if (cs_bottomnav_on != csbutton) {
		if (FX_rollover) {
			FX_rollover.stop();
		}
		for (csa=0;csa<cs_sections.length;csa++) {
			$('csmainbut'+csa+'glow').setOpacity(0);
		}
		FX_rollover = new Fx.Style('csmainbut'+csbutton+'glow', 'opacity', {
			duration: 500,
			fps: 10,
			transition: Fx.Transitions.Cubic.easeOut
		});
		FX_rollover.start(0,1);
	}
}

// main button - rolloff
function cs_main_rolloff(csbutton) {
	if (cs_bottomnav_on != csbutton) {
		if (FX_rollover) {
			FX_rollover.stop();
		}
		for (csa=0;csa<cs_sections.length;csa++) {
			$('csmainbut'+csa+'glow').setOpacity(0);
		}
		FX_rollover = new Fx.Style('csmainbut'+csbutton+'glow', 'opacity', {
			duration: 150,
			fps: 10,
			transition: Fx.Transitions.Cubic.easeOut
		});
		FX_rollover.start(1,0);
	}
}

// main button - click handler
function cs_open_main(csbutton) {
	if (cs_bottomnav_on != csbutton) {
		// turn off all link-tag-buttons immediately
		for (csa=0;csa<cs_sections.length;csa++) {
			$('csmainhitbut'+csa).setStyle('visibility','hidden');
		}
		// hide open sub menu, arrows, active main button
		// hide arrows
		$('csbottomnavarrowlefthit').setStyle('visibility','hidden');
		$('csbottomnavarrowrighthit').setStyle('visibility','hidden');
		$('csbottomnavarrowleftoff').setOpacity(0);
		$('csbottomnavarrowrightoff').setOpacity(0);
		$('csbottomnavarrowlefton').setOpacity(0);
		$('csbottomnavarrowrighton').setOpacity(0);
		// main button on-state
		FX_onstate = new Fx.Style('csmainbut'+cs_bottomnav_on+'on', 'opacity', {
			duration: 400,
			fps: 10,
			transition: Fx.Transitions.Cubic.easeOut
		});
		FX_onstate.start(1,0);
		// current main button rollover
		FX_rollover = new Fx.Style('csmainbut'+csbutton+'glow', 'opacity', {
			duration: 400,
			fps: 10,
			transition: Fx.Transitions.Cubic.easeOut
		});
		FX_rollover.start(1,0);
		// arrow backgrounds
		FX_arrowleftback = new Fx.Style('csbottomnavarrowbackleft', 'opacity', {
			duration: 400,
			fps: 10,
			transition: Fx.Transitions.Cubic.easeOut
		});
		FX_arrowleftback.start(1,0);
		FX_arrowrightback = new Fx.Style('csbottomnavarrowbackright', 'opacity', {
			duration: 400,
			fps: 10,
			transition: Fx.Transitions.Cubic.easeOut
		});
		FX_arrowrightback.start(1,0);
		// hide submenu
		cs_hide_submenu_links();
		FX_slide_left_out = new Fx.Style('csbottomnavsubinnerholder', 'margin-left', {
			duration: 800,
			fps: 10,
			transition: Fx.Transitions.Cubic.easeIn
		});
		FX_slide_left_out.start(-89*cs_sub_on_left,-89*cs_sections[cs_bottomnav_on].length-200);		// 200 added as safety margin for oversized special content

		// figure out which buttons to move in what direction
		if (cs_bottomnav_on < csbutton) {
			// moving left
			for (csa=cs_bottomnav_on+1;csa<=csbutton;csa++) {
				// hide actual button
				$('csmainhitbut'+csa).setStyle('left',cs_main_x[0]+96*csa+'px');
				// hide rollover
				$('csmainbut'+csa+'glow').setOpacity(0);
				$('csmainbut'+csa+'glow').setStyle('left',cs_main_x[0]+96*csa+'px');
				FX_slide_left = new Fx.Style('csmainbut'+csa+'off', 'left', {
					duration: 1000,
					fps: 15,
					transition: Fx.Transitions.Cubic.easeInOut
				});
				FX_slide_left.start.pass([cs_main_x[csa],cs_main_x[0]+96*csa], FX_slide_left).delay(500);
			}
		} else {
			// moving right
			for (csa=cs_bottomnav_on;csa>csbutton;csa--) {
				// hide actual button
				$('csmainhitbut'+csa).setStyle('left',cs_main_x[csa]+'px');
				// hide rollover
				$('csmainbut'+csa+'glow').setOpacity(0);
				$('csmainbut'+csa+'glow').setStyle('left',cs_main_x[csa]+'px');
				FX_slide_right = new Fx.Style('csmainbut'+csa+'off', 'left', {
					duration: 1000,
					fps: 15,
					transition: Fx.Transitions.Cubic.easeInOut
				});
				FX_slide_right.start.pass([cs_main_x[0]+96*csa,cs_main_x[csa]], FX_slide_right).delay(500);
			}
		}

		cs_bottomnav_on = csbutton;
		// wait for animations to finish before reopening the submenus
		setTimeout(cs_reopen,1500);
	}
}

function cs_reopen() {
	cs_init_submenu(cs_bottomnav_on);
	cs_slide_submenu_out();
	// switch all link-tag-buttons back on
	for (csa=0;csa<cs_sections.length;csa++) {
		$('csmainhitbut'+csa).setStyle('visibility','visible');
	}
	// move and show arrows
	// move them
	$('csbottomnavarrowbackleft').setStyle('left',cs_main_x[0]+96*(cs_bottomnav_on+1)+'px');
	$('csbottomnavarrowbackright').setStyle('left',cs_main_x[0]+96*(cs_bottomnav_on+1)+cs_sub_back_width-14+'px');
	$('csbottomnavarrowlefthit').setStyle('left',cs_main_x[0]+96*(cs_bottomnav_on+1)+'px');
	$('csbottomnavarrowrighthit').setStyle('left',cs_main_x[0]+96*(cs_bottomnav_on+1)+cs_sub_back_width-17+'px');
	$('csbottomnavarrowleftoff').setStyle('left',cs_main_x[0]+96*(cs_bottomnav_on+1)+'px');
	$('csbottomnavarrowrightoff').setStyle('left',cs_main_x[0]+96*(cs_bottomnav_on+1)+cs_sub_back_width-17+'px');
	$('csbottomnavarrowlefton').setStyle('left',cs_main_x[0]+96*(cs_bottomnav_on+1)+'px');
	$('csbottomnavarrowrighton').setStyle('left',cs_main_x[0]+96*(cs_bottomnav_on+1)+cs_sub_back_width-17+'px');
	$('csbottomnavarrowleftglow').setStyle('left',cs_main_x[0]+96*(cs_bottomnav_on+1)+'px');
	$('csbottomnavarrowrightglow').setStyle('left',cs_main_x[0]+96*(cs_bottomnav_on+1)+cs_sub_back_width-17+'px');
	// show them
	$('csbottomnavarrowbackleft').setOpacity(1);
	$('csbottomnavarrowbackright').setOpacity(1);

	if (cs_sub_on_left > 0) {
		$('csbottomnavarrowlefthit').setStyle('visibility','visible');
	}
	if (cs_sub_on_right < cs_sections[cs_bottomnav_on].length) {
		$('csbottomnavarrowrighthit').setStyle('visibility','visible');
	}
	if (cs_sub_on_left == 0) {
		$('csbottomnavarrowleftoff').setOpacity(1);
	} else {
		$('csbottomnavarrowlefton').setOpacity(1);
	}
	if (cs_sub_on_right == cs_sections[cs_bottomnav_on].length) {
		$('csbottomnavarrowrightoff').setOpacity(1);
	} else {
		$('csbottomnavarrowrighton').setOpacity(1);
	}
}


// sub menu arrow handlers
function cs_go_left() {
	cs_hide_submenu_links();
	// cs_sub_number
	cs_oldpos = cs_sub_on_left;
	cs_sub_on_left = cs_sub_on_left - cs_sub_number;
	cs_sub_on_right = cs_sub_on_left + cs_sub_number;
	if (cs_sub_on_left == 0) {
		// disable left arrow
		$('csbottomnavarrowlefton').setOpacity(0);
		$('csbottomnavarrowleftoff').setOpacity(1);
		$('csbottomnavarrowlefthit').setStyle('visibility','hidden');
	}
	if (cs_sub_on_left + cs_sub_number < cs_sections[cs_bottomnav_on].length) {
		// enable right arrow
		$('csbottomnavarrowrightoff').setOpacity(0);
		$('csbottomnavarrowrighton').setOpacity(1);
		$('csbottomnavarrowrighthit').setStyle('visibility','visible');
	}
	FX_sub_slide = new Fx.Style('csbottomnavsubinnerholder', 'margin-left', {
		duration: 800,
		fps: 15,
		transition: Fx.Transitions.Quad.easeInOut
	});
	FX_sub_slide.start(-cs_oldpos * 89,-cs_sub_on_left * 89);
	setTimeout(cs_set_submenu_links,900);
}

function cs_go_right() {
	cs_hide_submenu_links();
	// cs_sub_number
	cs_oldpos = cs_sub_on_left;
	cs_sub_on_left = cs_sub_on_left + cs_sub_number;
	if (cs_sections[cs_bottomnav_on].length <= cs_sub_on_right + cs_sub_number) {
		cs_sub_on_right = cs_sections[cs_bottomnav_on].length;
		// disable right arrow
		$('csbottomnavarrowrighton').setOpacity(0);
		$('csbottomnavarrowrightoff').setOpacity(1);
		$('csbottomnavarrowrighthit').setStyle('visibility','hidden');
	} else {
		cs_sub_on_right = cs_sub_on_right + cs_sub_number;
	}
	if (cs_oldpos == 0) {
		// enable left arrow
		$('csbottomnavarrowleftoff').setOpacity(0);
		$('csbottomnavarrowlefton').setOpacity(1);
		$('csbottomnavarrowlefthit').setStyle('visibility','visible');
	}
	FX_sub_slide = new Fx.Style('csbottomnavsubinnerholder', 'margin-left', {
		duration: 800,
		fps: 15,
		transition: Fx.Transitions.Quad.easeInOut
	});
	FX_sub_slide.start(-cs_oldpos * 89,-cs_sub_on_left * 89);
	setTimeout(cs_set_submenu_links,900);
}


var FX_arrowrollover
function cs_arrow_rollon(csarrow) {
	if (FX_arrowrollover) {
		FX_arrowrollover.stop();
	}
/*	$('csbottomnavarrow'+csarrow+'glow').setOpacity(0);
	FX_arrowrollover = new Fx.Style('csbottomnavarrow'+csarrow+'glow', 'opacity', {
		duration: 500,
		fps: 10,
		transition: Fx.Transitions.Cubic.easeOut
	});
	FX_arrowrollover.start(0,1);*/
	$('csbottomnavarrow'+csarrow+'glow').setOpacity(100);
}

function cs_arrow_rolloff(csarrow) {
	if (FX_arrowrollover) {
		FX_arrowrollover.stop();
	}
	$('csbottomnavarrow'+csarrow+'glow').setOpacity(0);
/*	FX_arrowrollover = new Fx.Style('csbottomnavarrow'+csarrow+'glow', 'opacity', {
		duration: 150,
		fps: 10,
		transition: Fx.Transitions.Cubic.easeOut
	});
	FX_arrowrollover.start(1,0);*/
}


// sub menu button handlers
function cs_open_sub(cssubbut) {
	cs_real_sub = cs_sub_on_left + cssubbut;
	this.location.href = cs_sections[cs_bottomnav_on][cs_real_sub];
}

function cs_sub_rollon(cssubbut) {
	$('cssubhiton'+cssubbut).setOpacity(1);
}

function cs_sub_rolloff(cssubbut) {
	if (!(cs_url_main_preset == cs_bottomnav_on  &&  cs_url_nav_preset == cs_sub_on_left  &&  cs_url_sub_preset == cssubbut)) {
		$('cssubhiton'+cssubbut).setOpacity(0);
	}
}