/**
 * Extensible Codes of Accordion
 */
var AccordionEx = {
	// variables
	timer   : 0,
	duration: 500,
	toggler : '.accordion-toggler',
	element : '.accordion-element',
	sidemenuSelected    : 'selected',
	sidemenuFirstToggler: 'first-toggler',
	sidemenuLastToggler : 'last-toggler',
	sidemenuHeadId      : 'head_cat',
	sidemenuFootId      : 'foot_cat',
	sidemenuHeadStyleOn : {background: 'transparent url(./../../img/navi_cat/head_cat_on.gif) no-repeat scroll 0 0'},
	sidemenuHeadStyleOff: {background: 'transparent url(./../../img/navi_cat/head_cat_normal.gif) no-repeat scroll 0 0'},
	sidemenuFootStyleOn : {background: 'transparent url(./../../img/navi_cat/foot_cat_on.gif) no-repeat scroll 0 0'},
	sidemenuFootStyleOff: {background: 'transparent url(./../../img/navi_cat/foot_cat_normal.gif) no-repeat scroll 0 0'},
	preloadImage: function(){
		// dummy load
		var togglers = $$(AccordionEx.toggler);
		var imgOn  = new Image();
		var imgOff = new Image();
		for (var i = 0; i < togglers.length; i++){
			imgOn  = new Image();
			imgOff = new Image();
			imgOn.src = './../../img/navi_cat/' + togglers[i].id.replace('c_', '') + '_on.gif';
			imgOff.src = './../../img/navi_cat/' + togglers[i].id.replace('c_', '') + '_normal.gif';
		}
		imgOn  = new Image();
		imgOff = new Image();
		imgOn.src = './../../img/navi_cat/head_cat_on.gif';
		imgOff.src = './../../img/navi_cat/head_cat_normal.gif';
		imgOn  = new Image();
		imgOff = new Image();
		imgOn.src = './../../img/navi_cat/foot_cat_on.gif';
		imgOff.src = './../../img/navi_cat/foot_cat_normal.gif';
	},

	// methods
	timerPageMove: function(url){
//			return;
		if (url == ''){
			return;
		}
		AccordionEx.timer = setInterval(function(){AccordionEx.movePage(url)}, AccordionEx.duration);
	},
	movePage: function(url){
		clearInterval(AccordionEx.timer);
		location.href = url;
	},
	adjustRoundedStyles: function(toggler, element, calledby){
		// Initialize rounded sidebar menu header and footer
		AccordionEx.adjustAccordion();

		togglers = $$(AccordionEx.toggler);
		var currentBg = toggler.style.background;

		// When the first element of accordion is selected
		if (toggler == togglers[0]){
			if (calledby == 'active'){
				$(AccordionEx.sidemenuHeadId).setStyles(AccordionEx.sidemenuHeadStyleOn);
			}else{
				$(AccordionEx.sidemenuHeadId).setStyles(AccordionEx.sidemenuHeadStyleOff);
			}
		}

		// When the last element of accordion is selected
		if (toggler == togglers[togglers.length - 1]){
			if (currentBg.match(/on/)){
				$(AccordionEx.sidemenuFootId).setStyles(AccordionEx.sidemenuFootStyleOn);
			}else{
				$(AccordionEx.sidemenuFootId).setStyles(AccordionEx.sidemenuFootStyleOff);
			}
		}
	},
	setRollover: function(){
		this.preloadImage();
		var togglers = $$(AccordionEx.toggler);
		togglers[0].addClass(AccordionEx.sidemenuFirstToggler);
		togglers[togglers.length - 1].addClass(AccordionEx.sidemenuLastToggler);
		togglers.addEvent('mouseover', function(){AccordionEx.onMouseover(this);});
		togglers.addEvent('mouseout', function(){AccordionEx.onMouseout(this);});
	},
	onMouseover: function(obj){
		if (!obj.hasClass(AccordionEx.sidemenuSelected)){
			obj.setStyles({background: 'transparent url(./../../img/navi_cat/' + obj.id.replace('c_', '') + '_on.gif) no-repeat scroll 0 0'});
			if (obj.hasClass(AccordionEx.sidemenuFirstToggler)){$(AccordionEx.sidemenuHeadId).setStyles(AccordionEx.sidemenuHeadStyleOn);}
			if (obj.hasClass(AccordionEx.sidemenuLastToggler)) {$(AccordionEx.sidemenuFootId).setStyles(AccordionEx.sidemenuFootStyleOn);}
		}
	},
	onMouseout: function(obj){
		if (!obj.hasClass(AccordionEx.sidemenuSelected)){
			obj.setStyles({background: 'transparent url(./../../img/navi_cat/' + obj.id.replace('c_', '') + '_normal.gif) no-repeat scroll 0 0'});
			if (obj.hasClass(AccordionEx.sidemenuFirstToggler)){$(AccordionEx.sidemenuHeadId).setStyles(AccordionEx.sidemenuHeadStyleOff);}
			if (obj.hasClass(AccordionEx.sidemenuLastToggler)) {$(AccordionEx.sidemenuFootId).setStyles(AccordionEx.sidemenuFootStyleOff);}
		}
	},
	adjustAccordion: function(){
		var togglers = $$(AccordionEx.toggler);
		var elements = $$(AccordionEx.element);
		elements.setStyles({visibility: 'visible', display: '', margin:0});
		for (var i = 0; i < elements.length; i++){
			if (elements[i].style.height == '0px'){
				elements[i].setStyles({'border-bottom': '0px solid #ccc'});
			}else{
				elements[i].setStyles({'border-bottom': '1px solid #ccc'});
			}
		}

	}
}


