var Map = {
	selector: '#StatesMap',
	map_selector: '#States',
	
	init: function() {
		var that = this
		$(this.selector).children('area').hover(function() {
			var id = $(this).attr('id')
			$(that.map_selector).attr('src', 'http://www.visualartsource.com/graphics/states_icons/States' + id + '.gif')
		},
		function() {
			$(that.map_selector).attr('src', 'http://www.visualartsource.com/graphics/states_icons/VASstates.gif')
		})
	}
}

var Banners = {
	url: '/index2.php/banner/scroller',
	bannersArr: false,
	paused: 0,
	timer: null,
	DOMelem: false,
	DOMelem2: false,
	preload: false,
	imageSize: 100, // %
	biggest: 0,
	ieBorder: 0,
	direction: 0, // 0 = up 1 = down
	speed: 1,
	st: null,
	
	init: function() {
		this.bannersArr = []
		this.preload = []

		this.getJSON()
	},
	
	getJSON: function() {
		var that = this
		$.getJSON(this.url, function(data) {
			that.draw(data)
		})
	},
	
	draw: function(data) {
		var that = this
	
		for(var i in data) {
			this.bannersArr.push(["http://www.visualartsource.com/ClientServices/banners/" + data[i].banners_image, "pic01.jpg", data[i].banners_id])
		}

		for(var i=0; i < this.bannersArr.length; i++) {
			this.preload[i] = new Image()
			this.preload[i].src = this.bannersArr[i][0]
		}
		
		$(window).load(function() {
			that.initVS4()
		})
		/*window.onfocus = function() {
			/*
			clearTimeout(chkTimer)
			if(picWin&&picWin.open&&!picWin.closed){
			chkTimer=setTimeout("picWin.close()",10000) // uncomment to have popup closed when blurred
			}
			*/
			/*
			Banners.paused = 0
			Banners.scrollVS4()
		}*/
	},
	
	initVS4: function() {
		var	fixedWidth = 100, // set a fixed width
			fixedHeight = 100 // set a fixed height

		this.DOMelem = document.getElementById("scroller1")

		for(var j=0; j < this.bannersArr.length; j++) {
			this.DOMelem.innerHTML += '<a href="/js/redirect.php?id=' + this.bannersArr[j][2] + '" target="_blank"><img id="pic' + j + '" src="' + this.preload[j].src + '" border="0" style="margin-top:5px;margin-bottom:5px;"></a><br>'

			if(this.imageSize != 0) { // use percentage size
				var newWidth = this.preload[j].width / 100 * this.imageSize
				var newHeight = this.preload[j].height / 100 * this.imageSize
			}
			else { // use fixed size
				var newWidth = fixedWidth
				var newHeight = fixedHeight
			}

			document.getElementById("pic" + j).style.width = newWidth + "px"
			document.getElementById("pic" + j).style.height = newHeight + "px"
			
			if(document.getElementById("pic" + j).offsetWidth > this.biggest) {
				this.biggest = document.getElementById("pic" + j).offsetWidth
			}
		}

		scrollBox = document.getElementById("scroll_box")

		if(document.getElementById && document.all && document.compatMode != "CSS1Compat") {
			this.ieBorder = parseInt(scrollBox.style.borderTopWidth)*2
		}
		
		scrollBox.style.width = this.biggest + this.ieBorder + "px"
		this.DOMelem2 = document.getElementById("scroller2")
		this.DOMelem2.innerHTML = this.DOMelem.innerHTML
		this.DOMelem2.style.top = this.DOMelem.offsetHeight+"px"

		if(this.direction==0)
			this.speed = -this.speed
		
		Banners.scrollVS4()
	},
	
	pause: function() {
		clearTimeout(this.timer)
		clearTimeout(this.st)
	},

	reStartVS4: function() {
		clearTimeout(this.st)
		this.st = setTimeout("Banners.scrollVS4()",100)
	},
	
	scrollVS4: function() {
		if(this.paused == 1){ return }
		clearTimeout(this.timer)

		var scroll1Pos = parseInt(this.DOMelem.style.top),
			scroll2Pos = parseInt(this.DOMelem2.style.top)
		
		scroll1Pos += this.speed
		scroll2Pos += this.speed
		
		this.DOMelem.style.top = scroll1Pos+"px"
		this.DOMelem2.style.top = scroll2Pos+"px"
		
		this.timer = setTimeout("Banners.scrollVS4()",60)

		if(this.direction==0) {
			if(scroll1Pos < -this.DOMelem.offsetHeight){
				this.DOMelem.style.top = this.DOMelem.offsetHeight+"px"
			}

			if(scroll2Pos < -this.DOMelem.offsetHeight) {
				this.DOMelem2.style.top = this.DOMelem.offsetHeight+"px"
			}
		}

		if(this.direction == 1) {
			if(scroll1Pos>parseInt(scrollBox.style.height)) {
				this.DOMelem.style.top = (scroll2Pos - this.DOMelem.offsetHeight) + "px"
			}

			if(scroll2Pos>parseInt(scrollBox.style.height)) {
				this.DOMelem2.style.top=(scroll1Pos - this.DOMelem2.offsetHeight)+"px"
			}
		}
	}

}



