/**
 * @version  1.00
 * @updated  2010/04/01
 */



(function ($) {
	var option = {
		init: function() {
			
			/* var */
			
			body_id    = $('body').attr('id');
			body_class = $('body').attr('class');
		
			path = document.URL.split('/');
			if (path[5]) {
				root = '/' + path[3] + '/' + path[4] + '/' + path[5];
			} else {
				if (path[4].indexOf('mightypanel',0) != -1) {
					root = '/' + path[3] + '/' + path[4] + '/index.html';
				} else if (path[4].indexOf('os',0) != -1) {
					root = '/' + path[3] + '/' + path[4] + '/index.html';
				} else  {
					root = '/' + path[3] + '/' + path[4];
				}
			}

			
			/* func */
			
			option.load();
		},



		load: function () {
			$.ajax({
				url     : '/data/shared/xml/options.xml',
				type    : 'GET',
				dataType: 'xml',
				cache   : false,
				success : function (r) {
					if (body_class == 'option-index' || body_class == 'option-server') option.output_index($(r).children());
					if (body_class == 'option-detail') option.output_detail($(r).children());
					if ($('div#optionlist')) option.output_links($(r).children());
				}
			});
		},
		


		/* ================= index ================= */

		
		output_index: function (data) {

			
			$(data).children().each( function () {
			
				var cate = $(this).get(0).tagName;
				var html = [];
				
				$(this).children().each( function () {			
						
					
					if (body_class == 'option-index') {
					
						html.push('<p class="outer-title"><a id="' + $(this).attr('href').replace('#','') + '" class="left"></a>' + $(this).attr('title') + '</p>');
					
						$(this).children().each( function () { option.render(this,html); });
					
					} else if (body_class == 'option-server')  {
					
						$(this).children().each( function () {

							var id   = $('body').attr('id');
							var plan = $(this).attr('plan');
							
							if (plan.indexOf(id,0) != -1) {
							
								option.render(this,html);
								
							}
							
						});
					}
					


				});
				
				html.push('<p class="pagetop"><a href="#page-top"><img src="/data/shared/img/btn_pagetop.gif" alt="PAGETOP" width="89" height="21" /></a></p>');
				
				$('div#sh-' + cate + ' div.in').html(html.join(''));
				
			});
			
			
			
			var html_pn = [];
			option.display('default','all',html_pn);
			$('div#pagenavi ul').html(html_pn.join(''));
			common.hover();
			common.scroll();
			common.showcase();
			
			if (body_class == 'option-index') option.action_index();
			
			if (path[4]) {
				var anchor = path[4].replace('#','');
				var offset = $('a#' + anchor).offset();
				$('body,html').animate(
					{scrollTop: offset.top},
					1000,
					'swing'
				);
			}
			
		},
		
		
		
		render: function (elm,html) {
						
			var txt      = $(elm).find('txt').text();				
			if (txt.length > 55) {
				var str  = txt.substr(0,54);
				var txt  = str + '…';
			}
			
			var cnd    = $(elm).find('pricelist').attr('type');
			var price  = $(elm).find('pricelist').children().find('price');

				
			html.push(
				'<div class="elm opt ' + $(elm).attr('keyword') + '">' + '\n' + 
				(($(elm).find('badge').text() != '') ? '<p class="sh-badge"><img class="png" src="/data/shared/img/badge_' + $(elm).find('badge').text() + '.png" alt="" width="60" height="64" /></p>' : '') + '\n' + 
				'<a class="block" href="' + $(elm).find('url').eq(0).text() + '"></a>' + '\n' + 
				'<h3><em>' + $(elm).find('title').text() + '</em></h3>' + '\n' + 
				'<p class="sh-img"><img src="' + $(elm).find('img_icon').attr('src') + '" alt="" width="60" height="50" /></em></p>' + '\n' + 
				'<p class="sh-txt">' + txt + '</p>' + 
				'<p class="sh-price">'
			);
			
			if (cnd == 'N') {
				html.push(
					'<span class="left">月額<em>' + $(price).eq(0).text() + '</em>円</span>' + '\n' + 
					'<span class="right">初期<em>' + $(price).eq(1).text() + '</em>円</span>' + '\n'
				);
			} else if (cnd == 'P') {
				html.push(
					'<span class="left">月額<em>' + $(price).eq(0).text() + '</em>円 〜</span>' + '\n' + 
					'<span class="right">初期<em>' + $(price).eq(1).text() + '</em>円 〜</span>' + '\n'
				);
			} else {
				html.push(
					'<span class="left">月額<em>' + $(price).eq(0).text() + '</em></span>' + '\n' + 
					'<span class="right">初期<em>' + $(price).eq(1).text() + '</em></span>' + '\n'
				);			
			}
				
			html.push(
				'</p>' + '\n' + 
				'</div>' + '\n'
			);
		
		},
		
		
		
		display: function (action,kw,html_pn) {
		
			$('div.showcasebox').each(function () {
				
				var elm_length = $(this).children().children('div.elm').size()
				var id         = $(this).attr('id').replace('sh-','');
				
				if (action == 'sort') {
					
					elm_length =  $(this).children().children('div.elm.' + kw).size()
					
					if (kw != 'kw0') {
					
						$(this).children().children('div.elm').css({'display':'none'});
						$(this).children().children('div.elm.' + kw).css({'display':'block'});
						
						$('p.outer-title').css({'display':'none'});
						
					} else {
					
						$(this).children().children('div.elm').css({'display':'block'});
						
						$('p.outer-title').css({'display':'block'});
						
						elm_length = 'all';
					}
				
				}
				

				if (elm_length == 0) {
					$(this).css({'display':'none'});
					$('div#showcase h2#title-' + id).css({'display':'none'});
					html_pn.push('<li><span class="pn"><img src="/data/option/img/index/pagenavi_' + id + '_passive.gif" alt="" width="136" height="24" /></span></li>');

										
				} else {
				
					$(this).css({'display':'block'});
					$('div#showcase h2#' + id).css({'display':'block'});
					html_pn.push('<li id="pn-' + id + '"><a href="#page-' + id + '" class="pn"><img class="hover" src="/data/option/img/index/pagenavi_' + id + '.gif" alt="" width="136" height="24" /></a></li>');
					
				}
			
			});
					
		},
		
		
		
		action_index: function () {
		
			$('div#sort ul li a').click(function () {
			
				/* var */
				
				var li_id      = $(this).parent().attr('id');
				var kw         = li_id.replace('st-','kw');
				var st_on      = $('div#sort ul li.st-on').attr('id');
				var li_current = $('div#sort ul li.st-on');
				var html_pn    = [];
				
				$('div#showcase h2').css({'display':'block'});
				
			
				/* sort */
				
				$(li_current).attr('class','');
				$(this).parent().attr('class','st-on');
				
				
				/* showcasebox */
				
				$('div#loader').height($('div#showcase').height());
				$('div#loader').show();
				$('div#showcase').hide();
				
				option.display('sort',kw,html_pn);
				$('div#pagenavi ul').html(html_pn.join(''));
				common.hover();
				common.scroll();
				
				$('div#loader').animate(
					{ height: $('div#showcase').height() + 0 }, 'slow'
				).fadeOut('normal', function () {
					$('div#showcase').css({'display':'block'});
				});				
				
				
				return false;
			});
		
		},
		
		
		
		/* ================= detail ================= */
		
		
		
		output_detail: function (data) {

			
			$(data).children().children().children().each( function () {
			
				var xml_url = $(this).find('url').text();

				
				if (xml_url.indexOf(root,0) != -1) {
					
					if ($(this).find('badge').text() != '') $('div#mainvisual').prepend('<img width="700" height="180" alt="" src="/data/shared/img/badge_' + $(this).find('badge').text() + '_mv.png" id="mv-badge" class="png">');
					$('h1').prepend('<img src="' + $(this).find('img_icon').attr('src') + '" alt="" width="60" height="50" /><span>' + $(this).parent().parent().attr('title') + 'オプション ></span>');
					$('p#descreption').append($(this).find('txt').text());
					
					
					/* price */
					
					var html_price = [];
					var cnd        = $(this).find('pricelist').attr('type');
					
					html_price.push('<h2><a class="link right small" href="/price/">料金表はこちら</a>料金</h2>')
										
					if ( cnd == 'N' || cnd == 'I') {
					
						html_price.push(
							'<table cellspacing="0" cellpadding="0" border="0" width="670" class="tbl-price">' + '\n' +
							'<thead>' + '\n' +
							'<tr>' + '\n' +
							'<th>月額費用（税込）</th>' + '\n' +
							'<th>初期費用（税込）</th>' + '\n' +
							'</tr>' + '\n' +
							'</thead>' + '\n' +
							'<tbody>' + '\n'							
						);
						
						
						$(this).find('pricelist').children().each( function () {
							if (this.tagName == 'item'){
								html_price.push(
									'<tr>' + '\n' +
									'<td class="price-top"><em>' + $(this).find('price').eq(0).text() + ((cnd == 'N') ? '</em>円</td>' : '</em></td>') + '\n' +
									'<td><em>' + $(this).find('price').eq(1).text() + ((cnd == 'N') ? '</em>円</td>' :'</em></td>') + '\n' +
									'</tr>' + '\n'
								);
							} else {
								html_price.push(
									'<tr class="caption">' + '\n' +
									'<td colspan="2">' + '\n'
								);
								
								$(this).children().each( function() {
									if (this.tagName == 'label') {
										html_price.push('<span class="notice">' + $(this).text() + '</span>' + '\n');
									} else {
										html_price.push('<span class="notes">' + $(this).text() + '</span>' + '\n');
									}
								});
								
								html_price.push(
									'</td>' + '\n' +
									'</tr>' + '\n'
								);									
							}
							
						})
						
						html_price.push(
							'</tbody>' + '\n' +
							'</table>' + '\n'
						);
						
						
					} else if ($(this).find('pricelist').attr('type') == 'P') {
					
						html_price.push(
							'<table cellspacing="0" cellpadding="0" border="0" width="670" class="tbl-price small">' + '\n' +
							'<thead>' + '\n' +
							'<tr>' + '\n' +
							'<th width="50%">&nbsp;</th>' + '\n' +
							'<th width="25%">月額費用（税込）</th>' + '\n' +
							'<th width="25%">初期費用（税込）</th>' + '\n' +
							'</tr>' + '\n' +
							'</thead>' + '\n' +
							'<tbody>' + '\n'							
						);
						
						
						$(this).find('pricelist').children().each( function () {
							if (this.tagName == 'item'){
								html_price.push(
									'<tr>' + '\n' +
									'<th>' + $(this).find('label').eq(0).text() + '</td>' + '\n' +
									'<td><em>' + $(this).find('price').eq(0).text() + '</em>円</td>' + '\n' +
									'<td><em>' + $(this).find('price').eq(1).text() + '</em>円</td>' + '\n' +
									'</tr>' + '\n'
								);
							} else {
								html_price.push(
									'<tr class="caption">' + '\n' +
									'<td colspan="3">' + '\n'
								);
								
								$(this).children().each( function() {
									if (this.tagName == 'label') {
										html_price.push('<span class="notice">' + $(this).text() + '</span>' + '\n');
									} else {
										html_price.push('<span class="notes">' + $(this).text() + '</span>' + '\n');
									}
								});
								
								html_price.push(
									'</td>' + '\n' +
									'</tr>' + '\n'
								);									
							}
							
							
						});
						
						html_price.push(
							'</tbody>' + '\n' +
							'</table>' + '\n'
						);
					
					}
					
					
					$('div#price').append(html_price.join(''));
					
				}
						
			});
			
		},
		
		
		
		/* ================= links ================= */
	
		
		
		output_links: function (data) {

			$(data).children().each( function () {
			
				var cate = $(this).get(0).tagName;
				var html = [];
				
				$(this).children().each( function () {			
						
					html.push(
						'<h4>' + $(this).attr('title') + '</h4>' + '\n' +
						'<ul>' + '\n'						
					);
				
					$(this).children().each( function () {						
										
						html.push('<li><a href="' + $(this).find('url').eq(0).text() + '">' + $(this).find('title').text() + '</a></li>' + '\n');

					});
					
					html.push('</ul>');

				});
				
				$('div#optionlist div#ol-' + cate + ' div.in').html(html.join(''));
				
			});
			
			
			option.action_links();
		},
		
		
		
		action_links: function() {
			
			switch (body_id){
				case 'standard'   : $('div#ol-standard').attr('class','options ol-current'); break;
				case 'security'   : $('div#ol-security').attr('class','options ol-current'); break;
				case 'managed'    : $('div#ol-managed').attr('class','options ol-current'); break;
				case 'server_site': $('div#ol-server_site').attr('class','options ol-current'); break;
				case 'support'    : $('div#ol-support').attr('class','options ol-current'); break;
				default                  : $('div#ol-standard').attr('class','options ol-current');
			}
			
			$('div#optionlist div.options div.in').each(function(){
				if($(this).parent().attr('class') != 'options ol-current') {
					$(this).css({'display' : 'none'});
				}
			});
			
			$('div#optionlist div.options h3 a').click(function(){
				if ($(this).parent().parent().attr('class') != 'options ol-current'){
					var elm = $(this);
					$('div.ol-current div.in').slideUp(400, function () {
						$('div.ol-current').attr('class','options');
						
						$(elm).parent().parent().attr('class','options ol-current');
						$(elm).parent().next('div.in').slideDown();
					});
					
		
				}
				
				return false;
		
			});
		}
		
		

	}


	$(function () {
		option.init();
	});
	
})($);