var SKB_Debug =false;

// skb.js
// Web Service API for SENDAI KUTIKOMI BLOG
// author yama@dareka-sendai.com
//

/////////////////////////////////////////////////////////////////////////////////////////////////
/*ここから下の'//////////....'まではカスタマイズ可能な変数やら関数です。
  下に行くほど他の変数の動きを理解しないとうまく動作しない（主にスタイル面で)なので、
*/


var DefSKB_Type = 'r';
var DefSKB_Category = '';
var DefSKB_Title = '仙台の新着口コミブログ';
var DefSKB_CanvasBorderColor =         '#CCCCCC';
var DefSKB_CanvasBackgroundColor =     '#FEFEF5';
var DefSKB_TitleBoxBackgroundColor =   '#FF782F';
var DefSKB_TitleBoxColor =             '#FFFFFF';
var DefSKB_ArticleBoxBorderColor =     '#AAAAAA';
var DefSKB_ArticleFontColor =          '#5C70AA';
var DefSKB_ArticleBoxBackGroundColor = '#FFFFFF';
var DefSKB_CanvasBackgroundImage =     'http://www.dareka-sendai.com/ws/kutikomi/pics/skb_bgimg.gif';
var DefSKB_NextBtn = 'http://www.dareka-sendai.com/ws/kutikomi/pics/skbnextba.png';
var DefSKB_PrevBtn = 'http://www.dareka-sendai.com/ws/kutikomi/pics/skbprevba.png';
var DefSKB_NextBtnI = 'http://www.dareka-sendai.com/ws/kutikomi/pics/skbnextb.png';
var DefSKB_PrevBtnI = 'http://www.dareka-sendai.com/ws/kutikomi/pics/skbprevb.png';
var DefSKB_FontSize = 9;
var DefSKB_ArticleBoxWidth = 180;
var DefSKB_ArticleBoxHeight = 90;
var DefSKB_ArticleImageWidth = 60;
var DefSKB_TitleBoxHeight = 12;
var DefSKB_TitleBoxFontSize = 8;
var DefSKB_DisplayRows = 1;
var DefSKB_DisplayCols = 2;
var DefSKB_CanvasBorder = 1;
var DefSKB_CanvasPadding = 0;
var DefSKB_CtrBtnwidth = 25;
var DefSKB_CtrBoxHeight = 12;
var DefSKB_MaxTitleLength = 13;
var DefSKB_MaxExcerptLength = 48;
var DefSKB_AdvHtml = '<a href="http://www.dareka-sendai.com/ " style="text-decoration:none;color:#FF782F">ダレカ仙台</a>';

var SKB_Type;
var SKB_Category;
var SKB_Title;
var SKB_CanvasBorderColor;
var SKB_CanvasBackgroundColor;
var SKB_TitleBoxBackgroundColor;
var SKB_TitleBoxColor;
var SKB_ArticleBoxBorderColor;
var SKB_ArticleFontColor;
var SKB_ArticleBoxBackGroundColor;
var SKB_CanvasBackgroundImage;
var SKB_NextBtn;
var SKB_PrevBtn;
var SKB_NextBtnI;
var SKB_PrevBtnI;
var SKB_FontSize;
var SKB_ArticleBoxWidth;
var SKB_ArticleBoxHeight;
var SKB_ArticleImageWidth;
var SKB_TitleBoxHeight;
var SKB_TitleBoxFontSize;
var SKB_DisplayRows;
var SKB_DisplayCols;
var SKB_CanvasBorder;
var SKB_CanvasPadding;
var SKB_CtrBtnwidth;
var SKB_CtrBoxHeight;
var SKB_MaxTitleLength;
var SKB_MaxExcerptLength;
var SKB_AdvHtml;

/* 画面に初期スタイルを適用していく関数 */

