if( ! Array.prototype.contains ){
    /**
    * @access public
    * @param value mixed 検索するオブジェクト
    * @return boolean 対象配列に既にオブジェクトが存在していれば true, そうでなければ false
    * 配列の値の重複チェックなどに使用。
    */
    Array.prototype.contains = function( value ){
        for(var i in this){
            if( this.hasOwnProperty(i) && this[i] === value){
                return true;
            }
        }
        return false;
    }
}

function getBrowserWidth() {
    if ( window.innerWidth ) {
        return window.innerWidth;
    }
    else if ( document.documentElement && document.documentElement.clientWidth != 0 ) {
        return document.documentElement.clientWidth;
    }
    else if ( document.body ) {
        return document.body.clientWidth;
    }
    return 0;
}

function getBrowserHeight() {
    if ( window.innerHeight ) {
        return window.innerHeight;
    }
    else if ( document.documentElement && document.documentElement.clientHeight != 0 ) {
    	return document.documentElement.clientHeight;
    }
    else if ( document.body ) {
        return document.body.clientHeight;
    }
    return 0;
}


window.addEvent('domready', function() {

	/**
	 * You usually reuse ONE instance.
	 * The 4 instances well reuse here represent different options.
	 */
	var roars = [
		//new Roar(),
		new Roar({
			position: 'upperRight'
		})
	];

	/**
	 * CSS selector to get the 4 links and iterate over them
	 */
	
	/**
	 * Hey, now I can throw random messages at the user!
	 */
	$$('#help1').addEvent('mouseover', function() {

		/**
		 * I take the index of the element as roar instance index.
		 */
		if (roars[0].options.running == false) {
			roars[0].options.running = true;
			roars[0].options.height = 90;
			roars[0].bodyCss.helpType = 1;
			
			roars[0].alert(
				["配達時カード決済とは？"],
				["商品お届け時に、配達員が持参したクレジットカード決済端末にて代金をお支払いいただける決済方法です。"]
			);
		}
		return false; // cancel the click
	});
	
	$$('#help2').addEvent('mouseover', function() {
	
		/**
		 * I take the index of the element as roar instance index.
		 */
		if (roars[0].options.running == false) {
			roars[0].options.running = true;
			roars[0].bodyCss.helpType = 2;
			
			// ブラウザ別に設定した方がよい
			switch (bill.length) {
				case 1:
					roars[0].options.height = 110;
					break;
				case 2:
					roars[0].options.height = 216;
					break;
				case 3:
					roars[0].options.height = 320;
					break;
				case 4:
					roars[0].options.height = 400;
					break;
			}
			
			var titles = [];
			var messages = [];
			
			if (!bill.contains(4)) {
				
				titles.push("お支払い方法について","・代金引換");
				messages.push("", "商品お届け時に現金で支払います。");
				
				if (bill.contains(1)) {
					titles.push("・請求書払い");
					messages.push("請求書発行による後払いで支払います。<br/>店舗の条件によっては、請求書発行後振込を指定してもご利用いただけない場合がございます。");
				}
				
				if (bill.contains(2)) {
					titles.push("・配達時カード決済");
					messages.push("商品お届け時に、配達員が持参したクレジットカード決済端末にて代金をお支払いいただける決済方法です。");
				}
				
				
				if (bill.contains(3)) {
					titles.push("・オンラインカード決済");
					messages.push("ご注文時に画面からクレジットカード情報をご入力いただくことで、代金をお支払いいただける決済方法です。");
				}
			}else{
				titles.push("お支払い方法について","・ぐるなび売掛決済");
				messages.push("","請求書はご指定の本社または支社（営業所）に、<br/>ぐるなびが取りまとめて送付いたします。");
			}
			
			roars[0].alert(titles, messages);
		}
		return false; // cancel the click
	});
	
	var help3MouseOver = function() {
	
		/**
		 * I take the index of the element as roar instance index.
		 */
		if (roars[0].options.running == false) {
			roars[0].options.running = true;
			roars[0].bodyCss.helpType = 3;
			
			var titles = [];
			var messages = [];
			var height = 490;
			
			if ( typeof( biz ) == 'undefined' || !biz) {
				
				titles.push("お支払い方法について","・代金引換");
				messages.push("通常の代金引換によるお届けのほかに、店舗によっては、複数の支払い方法から選択することができます。", "商品お届け時に現金で支払います。");
				titles.push("・請求書払い");
				messages.push("請求書発行による後払いで支払います。<br/>店舗の条件によっては、請求書発行後振込を指定してもご利用いただけない場合がございます。");
				
				titles.push("・配達時カード決済");
				messages.push("商品お届け時に、配達員が持参したクレジットカード決済端末にて代金をお支払いいただける決済方法です。");
							
				titles.push("・オンラインカード決済");
				messages.push("ご注文時に画面からクレジットカード情報をご入力いただくことで、代金をお支払いいただける決済方法です。");
				
			}else{
				
				height = 110;
				
				titles.push("お支払い方法について","・ぐるなび売掛取引");
				messages.push("","請求書はご指定の本社または支社（営業所）に、<br/>ぐるなびが取りまとめて送付いたします。");
			}
			roars[0].options.height = height;
			roars[0].alert(titles, messages);

		}
		return false; // cancel the click
	}
	
	$$('img.help3').addEvent('mouseover', help3MouseOver);
	
	$$('#help3').addEvent('mouseover', help3MouseOver);

	$$('#help4').addEvent('mouseover', function() {

		/**
		 * I take the index of the element as roar instance index.
		 */
		if (roars[0].options.running == false) {
			roars[0].options.running = true;
			roars[0].options.height = 90;
			roars[0].bodyCss.helpType = 1;
			
			roars[0].alert(
				["オンラインカード決済とは？"],
				["ご注文時に画面からクレジットカード情報をご入力いただくことで、代金をお支払いいただける決済方法です。"]
			);
		}
		return false; // cancel the click
	});
});

