window.addEvent('domready',initSearch)

var resultsEl
var loadingEl
var prefecturesList = new Array()
var prefSelector
var citySelector
var jsonRequest

function initSearch(){
	//init selector
	prefSelector = $('content').getElement('select.pref')
	citySelector = $('content').getElement('select.city')
	
	//fill prefecture list
	var len = prefecturesList.length
	var prefecture
	var optionEl
	for(var i = 0; i < len; i++){
		prefecture = prefecturesList[i]
		
		//strip prefecture if no city referenced
		if(prefecture.cities.length == 0){
			continue
		}
		
		//insert prefecture
		prefSelector.options[prefSelector.options.length] = new Option(prefecture.name, prefecture.code)
	}
	
	//setup actions
	prefSelector.addEvent('change',function(){
		selectPrefecture(prefSelector.value)
	})
	
	var submitButton = $('content').getElement('.search a.submit')
	submitButton.addEvent('click',doRequest)
	
	//set default state
	selectPrefecture(prefecturesList[0].code)	
}

function selectPrefecture(code){
	//console.log('selectPrefecture', code)
	
	//get city list
	var len 
	len = prefecturesList.length
	var prefecture
	for(var i = 0; i < len; i++){
		prefecture = prefecturesList[i]
		
		if(prefecture.code == code){
			break
		}
	}
	
	var cities = prefecturesList[i].cities
	//console.log(cities)

	//empty city selector
	citySelector.empty()

	//fill city selector
	len = cities.length
	var city
	var optionEl
	for(var j = 0; j < len; j++){
		city = cities[j]
		citySelector.options[citySelector.options.length] = new Option(city.name, city.code)
	}
}

function doRequest(){
	//stop previous request
	if(jsonRequest != null){
		jsonRequest.cancel()
	}
	
	//show loading
	if(loadingEl != null){
		loadingEl.dispose()
	}
	
	loadingEl = new Element('img',{'src': '../../../img/_ja/_jp/shopinfo/index/ajax-loader.gif', 'class': 'loading'})
	loadingEl.inject(citySelector,'after')
	
	//generate response URL	
	var prefCode = prefSelector.value;
	var areaCode = citySelector.value;				
	
	if(location.pathname.indexOf('test') == -1){
		var url = "response.aspx?prefcode=" + prefCode + "&areacode=" + areaCode;
	}else{
		var url = "response-test.html";
	}
	
	//load request
	jsonRequest = new Request.JSON({
		url: url,
		onComplete: showResults
	})
	
	jsonRequest.send();
}


function showResults(json){
	//console.log('showResults',json)
	
	//delete loading
	loadingEl.dispose()
	
	if(json == null){
		console.log('\terror')
		return
	}

	var shouldRemovePreviousResults

	if(resultsEl == undefined){
		
		//create container
		resultsEl = new Element('div',{
			'class': 'results'
		})
		resultsEl.setStyles({
			'height': 0,
			'opacity': getTransparentOpacityValue(),
			'overflow': 'hidden'
		})

		//add close button
		var closeBtn = createCloseButton()
		closeBtn.addEvent('click',closeResults)
		closeBtn.inject(resultsEl,'bottom')
		
	}else{
		
		//get old results and mark for removal
		var oldDl = resultsEl.getElement('dl')
		if(oldDl){
			console.log(oldDl)
			shouldRemovePreviousResults = true
		}
		
	}
	
	//definition list
	var newDl = new Element('dl')
	newDl.setStyles({'visibility': 'hidden'})
	
	var dt = new Element('dt')
	var dd = new Element('dd')
	dt.set('html', '<span class="pref">' + json.pref + '</span>&nbsp;<span class="city">' + json.city + '</span>')
	dt.inject(newDl)
	
	//don't count last dummy item ('end': 0)
	var len = json.shops.length - 1
	
	var ul1 = new Element('ul',{'class': 'first'})
	var ul2 = new Element('ul',{'class': 'second'})
	
	var li
	var shopItem
	
	//for(var rnd = 0; rnd < 1 + Math.round(3*Math.random()); rnd++){ //DEBUG
	//write results
	for(var i = 0; i < len; i++){
	
		var shopItem = json.shops[i]
		//console.log(i,len,shopItem)
	
		li = new Element('li')
		li.set('html', '<h4><strong>' + shopItem.name + '</strong></h4>' + shopItem.address + '<br/>' + shopItem.phone + '<br/>' + shopItem.station)
		
		//alternate add to ul.first and ul.second
		if(i % 2 == 0){
			li.inject(ul1)
		}else{
			li.inject(ul2)
		}

	}
	//} //DEBUG

	//assemble tags
	ul1.inject(dd)
	ul2.inject(dd)
	dd.inject(newDl)
	
	newDl.setStyles({
		'opacity': getTransparentOpacityValue()
	})
	newDl.inject(resultsEl)
	resultsEl.inject($('content').getElement('.search'),'bottom')

	//get new dl's height
	var newHeight = newDl.getStyle('height')
	
	//launch transitions
	resultsEl.set('morph',{
		'onComplete': null
	})
	resultsEl.morph({
		'height': newHeight,
		'opacity': 1
	})
	
	if(shouldRemovePreviousResults){
		
		if(!isIE6()){
			
			//fade out previous results
			oldDl.set('morph',{
				'onComplete': function(){
					oldDl.destroy()
					oldDl = null
					delete oldDl
				},
				'duration': 500
			})
			oldDl.setStyles({
				'position': 'absolute'
			})
			oldDl.morph({
				'opacity': getTransparentOpacityValue()
			})
			
			//fade in new results after delay
			newDl.set('morph',{
				'duration': 500
			})
			newDl.morph.pass({
				'opacity': 1
			},newDl).delay(550)
			
		}else{
			
			//no fade out/fade in for IE6
			oldDl.destroy()
			newDl.setStyles({
				'opacity': 1
			})
			
		}
		
	}else{
		
		//fade in new results
		newDl.morph({
			'opacity': 1
		})
		
	}
	
}

function closeResults(){
	resultsEl.set('morph',{
		'onComplete': function(){
			console.log('onComplete')
			//clear results
			resultsEl.getElement('dl').destroy()
		}
	})
	closeElement(resultsEl)
}