function doInitStyle(){
	if(!SKB_Canvas){return;}
	var SKB_CanvasStyle = SKB_Canvas.style;
	with(SKB_CanvasStyle){
		border = 'solid '+SKB_CanvasBorder+'px '+SKB_CanvasBorderColor;
		padding = SKB_CanvasPadding+'px';
		margin = '0px' ;
		width = SKB_CanvasWidth+'px';
		height = SKB_CanvasHeight+'px';
		backgroundColor = SKB_CanvasBackgroundColor ;
		fontSize = SKB_FontSize+'pt';
		backgroundImage = 'url('+SKB_CanvasBackgroundImage+')';
		overflow = 'hidden';
	}
	var SKB_TitleBoxStyle = SKB_Canvas.getElementsByTagName('h5')[0].style;
	with(SKB_TitleBoxStyle){
		height = SKB_TitleBoxHeight+'px';
		margin = 0;
		padding = 0;
		width = SKB_CanvasWidth + 'px';
		fontWeight = 'normal';
		backgroundColor = SKB_TitleBoxBackgroundColor;
		color = SKB_TitleBoxColor;
		fontSize = SKB_TitleBoxFontSize+'pt';
		overflow = 'hidden';
		textAlign = 'center';
	}
	var SKB_ListBox = document.getElementById('skblist');
	var SKB_ListBoxStyle = SKB_ListBox.style;
	with(SKB_ListBoxStyle){
		height = SKB_ArticleBoxHeight*SKB_DisplayRows+'px';
		width = SKB_ArticleBoxWidth*SKB_DisplayCols+1+'px';
		margin = 0;
		border = 0;
		padding = 0;
		overflow = 'hidden';
	}
		
	var SKB_CtrBoxStyle = document.getElementById('skbctr').style;
	with(SKB_CtrBoxStyle){
		width = SKB_ArticleBoxWidth * SKB_DisplayCols-10+'px';
		height = SKB_CtrBoxHeight+'px';
		clear = 'left';
		styleClear = 'left';
		textAlign = 'center';
		overflow = 'hidden';
		paddingLeft = 10+'px';
	}
	with(document){	
		getElementById('skbpage').style.width = SKB_CtrBtnwidth+'px';
		getElementById('skbpage').style.styleFloat = 'left';
		getElementById('skbpage').style.cssFloat = 'left';
	}
}

/* 記事取得後、画面のスタイルを更新する関数 */
function doStyle(){
	if(!SKB_Canvas){return;}
	var SKB_ListBox = document.getElementById('skblist');
	var SKB_ArticleBox = SKB_ListBox.getElementsByTagName('li');
	for(var i = 0;i < SKB_ArticleBox.length;i++){
		var SKB_ArticleBoxStyle = SKB_ArticleBox[i].style;
		with(SKB_ArticleBoxStyle){
			color = SKB_ArticleFontColor;
			listStyleType = 'none';
			margin = 3+'px';
			border = 'solid 1px '+SKB_ArticleBoxBorderColor;
			padding = 2+'px';
			width = (SKB_ArticleBoxWidth) - 13+'px';
			height = (SKB_ArticleBoxHeight) - 13+'px';
			styleFloat = 'left';
			cssFloat = 'left';
			backgroundColor = SKB_ArticleBoxBackGroundColor
			overflow = 'hidden';
			var SKB_ArticleHStyle = SKB_ArticleBox[i].getElementsByTagName('h6')[0].style;
			with(SKB_ArticleHStyle){
				cursor = 'pointer';
				margin = '2px';
				padding = 0;
				whiteSpace = 'nowrap';
				fontSize = SKB_FontSize+'pt';
				textAlign = 'center';
			}

			var SKB_ArticlePStyle = SKB_ArticleBox[i].getElementsByTagName('p')[0].style;
			with(SKB_ArticlePStyle){
				margin = 0;
				padding = 0;
				textAlign = 'left';
				fontSize = SKB_FontSize+'pt';
				lineHeight = '100%';
			}
			var SKB_ArticleBoxImgStyle = SKB_ArticleBox[i].getElementsByTagName('img')[0].style;
			with(SKB_ArticleBoxImgStyle){
				cursor = 'pointer';
				styleFloat = 'left';
				styleFloat = 'left';
				cssFloat = 'left';
				marginRight = '7px';
				border = '0px'
			}
		}
	}

	var SKB_CtrBoxStyle = document.getElementById('skbctr').style;
	with(SKB_CtrBoxStyle){
		width = SKB_ArticleBoxWidth * SKB_DisplayCols-10+'px';
		height = SKB_CtrBoxHeight+'px';
		clear = 'left';
		styleClear = 'left';
		textAlign = 'center';
		overflow = 'hidden';
		paddingLeft = 10+'px';
	}

	with(document){
		getElementById('skbprev').firstChild.style.width = '100%';

		if(getElementById('skbprev').firstChild.onclick){
			SKB_ActiveBStyle(getElementById('skbprev'));
			getElementById('skbprev').firstChild.onmouseover = function(){
			//getElementById('skbprev').style.backgroundColor = '#FFCFA8';
			}
			getElementById('skbprev').onmouseout = function(){
			//getElementById('skbprev').style.backgroundColor = '#FFFFFF';
			}
		}else{
			SKB_InactiveBStyle(getElementById('skbprev'));
		}

		getElementById('skbnext').firstChild.style.width = '100%';
		if(getElementById('skbnext').firstChild.onclick){
			SKB_ActiveBStyle(getElementById('skbnext'));
			getElementById('skbnext').firstChild.onmouseover = function(){
				//getElementById('skbnext').style.backgroundColor = '#FFCFA8';
			}
			getElementById('skbnext').onmouseout = function(){
			//getElementById('skbnext').style.backgroundColor = '#FFFFFF';
			}

		}else{
			SKB_InactiveBStyle(getElementById('skbnext'));
		}
	}
}

