function setSearchForm(){
	$('#searchForm input:checkbox')
	.click(function(){
		if( $(this).attr('checked') ){
			$(this).parent().css( 'backgroundColor', '#eb6d8e' );
		} else{
			$(this).parent().css( 'backgroundColor', 'transparent' );
		}
	});
	
	$('#submit')
	.click(throwQuery);
}


function throwQuery(){
	
	var checkboxList = new Array( 'category', 'age', 'cup', 'height', 'type', 'style' );
	timeLine = new Array( 6 );
	queryString = new Array();
	
	for( var i=0; i<checkboxList.length; i++ ){
		var tmp = $('#searchForm .' + checkboxList[i] + ' input:checked');
		for( j=0; j<tmp.length; j++ ){
			queryString.push( checkboxList[i] + '[]=' + tmp[j].value );
		}
	}
	queryString.push( 'city=' + $('#searchForm .city [name=city]').val() );
	queryString.push( 'cost=' + $('#searchForm .city [name=cost]').val() );
	var reqTime =  $('#searchForm .shift option:selected').val() - 0;
	
	queryString = queryString.join( '&' );
	
	for( var i=0; i<timeLine.length; i++ ){
		timeLine[i] = $( document.createElement('div') )
		.attr( 'id', 'after' + i )
		.addClass( 'girls cf' )
		.append(
			$( document.createElement('h2') )
			.html( new Date(reqTime * 1000 + 3600000 * i).getHours() + ':00 から出勤の女の子' )
		).get(0);
		timeLine[i].offset = 0;
		timeLine[i].reqTime = reqTime + 3600 * i;
	}
	
	if( 0 == $('#searchForm .shift option:selected').index() ){
		$( timeLine[0] ).children( 'h2' ).html( '現在出勤中の女の子' );
		timeLine[0].active = true;
	}
	$result = $('#result').html('');
	for( var i=0; i<timeLine.length; i++ ){
		$result.append( $(timeLine[i]) );
		addThumb( timeLine[i] );
	}
	
	return false;
}


function addThumb( inStage ){
	
	showLimit = 15;
	var addQuery = '&shift=' + inStage.reqTime + '&offset=' + inStage.offset;
	
	if( inStage.active ){
		addQuery += '&active=true';
	}

	$.ajax({
		type: 'POST',
		url: 'search.php?' + +new Date(),
		data: queryString + addQuery,
		success: function( res ){
			
			//alert( res ); return;
			if( !res.length ){
				// この周辺にリクエストが0件だった処理を追加するかも
				return;
			}
			
			var imgSwap = function(){
				var tmp = $(this).attr( 'src' );
				if( tmp.length == tmp.indexOf('noimage.jpg') + 11 ){
					return;
				}
				var main = $(this).parent().prevAll('.main').get(0);
				$(this).attr( 'src', main.src );
				main.src = tmp;
				main.style.backgroundImage = 'url(' + tmp + ')';
			}
			
			var rows = res.split( '<>' );
			var toNum = rows.length;
			if( showLimit + 1 <= toNum ){
				toNum = showLimit;
			}
			for( i=0; i<toNum; i++ ){
				// 0: girlId, 1: girlName, 2: age, 3: image0, 4: image1, 5: image2, 6: clockIn, 7: clockOut
				var girlData = rows[i].split( "\t" );
				
				if( $('#' + girlData[0]).size() == 0 ){
					
					var $mainImage = $( document.createElement('div') )
						.addClass( 'main' )
						.css( 'background', 'url(' + girlData[3] + ')' )
						.click(function(){
							createForm( this.id, this.clockIn, this.clockOut );
						})
						.hover(function(){
							this.innerHTML = '<div class="hover"></div>';
						},function(){
							this.innerHTML = '';
						});
						
					var tmp = $mainImage.get(0);
					tmp.id = girlData[0];
					tmp.clockIn = girlData[6];
					tmp.clockOut = girlData[7];
					tmp.src = girlData[3];

					inStage.appendChild(
						$( document.createElement('div') )
						.addClass( 'girl' )
						.append( $mainImage )
						.append(
							$( document.createElement('div') )
							.addClass( 'thumb1' )
							.append(
								$( document.createElement('img') )
								.mouseover(imgSwap)
								.attr( 'src', girlData[4] )
							)
						).append(
							$( document.createElement('div') )
							.addClass( 'thumb2' )
							.append(
								$( document.createElement('img') )
								.mouseover(imgSwap)
								.attr( 'src', girlData[5] )
							)
						).append(
							$( document.createElement('p') )
							.html( girlData[1] + ' (' + girlData[2] + ')' )
						).get(0)
					);
				}
				
			}
			
			$('#next').remove();
			
			if( showLimit + 1 <= rows.length ){
				inStage.appendChild(
					$( document.createElement('div') )
					.html( '<p>次の' + showLimit + '人</p>' )
					.attr( 'id', 'next' )
					.addClass( 'next' )
					.click(function(){
						$(this)
						.css( 'background', '#fff url(./img/loading.gif) center center no-repeat' )
						.html( '' )
						.unbind('click');
						addThumb( this.parentNode );
					}).get(0)
				);
			}
			
			inStage.offset += showLimit;
		}
	});
	
	function createForm( inId, inClockIn, inClockOut ){

		$.ajax({
			type: 'GET',
			url: 'booking.php?id=' + inId + '&in=' + inClockIn + '&out=' + inClockOut,
			success: function( res ){

				$('body')
				.append(
					$( document.createElement('div') )
					.attr( 'id', 'bookingFormBg' )
					.fadeTo( 256, 0.6, function(){
						$('body').append(
							$( document.createElement('div') )
							.attr( 'id', 'bookingForm' )
							.html( res )
							.append(
								$( document.createElement('div') )
								.html( '×' )
								.addClass( 'close' )
								.click(function(){
									$('#bookingForm').remove();
									$('#bookingFormBg').remove();
								})
							)
						);
						
						var $bookingForm = $( '#bookingForm' );
						var windowHeight = $(window).height();
						var bookingHeight = $bookingForm.get(0).offsetHeight;
						if( windowHeight < bookingHeight ){
							$bookingForm.css({ height: windowHeight+'px', overflowY: 'scroll' });
						} else{
							$bookingForm.css({ top: Math.floor((windowHeight-bookingHeight)/2)+'px' });
						}
						
						$('#booking_submit')
						.click(function(){
							var bookingQuery = '';
							if( bookingQuery = getQuery() ){
								if( confirm('この女の子を予約します。') ){
									$('#bookingForm .booking')
									.css({ textAlign:'center', height:'480px', padding:'0' })
									.html( '<img src="/img/loading.gif" style="margin-top:216px;" />' );
									
									$.ajax({
										type: 'POST',
										url: 'booking.php',
										data: bookingQuery,
										success: function( res ){
											if( res == 'TRUE' ){
												$('#bookingForm .booking')
												.html( '<div style="padding-top:230px; font-size:18px; line-height:18px;">ご予約が完了しました。店舗からの連絡をお待ちください</div>' );
											} else{
												$('#bookingForm .booking')
												.html( '<div style="padding-top:230px; font-size:18px; line-height:18px;">送信に失敗しました (' + res + ')</div>' );
											}
										}
									});
								}
								
							}
							
						});
					})
					.click(function(){
						if( $("#bookingForm").size() > 0 ){
							$('#bookingForm').remove();
							$(this).remove();
						}
					})
				);
				
			}
		});
		
	}
	

}