/**
 * To change images of item on detail page
 */
var DetailImageStyling = {
	styleHover : {border: 'solid 1px #f23e57'},
	styleNormal: {border: 'solid 1px #cccccc'},
	colorHover : {color: '#f23e57'},
	colorNormal: {color: '#444444'},
	initialize: function(){
		if (!$$('.img_area')[0]){return;}
		$$('.img_area a.thumbnails-image').addEvent('mouseover', function(){DetailImageStyling.changeStyleTo();});
		$$('.img_area a.thumbnails-image').addEvent('mouseout', function(){DetailImageStyling.restoreStyleTo();});
		$$('.img_area a.thumbnails-more').addEvent('mouseover', function(){DetailImageStyling.changeStyleTo();});
		$$('.img_area a.thumbnails-more').addEvent('mouseout', function(){DetailImageStyling.restoreStyleTo();});
	},
	changeStyleTo: function(){
		$$('.img_area a.thumbnails-image').setStyles(this.styleHover);
		$$('.img_area a.thumbnails-more').setStyles(this.colorHover);
	},
	restoreStyleTo: function(){
		$$('.img_area a.thumbnails-image').setStyles(this.styleNormal);
		$$('.img_area a.thumbnails-more').setStyles(this.colorNormal);
	}
}

/**
 * To change each image and title of item on list page
 */
var ItemListHoverStyling = {
	styleImageHover  : {border: 'solid 1px #f23e57'},
	styleImageNormal : {border: 'solid 1px #cccccc'},
	styleAnchorHover : {color: '#f23e57'},
	styleAnchorNormal: {color: '#444444'},
	initialize: function(){
		if ($$('.inner_detail').length == 0){return;}
		var lists = $$('.inner_detail');
		for (var i = 0; i < lists.length; i++){
			var id = lists[i].id;
			$(id).addEvent('mouseover', function(){ItemListHoverStyling.changeStyleTo(this.id);});
			$(id).addEvent('mouseout', function(){ItemListHoverStyling.restoreStyleTo(this.id);});
			$(id).addEvent('click', function(){ItemListHoverStyling.changeDisplay(this.id);});
		}
	},
	changeStyleTo: function(id){
		$(id + 'a').setStyles(this.styleAnchorHover);
	},
	restoreStyleTo: function(id){
		$(id + 'a').setStyles(this.styleAnchorNormal);
	},
	changeDisplay: function(id){
		location.href = $(id + 'a').href;
	}
}

/**
 * To change string in search form
 */