function SKB_ActiveBStyle(elm){
	SKB_CommonBStyle(elm);
	elm.style.cursor = 'pointer';
}

function SKB_InactiveBStyle(elm){
	SKB_CommonBStyle(elm);
}

function SKB_CommonBStyle(elm){
	elm.style.width = SKB_CtrBtnwidth+'px';
	elm.style.styleFloat = 'left';
	elm.style.cssFloat = 'left';
}

function SKB_OnLoad(){
	document.getElementById('skblist').innerHTML = '<li> loginding ... </li>';
}

var SKB_HTMLOuterFormat =
	'<h5 id="skbtitle"></h5>'+
	'<ul id="skblist"><li><h6></h6><img/><p></p></li></ul>'+
	'<div id="skbctr"><div id="skbprev"></div><div id="skbpage"></div>'+
	'<div id="skbnext"></div><div id="skbadv" style="text-align:right;font-size:7pt"></div></div>';

/* 
	取得情報をブラウザに反映させる関数。
	スタイルの適用はここではなくdoStyle()関数が行う。
*/
function show(){
	if(!SKB_Canvas){return}
	for(var i = 0 ; i < SKB_Articles.length && i < SKB_DisplayRows*SKB_DisplayCols;i++){
		if(SKB_Articles[i].title.length > SKB_MaxTitleLength){
		 	SKB_Articles[i].title = SKB_Articles[i].title.substring(0,SKB_MaxTitleLength)+"...";
		}
		var ihtml = 
			'<li><h6 onClick = "window.open(\''+SKB_Articles[i].url+'\');return false;">'
			+SKB_Articles[i].title+"</h6>"+'<img  onClick = "window.open(\''+SKB_Articles[i].url+'\');return false;" src='+SKB_PicDir
			+SKB_Articles[i].id+".gif"+" height="+SKB_ArticleImageWidth+" width="+SKB_ArticleImageWidth+' /><p>'
			+SKB_Articles[i].excerpt.substring(0,SKB_MaxExcerptLength-4)+
			"...</p></li>";
		if(i !=0){
			document.getElementById('skblist').innerHTML += ihtml
		}else{
			document.getElementById('skblist').innerHTML = ihtml;
		}
	}
	if(SKB_PageManager.hasNext()){
		document.getElementById('skbnext').innerHTML = '<div onClick="SKB_GoNext()"><img src="'+SKB_NextBtn+'"/></div>';
	}else{
		document.getElementById('skbnext').innerHTML = '<div><img src="'+SKB_NextBtnI+'"/></div>';
	}
	if(SKB_PageManager.hasPrev()){
		document.getElementById('skbprev').innerHTML = '<div onClick="SKB_GoPrev()"><img src="'+SKB_PrevBtn+'"/></div>';
	}else{
		document.getElementById('skbprev').innerHTML = '<div><img src="'+SKB_PrevBtnI+'"/></div>';
	}
	document.getElementById('skbpage').innerHTML = '<div>'+SKB_PageManager.getCurrentPage()+'P</div>';
	if(SKB_Debug){SKB_DoDebug();}
}