function getQuery(){
	
	var query = new Array();
	
	var selector = new Array(
		new formItem( 'お名前', 'name', $("#bookingForm input:[name='name']").val(), 255, 1 ),
		new formItem( 'お電話番号', 'tel', $("#bookingForm input:[name='tel']").val().replace('-','','g'), 15, 1, /^[0-9]{10,15}$/ ),
		new formItem( 'メールアドレス', 'email', $("#bookingForm input:[name='email']").val(), 255, 1, /^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/ ),
		new formItem( '備考', 'comment', $("#bookingForm [name='comment']").val(), 512, 0 )
	);
	var $address = $("#bookingForm input:[name='address']");
	if( $address.size() > 0 ){
		selector.push( new formItem( '住所', 'address', $address.val(), 255, 1 ) );
	}
	
	for( var i=0; i<selector.length; i++ ){
		var tmp = selector[i].check();
		if( tmp ){
			query.push( tmp );
		} else{
			return false;
		}
	}

	query.push( 'plan=' + $("#bookingForm [name='plan'] option:selected").val() );
	query.push( 'time=' + $("#bookingForm [name='time'] option:selected").val() );
	return query.join( '&' );
	
}

var formItem = function( inLabel, inName, inValue, inMax, inMin, inReg ){
	
	this.check = function(){
		if( inMin && !inValue.length ){
			alert( inLabel + 'が未入力です' );
			return false;
		}
		if( inValue.length > inMax ){
			alert( inLabel + 'の文字数オーバーです' );
			return false;
		}
		if( inValue.length < inMin ){
			alert( inLabel + 'の値が短すぎます' );
			return false;
		}
		if( inMin && inReg && inValue.match(inReg) == null ){
			alert( inLabel + 'の値が不正です' );
			return false;
		}
		
		return inName + '=' + inValue;
	}
}




function citySelector( inCodeTagId, inNameTagId ){

	cityList = '/city.php?';
	
	if( inCodeTagId == undefined ){
		inCodeTagId = 'city' + ( +new Date() );
	}
	if( inNameTagId == undefined ){
		inNameTagId = inCodeTagId + '_name';
	}
	
	var cityId = inCodeTagId;
	var nameId = inNameTagId;
	document.write( '<input type="hidden" name="city" value="0" id="' + cityId + '" />' );
	document.write( '<input type="hidden" name="city_name" value="全国" id="' + inNameTagId + '" />' );
	
	var $cityCode = $( '#'+cityId );
	var $cityName = $( '#'+nameId );
	createSelector( $cityName, 0 );
	
	
	function createSelector( $e, inParent ){
		
		var $select = $( document.createElement('select') )
			.attr( 'class', cityId )
			.change(function(){
				// 都市名もhiddenで保持する処理を追加
				
				var $selected = $(this).children(':selected');
				$cityCode.val( $selected.val() );
				$cityName.val( $selected.text() );
				
				$(this).nextAll( 'select.'+cityId ).remove();
				
				if( 0 < $selected.index() ){
					createSelector( $(this), $selected.val() );
				} else{
					var val = $(this).prev('select.'+cityId).children(':selected').text();
					if( val ){
						$cityName.val( val );
					}
				}
				
			});
		
		$.get( cityList+inParent, function(data){
			if( data.length > 0 ){
				var allArea = '全域';
				if( inParent == 0 ){
					allArea = '指定無し';
				}
				var option = '<option value="' + inParent +'">' + allArea + '</option>';
				var list = data.split( '<>' );
				for( var i=0; i<list.length; i++ ){
					var tmp = list[i].split( ',' );
					option += '<option value="' + tmp[0] + '">' + tmp[1] + '</option>';
				}
				$e.after( $select.clone(true).html(option) );
			}
		});

	}


}