var SearchAccessibility = {
	// status of form change
	changed: false,

	// options
	options: {
		defaultPhrase   : 'Search...',
		defaultClassName: 'search-form-default',
		changedClassName: 'search-form-changed',
		focusedClassName: 'search-form-focused',
		targetElementId : 'search_keyword'
	},

	// start from this method
	initialize: function (options){
		this.options = $merge(options, this.options);
		this.setPhrase();

		// set event when form is changed
		// for IE, onchange event is fired on onblur event, so also listen by the key event
		$(SearchAccessibility.options.targetElementId).addEvent('change', function(){SearchAccessibility.onChange(this)});
		$(SearchAccessibility.options.targetElementId).addEvent('keyup', function(){SearchAccessibility.onChange(this)});

		$(SearchAccessibility.options.targetElementId).addEvent('focus', function(){SearchAccessibility.onFocus(this)});
		$(SearchAccessibility.options.targetElementId).addEvent('blur', function(){SearchAccessibility.onBlur(this)});
	},

	// set default string by status (required to use global reference)
	setPhrase: function(){
		var targetElementId = SearchAccessibility.options.targetElementId;
		if ($(targetElementId)){
			var value = $(targetElementId).value;
			if (!SearchAccessibility.changed && value == ''){
				$(targetElementId).removeClass(SearchAccessibility.options.changedClassName).removeClass(SearchAccessibility.options.focusedClassName).addClass(SearchAccessibility.options.defaultClassName);
				$(targetElementId).value = SearchAccessibility.options.defaultPhrase;
			}else{
				SearchAccessibility.onChange();
				$(targetElementId).removeClass(SearchAccessibility.options.defaultClassName).removeClass(SearchAccessibility.options.focusedClassName).addClass(SearchAccessibility.options.changedClassName);
			}
		}
	},

	// when the string in search form is changed
	onChange: function(evt){
		if ($(SearchAccessibility.options.targetElementId).value == ''){
			SearchAccessibility.changed = false;
		}else{
			SearchAccessibility.changed = true;
		}
	},

	// when the search form is focused
	onFocus: function(evt){
		if (!SearchAccessibility.changed){
			evt.value = "";
			evt.removeClass(SearchAccessibility.options.changedClassName).removeClass(SearchAccessibility.options.defaultClassName).addClass(SearchAccessibility.options.focusedClassName);
		}
	},

	// when the focus is out of the search form
	onBlur: function(evt){
		SearchAccessibility.setPhrase();
	},

	// when the search form is submitted (onsubmit handler is required to form tag)
	onSubmit: function(){
//		$(SearchAccessibility.options.targetElementId).fireEvent('change');
		if (!SearchAccessibility.changed){
			$(SearchAccessibility.options.targetElementId).value = '';
		}
		return true;
	}
}

window.addEvent('domready', function(){
// ロード時に実行するJavaScriptはすべてここに記述

	AccordionEx.setRollover();

	/**
	 * Create Accordion instance
	 */

	var currentOpenAccordion = ($("current_open_accordion") ? $("current_open_accordion").value : null);
	if (currentOpenAccordion < 0 || currentOpenAccordion == '' || currentOpenAccordion == undefined){
		currentOpenAccordion = null;
	}

	var togglers = $$(AccordionEx.toggler);
	togglers[togglers.length - 1].setStyles({'border-bottom': 0});
	$$(AccordionEx.element).setStyles({visibility: 'visible', display: '', margin:0});
	myAccordion = new Accordion($('navi_cat'), AccordionEx.toggler, AccordionEx.element, {
		opacity: false,
		display: currentOpenAccordion, 
		//show: currentOpenAccordion, 
		initialDisplayFx: false,
		alwaysHide: true,
//		alwaysHide: false,

		onComplete: function(toggler, element){
		//	toggler.setStyles({background: 'transparent url(./../../img/navi_cat/' + toggler.id.replace('c_', '') + '_on.gif) no-repeat scroll 0 0'});
			AccordionEx.adjustRoundedStyles(toggler, element);
		},

		// (function) Function to execute when an element starts to show
		onActive: function(toggler, element){
			toggler.addClass(AccordionEx.sidemenuSelected);
			toggler.setStyles({background: 'transparent url(./../../img/navi_cat/' + toggler.id.replace('c_', '') + '_on.gif) no-repeat scroll 0 0'});
			AccordionEx.adjustRoundedStyles(toggler, element, 'active');
			// write if you need
			// [NOTE] Sometimes makes accordions unavailable if this function is set. No process can't be written.
			//(toggler.getElements('a'))[0].setStyles({backgroundImage: 'url(../img/navi_cat/00marketable_on.gif)'});
		},

		// (function) Function to execute when an element starts to hide
		onBackground: function(toggler, element){
			toggler.removeClass(AccordionEx.sidemenuSelected);
			toggler.setStyles({background: 'transparent url(./../../img/navi_cat/' + toggler.id.replace('c_', '') + '_normal.gif) no-repeat scroll 0 0'});
			AccordionEx.adjustRoundedStyles(toggler, element, 'background');
			// write if you need
			element.setStyles({'border-bottom': '0px solid #fff'})
		}
	});
	AccordionEx.adjustAccordion();
	DetailImageStyling.initialize();
	ItemListHoverStyling.initialize();
	SearchAccessibility.initialize({});
});