/////////////////////////////////////////////////////////////////////////////////////////////////
var SKB_Articles;
var SKB_ArticleFetchNum;
var SKB_PageManager = null;
var SKB_Url = 'http://www.dareka-sendai.com/ws/kutikomi/json.html';
var SKB_PicDir = 'http://www.dareka-sendai.com/pics/kutikomi/tbsum/';

var SKB_Canvas = null;
var SKB_RequestParamterName = ['page','fetchrow','category','type','count'];
var SKB_RequestParamter;
var SKB_ArticlesNum;
var	SKB_CanvasWidth;
var	SKB_CanvasHeight;

/*
	スクリプトが読み込まれて最初に呼び出される関数。(Cで言えばmain)
*/
init();
done();

function init(){


/* デフォルトのパラメーターを使うかユーザー定義パラメーターを使うか決める */
	SKB_Type = typeof(UdSKB_Type) == 'string' ? UdSKB_Type : DefSKB_Type;
	SKB_Category = typeof(UdSKB_Category) == 'string' ? UdSKB_Category : DefSKB_Category;
	SKB_Title = typeof(UdSKB_Title) == 'string' ? UdSKB_Title : DefSKB_Title;
	SKB_CanvasBorderColor = typeof(UdSKB_CanvasBorderColor) == 'string' ? UdSKB_CanvasBorderColor : DefSKB_CanvasBorderColor;
	SKB_CanvasBackgroundColor = typeof(UdSKB_CanvasBackgroundColor) == 'string' ? UdSKB_CanvasBackgroundColor : DefSKB_CanvasBackgroundColor;
	SKB_TitleBoxBackgroundColor = typeof(UdSKB_TitleBoxBackgroundColor) == 'string' ? UdSKB_TitleBoxBackgroundColor : DefSKB_TitleBoxBackgroundColor;
	SKB_TitleBoxColor = typeof(UdSKB_TitleBoxColor) == 'string' ? UdSKB_TitleBoxColor : DefSKB_TitleBoxColor;
	SKB_ArticleBoxBorderColor = typeof(UdSKB_ArticleBoxBorderColor) == 'string' ? UdSKB_ArticleBoxBorderColor : DefSKB_ArticleBoxBorderColor;
	SKB_ArticleFontColor = typeof(UdSKB_ArticleFontColor) == 'string' ? UdSKB_ArticleFontColor : DefSKB_ArticleFontColor;
	SKB_ArticleBoxBackGroundColor = typeof(UdSKB_ArticleBoxBackGroundColor) == 'string' ? UdSKB_ArticleBoxBackGroundColor : DefSKB_ArticleBoxBackGroundColor;
	SKB_CanvasBackgroundImage = typeof(UdSKB_CanvasBackgroundImage) == 'string' ? UdSKB_CanvasBackgroundImage : DefSKB_CanvasBackgroundImage;
	SKB_NextBtn = typeof(UdSKB_NextBtn) == 'string' ? UdSKB_NextBtn : DefSKB_NextBtn;
	SKB_PrevBtn = typeof(UdSKB_PrevBtn) == 'string' ? UdSKB_PrevBtn : DefSKB_PrevBtn;
	SKB_NextBtnI = typeof(UdSKB_NextBtnI) == 'string' ? UdSKB_NextBtnI : DefSKB_NextBtnI;
	SKB_PrevBtnI = typeof(UdSKB_PrevBtnI) == 'string' ? UdSKB_PrevBtnI : DefSKB_PrevBtnI;
	SKB_FontSize = typeof(UdSKB_FontSize) == 'number' ? UdSKB_FontSize : DefSKB_FontSize;
	SKB_ArticleBoxWidth = typeof(UdSKB_ArticleBoxWidth) == 'number' ? UdSKB_ArticleBoxWidth : DefSKB_ArticleBoxWidth;
	SKB_ArticleBoxHeight = typeof(UdSKB_ArticleBoxHeight) == 'number' ? UdSKB_ArticleBoxHeight : DefSKB_ArticleBoxHeight;
	SKB_ArticleImageWidth = typeof(UdSKB_ArticleImageWidth) == 'number' ? UdSKB_ArticleImageWidth : DefSKB_ArticleImageWidth;
	SKB_TitleBoxHeight = typeof(UdSKB_TitleBoxHeight) == 'number' ? UdSKB_TitleBoxHeight : DefSKB_TitleBoxHeight;
	SKB_TitleBoxFontSize = typeof(UdSKB_TitleBoxFontSize) == 'number' ? UdSKB_TitleBoxFontSize : DefSKB_TitleBoxFontSize;
	SKB_DisplayRows = typeof(UdSKB_DisplayRows) == 'number' ? UdSKB_DisplayRows : DefSKB_DisplayRows;
	SKB_DisplayCols = typeof(UdSKB_DisplayCols) == 'number' ? UdSKB_DisplayCols : DefSKB_DisplayCols;
	SKB_CanvasBorder = typeof(UdSKB_CanvasBorder) == 'number' ? UdSKB_CanvasBorder : DefSKB_CanvasBorder;
	SKB_CanvasPadding = typeof(UdSKB_CanvasPadding) == 'number' ? UdSKB_CanvasPadding : DefSKB_CanvasPadding;
	SKB_CtrBtnwidth = typeof(UdSKB_CtrBtnwidth) == 'number' ? UdSKB_CtrBtnwidth : DefSKB_CtrBtnwidth;
	SKB_CtrBoxHeight = typeof(UdSKB_CtrBoxHeight) == 'number' ? UdSKB_CtrBoxHeight : DefSKB_CtrBoxHeight;
	SKB_MaxTitleLength = typeof(UdSKB_MaxTitleLength) == 'number' ? UdSKB_MaxTitleLength : DefSKB_MaxTitleLength;
	SKB_MaxExcerptLength = typeof(UdSKB_MaxExcerptLength) == 'number' ? UdSKB_MaxExcerptLength : DefSKB_MaxExcerptLength;
	SKB_AdvHtml = typeof(UdSKB_AdvHtml) == 'string' ? UdSKB_AdvHtml : DefSKB_AdvHtml;

	/* 一回に取得する件数 = 行数 x 列数 */
	SKB_ArticleFetchNum = SKB_DisplayRows * SKB_DisplayCols;

	//ページ上のWebサービスの設置場所を取得
	SKB_Canvas = document.getElementById("kwsj");
	if(!SKB_Canvas){
		alert('no SKB_Canvas');
	}
	SKB_CanvasWidth = SKB_DisplayCols * SKB_ArticleBoxWidth +(SKB_CanvasBorder+SKB_CanvasPadding)*2
	SKB_CanvasHeight = SKB_DisplayRows * SKB_ArticleBoxHeight +(SKB_CanvasBorder+SKB_CanvasPadding)*2+SKB_TitleBoxHeight+SKB_CtrBoxHeight;
	SKB_Canvas.innerHTML = SKB_HTMLOuterFormat;
	document.getElementById('skbadv').innerHTML = SKB_AdvHtml;
	with(document){
		getElementById("skbtitle").appendChild(createTextNode(SKB_Title));
	}

	SKB_RequestParameter = new RequestParameter(SKB_RequestParamterName);
	if(SKB_Category){
		SKB_RequestParameter.set('category',SKB_Category);
	}
	if(SKB_Type){
		SKB_RequestParameter.set('type',SKB_Type);
	}
	SKB_RequestParameter.set('fetchrow',SKB_ArticleFetchNum);
	SKB_RequestParameter.set('count','y');
	
	SKB_PageManager = new listPageManager();
	doInitStyle();
	doSKB();
}

