// SCROLL
function writeScrollBar(id) {
	document.writeln(	'<div id="' + id + '" class="scrollbar_h">');
	document.writeln(		'<div class="scrollbar_h-lbtn"></div>');
	document.writeln(		'<div class="scrollbar_h-rbtn"></div>');
	document.writeln(		'<div class="scrollbar_h-main">');
	document.writeln(			'<div class="scrollbar_h-knob">');
	document.writeln(				'<div class="scrollbar_h-knob_left"></div>');
	document.writeln(				'<div class="scrollbar_h-knob_right"></div>');
	document.writeln(				'<div class="scrollbar_h-knob_body"></div>');
	document.writeln(			'</div>');
	document.writeln(		'</div>');
	document.writeln(	'</div>');
}
//var _scroller;	// for DEBUG
var $_fn200msOnLoad = $empty;
window.addEvent('domready', function () {
	var wrapper = $('kitchen-navi-box');
	var padding = wrapper.getElement('ul.menu');
	var scrollbar = $('scrollbar01');
	function setHandleWidth(wrapper, padding, scrollbar) {
		var overHang = padding.offsetWidth - wrapper.offsetWidth;
		if (overHang < 0)	overHang = 0;
		var handleWidthPercent = (100 - ((overHang * 100) / padding.offsetWidth));
		scrollbar = scrollbar.hasClass('scrollbar_h-main') ? scrollbar : scrollbar.getElement('.scrollbar_h-main');
		var handlePaddingValue = scrollbar.getElement('.scrollbar_h-knob_left').offsetWidth + scrollbar.getElement('.scrollbar_h-knob_right').offsetWidth;
		var handleWidth = ((handleWidthPercent * scrollbar.offsetWidth) / 100) - handlePaddingValue;
		var handle = scrollbar.getElement('.scrollbar_h-knob');
		if (handle.getStyle('min-width') && handle.getStyle('min-width').toFloat() > handleWidth) {
			handleWidth = handle.getStyle('min-width').toFloat();
		}
		handle.setStyle('width', handleWidth);
	}
	setHandleWidth(wrapper, padding, scrollbar);
	//
	var FxSliderWrapper = new Class({
		Extends: Fx,
		initialize: function (slider, options) {
			this.slider = this.subject = slider;
			this.parent(options);
		},
		set: function(step) {
			this.slider.set(step);
		},
		start: function(step) {
			return this.parent(this.slider.step, step);
		}
	});
	//
	function attachScrollBar(wrapper, padding, scrollbar) {
		Slider.prototype.clickedElement = function(event){
			if (this.isDragging || event.target == this.knob) return;

			var dir = this.range < 0 ? -1 : 1;
			var position = event.page[this.axis] - this.element.getPosition()[this.axis] - this.half;
			position = position.limit(-this.options.offset, this.full -this.options.offset);

			var step = Math.round(this.min + dir * this.toStep(position));
			if (this.fx) {
				this.fx.start(step);
			} else {
				this.set(step);
			}
		}
		Slider.prototype.draggedKnob = function(event){
			var dir = this.range < 0 ? -1 : 1;
			var position = this.drag.value.now[this.axis];
			position = position.limit(-this.options.offset, this.full -this.options.offset);
			var step = Math.round(this.min + dir * this.toStep(position));
			if (this.fx) {
				this.step = (step * 4 + this.previousChange * 6) / 10;
				this.checkStep();
				this.hasDragged = true;
				this.fx.start(step).chain(function () { this.hasDragged = false; }.bind(this));
			} else {
				this.step = step;
				this.checkStep();
			}
		}
//
		var overHang = padding.offsetWidth - wrapper.offsetWidth;
		if (overHang <= 0)	return;
		var bar = scrollbar.hasClass('scrollbar_h-main') ? scrollbar : scrollbar.getElement('.scrollbar_h-main');
		var knob = bar.getElement('.scrollbar_h-knob');
		var scroller = new Slider(bar, knob, {
			range: [0, overHang],
			steps: overHang,
			onChange: function (step) {
				wrapper.scrollTo(step, 0);
			},
			onTick: function (position) {
				if (!this.isDragging && !this.hasDragged)
					Slider.prototype.options.onTick.call(this, position);
			}
		});
//		window._scroller = scroller;	// for DEBUG
		//
		var fxScroller = new FxSliderWrapper(scroller, {
			duration: 200,
			transition: 'expo:out',
			link: 'cancel'
		});
		scroller.fx = fxScroller;
		//
		var lbutton = scrollbar.getElement('.scrollbar_h-lbtn');
		var rbutton = scrollbar.getElement('.scrollbar_h-rbtn');
		if (lbutton && rbutton) {
			var buttons = $$([lbutton, rbutton]).setStyle('cursor', 'pointer');
			var stopSteps = [scroller.min];
			$$('#kitchen-navi-box ul.menu > li').each(function (li) {
				var i = stopSteps.length;
				stopSteps[i] = stopSteps[i - 1] + li.offsetWidth;
			});
			var lStopSteps = stopSteps.filter(function (step) {
				return (step <= scroller.max);
			});
			var rStopSteps = stopSteps.map(function (step) {
				return (step - padding.offsetWidth + scroller.max - scroller.min);
			}).filter(function (step) {
				return (step >= scroller.min);
			}).reverse();
			lbutton.addEvent('click', function () {
				var currStep = scroller.step;
				var step = scroller.min;
				for (var i = 0; i < lStopSteps.length; i++) {
					if (lStopSteps[i] < currStep)	step = lStopSteps[i];
				}
				if (currStep <= step)	return;
			//	scroller.set(step);
				fxScroller.start(step);
			});
			rbutton.addEvent('click', function () {
				var currStep = scroller.step;
				var step = scroller.max;
				for (var i = 0; i < rStopSteps.length; i++) {
					if (rStopSteps[i] > currStep)	step = rStopSteps[i];
				}
				if (currStep >= step)	return;
			//	scroller.set(step);
				fxScroller.start(step);
			});
		}
		return scroller;
	}
	var scroller = attachScrollBar(wrapper, padding, scrollbar);
	scroller.set(scroller.max);
	window.$_fn200msOnLoad = function () {
		new FxSliderWrapper(scroller, {
			duration: 1000,
			fps: 75,
			transition: 'sine:in:out',
			link: 'ignore'
		}).start(scroller.min);
	};
	if (window.$loaded)	window.$_fn200msOnLoad.delay(200);
});
window.addEvent('load', function () {
	window.$_fn200msOnLoad.delay(200);
	window.$loaded = true;
});
// MOUSE HOVER
window.addEvent('domready', function () {
	var items = $$('#kitchen-navi-box ul.menu > li');
	items.each(function (item) {
		var id = item.id.replace(/^.+-([^-]+)$/, "$1");
		var bgsrc = $('kitchen-navi').getStyle('background-image').replace(
			/^url\(["']?(.+-)[^-\.]+(\.(gif|jpe?g|png))['"]?\)$/,
			"$1" + id + "$2"
		);
		var bgimg = new Image;
		bgimg.src = bgsrc;
		var photo = item.relPhoto = new Element('span', {
			styles: {
				'position': 'absolute',
				'left': 0,
				'top': 0,
				'width': 940,
				'height': 235,
				'opacity': 0,
				'background': 'url(' + bgsrc + ') no-repeat'
			}
		}).inject($('kitchen-navi'), 'top');
		photo.set('tween', {duration: 'normal', link: 'cancel'});
		item.activate = function (immediate) {
			item.addClass('active');
			if (Browser.Engine.trident4 && item.iepngfix && item.filters[IEPNGFIX.filter]) {
				var bgimg = item.filters[IEPNGFIX.filter].src;
				item.filters[IEPNGFIX.filter].src = bgimg.replace(/(-on)?\.png/, '-on.png');
			}
			$('kitchen-navi').setStyle('background-image', 'url(' + bgsrc + ')');
			if (immediate) {
				photo.setStyle('opacity', 1);
			} else {
				photo.tween('opacity', 1);
			}
			return item;
		}
		item.deactivate = function () {
			item.removeClass('active');
			if (Browser.Engine.trident4 && item.iepngfix && item.filters[IEPNGFIX.filter]) {
				var bgimg = item.filters[IEPNGFIX.filter].src;
				item.filters[IEPNGFIX.filter].src = bgimg.replace(/(-on)?\.png/, '.png');
			}
			photo.tween('opacity', 0);
			return item;
		}
		item.addEvent('mouseenter', function () {
			if (item.hasClass('active'))	return;
			for (var i = 0; i < items.length; i++)	if (items[i] != item) {
				items[i].deactivate();
			}
			item.activate();
		});
	});
	items[0].activate(true);
//	$('kitchen-navi').setStyle('background', '#333');
});