var LiveSearch = {
	init: function() {
		var that = this
		
		$('.live-search').each(function() {

			$(this).bind('keyup', function() {
				var selector = $(this).attr('data-selector'),
					val		 = $(this).val(),
					target   = $(this).attr('data-target')
				
				if( val.length > 3 ) {
					var uri = 'LocationSearch2.php?q=' + val + '&o='
					that.request(uri, selector)
					/*, function() {
						$(html).find('input:radio').click(function() {
							alert('click')
							$( '#' + $(this).attr('data-target') ).val( $(this).val() )
						})
					})*/
				}
			})
			

			
		})
	},
	
	request: function(address, div) {
		document.getElementById(div).innerHTML = '<img src="http://www.visualartsource.com/graphics/loading.gif">';
		
		var http_request = false;
		
		if(window.XMLHttpRequest) {
			http_request = new XMLHttpRequest()
			if(http_request.overrideMimeType)
				http_request.overrideMimeType('text/xml')
		}
		else if (window.ActiveXObject) {
			try {
				http_request = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				try {
					http_request = new ActiveXObject("Microsoft.XMLHTTP");
				} catch(e) { }
			}
		}


		if (!http_request) {
			document.getElementById(div).innerHTML = 'Cannot create an XMLHTTP instance'
			return false
		}
		
		http_request.onreadystatechange = function() { 
			if(http_request.readyState == 4) {
				if(http_request.status == 200) {
					document.getElementById(div).innerHTML = http_request.responseText
					var html = http_request.responseText
					cb( http_request.responseText )
				} 
				else {
					document.getElementById(div).innerHTML = 'There was a problem with the request.'
				}
			}
		}
		
		address = '/components/' + address;
		http_request.open('GET', address, true);
		http_request.send(null)
	}
}


var Calendar = {

	init: function() {
		this.search()
		
		$("#calendar-search .datepicker").datepicker({
			dateFormat: 'yy-mm-dd',
			onSelect: function(dateText, inst) {
				if( $('#calendar-search input[name=date_end]').val() == '' )
					$('#calendar-search input[name=date_end]').val(dateText)
				}
			}
		);
	},
	
	search: function() {
		$('form#calendar-search').submit(function() {
			var type       = $(this).find('select[name=type]').val(),
				kind       = $(this).find('select[name=kind]').val(),
				state      = $(this).find('select[name=state]').val(),
				city       = $(this).find('#city select:visible :selected').text(),
				date_start = $(this).find('input[name=date_start]').val(),
				date_end   = $(this).find('input[name=date_end]').val()
	
			// if ajax search results not in dom and no text input with venue name
			if( $(this).find('input[name=location_id]:checked').val() === undefined && $('.live-search').val() !== '' )
				var venue = $('#location_id').val()
			// if venue name input is not empty (meaning hidden loc_id is set)
			else if( $('.live-search').val() !== '' )
				var venue = $(this).find('input[name=location_id]:checked').val()
			// if user clears input field, assume they want all locations
			else
				var venue = '_'
				
			if(city == 'Any' || city == '')
				city = '_'
	
			window.location = '/index2.php/calendar/index/' + kind + '/' + type + '/' + venue + '/' + state + '/' + city + '/' + date_start + '/' + date_end
			
			return false
		})
	}
}








$(document).ready(function() {
	LiveSearch.init()
	//Banners.init()
	Calendar.init()


	$('#sidebar .calendar, .calbox').datepicker({
		onSelect: function(dateText, inst) {
			var ms = Date.parse(dateText)
			var d = new Date(ms)
			var date = d.getFullYear() + '-' + ('0' + (d.getMonth()+1)).slice(-2) + '-' + ('0' + d.getDate()).slice(-2)
			window.location = '/index2.php/calendar/index/openings/_/_/_/_/' + date + '/' + date
		}
	})
	
	
	// homepage ad
	window.setTimeout(function() {
		 $('#test').animate({ height : '25px' }, 1500, function() {
		 	$('#signup-ad').attr('src', '/images/signup-ad-small.png');
		 })
	}, 20000);	

	
	$('#calendar-search #state').change(function() {
		var state = $(this).val()
		if(state == '_') {
			$('#calendar-search #city').addClass('hidden')
		}
		else {
			$('#calendar-search #city').removeClass('hidden')
			$('#calendar-search #city select').addClass('hidden')
			$('#calendar-search select[name=state_' + state + ']').removeClass('hidden')
		}
	})
	
})

$(window).load(function() {
	Map.init()
})