function done(){
	if(SKB_Debug){
		SKB_DoDebug();
	}
}

function SKB_GoNext(){
	if(SKB_PageManager.hasNext()){
		SKB_PageManager.currentPage++;
	}
	doSKB();
}

function SKB_GoPrev(){
	if(SKB_PageManager.hasPrev()){
		SKB_PageManager.currentPage--;
	}
	doSKB();
}

function doSKB(){
	SKB_OnLoad();
	//URLパラメーターの作成
	SKB_RequestParameter.set('page',SKB_PageManager.getCurrentPage());
	var url = SKB_Url+SKB_RequestParameter.toString();
	//サーバーからコールバック関数（変数）を取得し、scriptノードのsrcアトリビュートに追加
	SKB_ScriptElm = document.createElement('script');
	SKB_ScriptElm.setAttribute("type", "text/javascript");
	SKB_ScriptElm.setAttribute("charset", "utf-8");
	SKB_ScriptElm.setAttribute("src",url);
	SKB_Canvas.appendChild(SKB_ScriptElm);
	//ここから先はSKB_Callback()関数もしくはSKB_CallbackC()関数が処理する
}

/*
	現在のページ情報を保持するオブジェクト
	currentPage　　現在のページ番号
	totalItemNum   アイテム総数
	totalPageNum   ページの総数
	rowsPerPage    1ページあたりのアイテムの件数
	
	getCurrentPage()　現在のページ番号を取得する
	getTotalPageNum() ページ総数を取得する
	hasNext()         次ページがあればtrueを返す。
	hasPrev()         前ページがあればtrueを返す。
	setTotalItemNum() アイテムの総数を取得する

*/
function listPageManager(currentPage,rowsPerPage,totalItemNum){
	if(currentPage){
		this.currentPage = currentPage;
	}else{
		this.currentPage = 1;
	}
	if(!rowsPerPage){
		this.rowsPerPage = SKB_ArticleFetchNum;
	}else{
		this.rowsPerPage = rowsPerPage;
	}
	this.totalItemNum     = totalItemNum;
	
	this.getCurrentPage = function(){
		return this.currentPage;
	};
		
	this.getTotalPageNum = function(){
		if(!this.totalPageNum){
			this.setTotalPageNum();
		}
		return this.totalPageNum;
	};

	this.setTotalItemNum = function(totalItemNum){
		this.totalItemNum = totalItemNum;
		this.setTotalPageNum();
	};
	
	this.setTotalPageNum = function(){
		this.totalPageNum = Math.ceil(this.totalItemNum/this.rowsPerPage);
	};
	
	this.next = function(){
		if(this.currentPage < this.totalPageNum){
			this.currentPage++;
			return true;
		}else{
			return false;
		}
	};
	
	this.hasNext = function(){
		if(this.currentPage < this.totalPageNum){
			return true;
		}else{
			return false;
		}
	};

	this.hasPrev = function(){
		if(this.currentPage > 1){
			return true;
		}else{
			return false;
		}
	};
}

