/**********************************************************************
* Copyright (C) 2007 Kyoto University
*
* This library is free software; you can redistribute it and/or
* modify it under the terms of the GNU Lesser General Public
* License as published by the Free Software Foundation; either
* version 2.1 of the License, or (at your option) any later version.
* 
* This library is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
* Lesser General Public License for more details.
* 
* You should have received a copy of the GNU Lesser General Public
* License along with this library; if not, write to the Free Software
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-
* 1301  USA
***********************************************************************/
/*
 * This file is the JavaScript file for the main Pictogram page.
 */
//* $Id: pictogram-main.js 2566 2009-04-13 04:39:35Z morimoto $
//* $Date:: 2009-04-13 13:39:35 +0900#$

var pictogramSelection = null;
var serviceInformation = null;

Event.observe( window, 'load', function(){
	//* ライセンス情報取得コンポーネント
	serviceInformation = new ServiceInformation('service-information-form-area');
	//* 絵文字選択部分ここから
	pictogramSelection = new PictogramSelection('pictograms');
	PictogramSelection.Event.load(pictogramSelection);
	pictogramSelection.getElement().down('table').observe('click',function(event){
		PictogramSelection.Event.clickButton(event,pictogramSelection);
	});
	pictogramSelection.getElement().down('table').observe('mouseover',function(event){
		PictogramSelection.Event.mouseoverButton(event,pictogramSelection);
	});
	pictogramSelection.getElement().down('table').observe('mouseout',function(event){
		PictogramSelection.Event.mouseoutButton(event,pictogramSelection);
	});
	//* 絵文字選択部分ここまで
	
	var onSuccessLoadService = function( httpObj ) {
		var resultObj = eval( '(' + httpObj.responseText + ')' );
		var checker = new StatusProcessor(resultObj);
		if(!checker.check()) return;
		//*if ( resultObj['ststus'] == 'ERROR' ) return;

		var language = resultObj['contents'];
		var selector = $('language');
		while ( selector.firstChild ) selector.removeChild( selector.firstChild );
		for ( var lang in language ) {
			var oOpt = document.createElement( 'option' );
			oOpt.value = lang;
			oOpt.appendChild( document.createTextNode( language[lang] ) );
			selector.appendChild( oOpt );
		}
		selector.selectedIndex = 0;
	};

	var onSubmit = function( ev ) {
		if(pictogramSelection.hasSelectedResources()){
			var formText = Form.Methods.serialize( this );
			var callobj = {};
			var index = 0;
			pictogramSelection.getIdOfSelectedResources().each(function(id){
				callobj['id['+(index++)+']'] = id;
			});
			formText += '&' + $H(callobj).toQueryString();
			var oImage = new Image();
			oImage.src = 'img/anime/dictionary.gif';
			Element.update( 'searching', oImage );
			Element.update( 'result', '' );
	
			new Ajax.Request(
				'./php/ajax/pictogram/search.php',
				{
					method : 'post',
					parameters : formText,
					onSuccess : onSuccessSubmit,
					onFailure: function(){alert('Server Error.');},
					onComplete : onCompleteSubmit
			} );
		} else {
			alert("Please select at least one pictogram set.");
		}
	};

	var onSuccessSubmit = function( httpObj ) {
		var jsonObj = eval('('+httpObj.responseText+')');
		makeResultArea(jsonObj);
		//* 横断検索
		for (var i=0; i< jsonObj.contents.contents.size();i++) {
			serviceInformation.update(jsonObj.contents.contents[i]);
		}
		//*serviceInformation.update(httpObj.responseJSON.contents);
	};

	var onCompleteSubmit = function() {
		Element.update( 'searching', '' );
	};

	var makeResultArea = function( resultObj ) {
		Element.update( 'result', '' );
		var res = $('result');
		
		var checker = new StatusProcessor(resultObj);
		if(!checker.check()) return;

		resultObj = resultObj['contents']['contents'];
		resultObj.each(function(obj){
			var oDL = document.createElement( 'dl' );
			var contents = obj['result']['contents'];

			var checker = new StatusProcessor(obj['result']);

			checker.error = function() {
				var oDT = document.createElement( 'dt' );
				oDT.className = "error-message";
				oDT.appendChild( document.createTextNode( 'ERROR: ' + this.message ) );
				oDL.appendChild( oDT );
				return false;
			};

			checker.warning = checker.ok = function() {
				if ( contents.length == 0 ) {
					var oDT = document.createElement( 'dt' );
					oDT.appendChild( document.createTextNode( 'No Result' ) );
					oDL.appendChild( oDT );
				}
				for ( var i = 0; i < contents.length; i++ ) {
					var imageData = contents[i];

					var oDT = document.createElement( 'dt' );
					oDT.appendChild( document.createTextNode( imageData['word'] ) );
					oDL.appendChild( oDT );

					var oDD = document.createElement( 'dd' );

					var filename = imageData['filename'];

					var oImage;
					if ( imageData['imageType'].toUpperCase() == 'SWF' ) {
						oImage = '<object data="' + filename + '"'
						+ ' type="application/x-shockwave-flash"'
						+ ' width="100"'
						+ ' height="100"'
						+ ' title="' + imageData['word'] + '"'
						+ '>'
						+ '<param name="src" value="' + filename + '" />'
						+ '</object>'
						;
					} else {
						oImage = new Image( 100, 100 );
						oImage.src = filename;
						oImage.setAttribute( 'alt', imageData['word'] );
						oImage.setAttribute( 'title', imageData['word'] );
					}

					Element.update( oDD, oImage );
					oDL.appendChild( oDD );
				}

				var resourceName = document.createElement('dl');
				Element.addClassName( resourceName, 'resource-name' );
				var atag = document.createElement('a');
				atag.appendChild(document.createTextNode(pictogramSelection.getResourceNameFromId(obj.id)));
				var url = pictogramSelection.getUrlFromId(obj.id);
				if (url) {
					atag.setAttribute('href',url);
				}
				resourceName.appendChild(atag);
				oDL.appendChild(resourceName);

				return true;
			};
			checker.check();

			res.appendChild(oDL);
		});
	};

	Toggler.setToggleEvent('search');
	Toggler.setToggleEvent('pictogram-selection');
	Toggler.setToggleEvent('service-information');

	new HelpPanel("search",
		'<span style="font-weight:bold;">How to Search Pictograms</span><br /><br />'+
		'<ul>'+
		'<li style="list-style:decimal inside;">Input a word which describes the pictogram you want to search.</li>'+
		'<li style="list-style:decimal inside;">Select a matching method.</li>'+
		'<li style="list-style:decimal inside;">Select a language.</li>'+
		'<li style="list-style:decimal inside;">Click on the "Search" button.</li>'+
		'</ul>');
	new HelpPanel("pictogram-selection",
		'<span style="font-weight:bold;">How to Select Pictogram sets</span><br /><br />'+
		'Select pictogram sets you wish to use.'+
		'<br><span style="color:red;font-weight:bold;">Red</span> indicates that the pictogram set is SELECTED.'+
		'<br><span style="color:green;font-weight:bold;">Green</span> indicates that the pictogram set is NOT SELECTED.<br/>');

	var formInput = $('input');
	Event.observe( formInput, 'submit', onSubmit.bindAsEventListener( formInput ) );

	//* 本来ならloadServicesで使用できる言語を取得したいが
	//* どうやらPictogramには使用できる言語を取得するような関数がなさそうなので今は決め打ち
/*
	new Ajax.Request(
		'./php/ajax/load-services.php',
		{
			method : 'post',
			parametes : 'serviceCategory=pictogram',
			onSuccess : onSuccessLoadService
		} );
*/
//*	onSuccessLoadService( {
//*		responseText : '{"status":"OK","message":"No Error","contents":{"ja":"Japanese","en":"English"}}'
//*	} );
});