/**
 * Roar - Notifications
 *
 * Inspired by Growl
 *
 * @version		1.0.1
 *
 * @license		MIT-style license
 * @author		Harald Kirschner <mail [at] digitarald.de>
 * @copyright	Author
 */


var Roar = new Class({

	Implements: [Options, Events, Chain],

	bodyCss: {
		helpType: 3,
		height: 0,// default
		width: 950
	},
	
	options: {
		duration: 6000,
		position: 'upperLeft',
		container: null,
		bodyFx: null,
		itemFx: null,
		margin: {x: 10, y: 10},
		offset: 0,
		height: 150,//default
		running: false,
		className: 'roar',
		onShow: $empty,
		onHide: $empty,
		onRender: $empty
	},

	initialize: function(options) {
		this.setOptions(options);
		this.items = [];
		this.container = $(this.options.container) || document;
	},

	alert: function(_title, _message, options) {
		
		var items = [];
		var title;
		var message;
		
		for (var i=0; i<_title.length; i++) {
		
			title   = _title[i];
			message = _message[i];
			
			// separater
			if (i > 1) {
				items.push(new Element('a', {'html': "----------------------------------------------------------------------", "styles": {"class": "separater"}}));
			}
			
			//var params = Array.link(arguments, {title: String.type, message: String.type, options: Object.type});
			var params = {title: title, message: message};
			if (params.title)	items.push(new Element('h3', {'html': $pick(params.title, '')}));
			if (params.message) items.push(new Element('p', {'html': params.message}));
		}
		return this.inject(items, params.options);
	},

	inject: function(elements, options) {
		//if (!this.body) this.render();
		this.render();
		options = options || {};

		var offset = [-this.options.offset, 0];
		var last = this.items.getLast();
		if (last) {
			offset[0] = last.retrieve('roar:offset');
			offset[1] = offset[0] + last.offsetHeight + this.options.offset;
		}
		var to = {'opacity': 1};
		to[this.align.y] = offset;

		var item = new Element('div', {
			'class': this.options.className,
			'opacity': 0
		}).adopt(
			new Element('div', {
				'class': 'roar-bg',
				'opacity': 0.7,
				'styles': {
					'height': this.options.height
				}
			}),
			elements
		);

		item.setStyle(this.align.x, 0).store('roar:offset', offset[1]).set('morph', $merge({
			unit: 'px',
			link: 'cancel',
			onStart: Chain.prototype.clearChain,
			transition: Fx.Transitions.Back.easeOut
		}, this.options.itemFx));

		var remove = this.remove.create({
			bind: this,
			arguments: [item],
			delay: 10
		});
		this.items.push(item.addEvent('click', remove));

		if (this.options.duration) {
			var over = false;
			var trigger = (function() {
				trigger = null;
				if (!over) remove();
			}).delay(this.options.duration);
			item.addEvents({
				mouseover: function() {
					over = true;
				},
				mouseout: function() {
					over = false;
					if (!trigger) remove();
				}
			});
		}
		item.inject(this.body).morph(to);
		return this.fireEvent('onShow', [item, this.items.length]);
	},

	remove: function(item) {
		this.options.running = false;
		
		var index = this.items.indexOf(item);
		if (index == -1) return this;
		this.items.splice(index, 1);
		item.removeEvents();
		var to = {opacity: 0};
		to[this.align.y] = item.getStyle(this.align.y).toInt() - item.offsetHeight - this.options.offset - 20;
		item.morph(to).get('morph').chain(item.destroy.bind(item));
		return this.fireEvent('onHide', [item, this.items.length]).callChain(item);
	},

	empty: function() {
		while (this.items.length) this.remove(this.items[0]);
		return this;
	},

	render: function() {
		this.position = this.options.position;
		if ($type(this.position) == 'string') {
			var position = {x: 'center', y: 'center'};
			this.align = {x: 'left', y: 'top'};
			if ((/left|west/i).test(this.position)) position.x = 'left';
			else if ((/right|east/i).test(this.position)) this.align.x = position.x = 'right';
			if ((/upper|top|north/i).test(this.position)) position.y = 'top';
			else if ((/bottom|lower|south/i).test(this.position)) this.align.y = position.y = 'bottom';
			this.position = position;
			
		}
		this.body = new Element('div', {'class': 'roar-body'}).inject(document.body);
		if (Browser.Engine.trident4) this.body.addClass('roar-body-ugly');
		this.moveTo = this.body.setStyles.bind(this.body);
		this.reposition();
		if (this.options.bodyFx) {
			var morph = new Fx.Morph(this.body, $merge({
				unit: 'px',
				chain: 'cancel',
				transition: Fx.Transitions.Circ.easeOut
			}, this.options.bodyFx));
			this.moveTo = morph.start.bind(morph);
		}
		var repos = this.reposition.bind(this);
		window.addEvents({
			scroll: repos,
			resize: repos
		});
		this.fireEvent('onRender', this.body);
	},

	reposition: function() {
		var max = document.getCoordinates(), scroll = document.getScroll();
		//var margin = this.options.margin;
		
		switch (this.bodyCss.helpType) {
			case 1:
				var el = document.getElementById("help1");
				var h = 10;
				if (el != null) {
					h = el.offsetTop - 5;
				}
				if (location.hostname.match(/delivery/)) {
					var margin = {x: (getBrowserWidth() - this.bodyCss.width)/2 + 10, y: h};
					
				} else {
					// catering
					var margin = {x: (getBrowserWidth() - this.bodyCss.width)/2, y: h};
				}
				break;
			
			case 2:
				//bodyの幅に合わせる
				var margin = {x: (getBrowserWidth() - this.bodyCss.width)/2 + 96, y: 10};
				break;
			
			case 3:
				//bodyの幅に合わせる
				var margin = {x: (getBrowserWidth() - this.bodyCss.width)/2, y: 10};
				break;
			
			default:
				var margin = this.options.margin;
				break;
		}
		
		max.left += scroll.x;
		max.right += scroll.x;
		if (this.bodyCss.helpType) max.top += scroll.y;
		if (this.bodyCss.helpType) max.bottom += scroll.y;
		var rel = ($type(this.container) == 'element') ? this.container.getCoordinates() : max;
		this.moveTo({
			left: (this.position.x == 'right')
				? (Math.min(rel.right, max.right) - margin.x)
				: (Math.max(rel.left, max.left) + margin.x),
			top: (this.position.y == 'bottom')
				? (Math.min(rel.bottom, max.bottom) - margin.y)
				: (Math.max(rel.top, max.top) + margin.y)
		})
	}

});