function RequestParameter(parameterName){
	this.parameters = new Array();
	for(var i in parameterName){
		this.parameters[i] = [parameterName[i],null];
	}
	
	this.set = function(name,value){
		for(var i in this.parameters){
			if(this.parameters[i][0] == name){
				this.parameters[i][1] = value;
			}
		}
	}
	
	this.get = function(name){
		for(var i in this.parameters){
			if(this.parameters[i][0] == name){
				return this.parameters[i][1];
			}
		}
	}
	
	this.toString = function(){
		var pString = '';
		for(var i in this.parameters){
		 if(this.parameters[i][1]){
		 	pString += pString ? '&' : '?' ;
			pString += this.parameters[i][0]+'='+this.parameters[i][1];
		 }
		}
		return pString;
	}
}

function SKB_DoDebug(){
	alert('SKB_Canvas.innerHTML:'+SKB_Canvas.innerHTML);
	alert('SKB_PageManager.totalItemNum'+SKB_PageManager.totalItemNum);
	alert('SKB_PageManager.getTotalPageNum()'+SKB_PageManager.getTotalPageNum());
 	alert('SKB_PageManager.currentPage'+SKB_PageManager.currentPage);
	alert('SKB_PageManager.next()'+SKB_PageManager.next());
	alert('SKB_RequestParameter.get(\'page\')'+SKB_RequestParameter.get('page'));
  alert('SKB_RequestParameter.get(\'category\')'+SKB_RequestParameter.get('category'));
	alert('SKB_RequestParameter.toString()'+SKB_RequestParameter.toString());
}

/* サーバーから記事リストを取得して表示するコールバック関数 */
function SKB_Callback(array){
	SKB_Articles = array
	show();
	doStyle();
}

/* サーバーから取得した該当記事数を、リクエストパラメーターオブジェクトにセットして
　記事一覧を表示するコールバック関数
*/
function SKB_CallbackC(json){
	SKB_PageManager.setTotalItemNum(json.count);
	SKB_RequestParameter.set('count','');
	doSKB();
}