var VIEWER_images = new Object()
var VIEWER_control = null
var VIEWER_interval = null
var VIEWER_time = 7000
var VIEWER_traverse_time = 1200
var VIEWER_clipwidth = 515
var VIEWER_clipheight = 340
var VIEWER_position = 0
var VIEWER_stop = 0
var VIEWER_path = ''

$(window).load(VIEWER_load)

function VIEWER_load() {
	VIEWER_control = $("#viewer_control")
	VIEWER_path = VIEWER_control.attr('src').substr(0, VIEWER_control.attr('src').lastIndexOf("/")+1);
	VIEWER_control.bind("click", VIEWER_pause)
	VIEWER_control.bind("mouseover", VIEWER_hover)
	VIEWER_control.bind("mouseout", VIEWER_hover)
	VIEWER_images = $(".viewer_image")
	if (VIEWER_images.length == 0) {
		return false;
	}
	for(var i = 0; i < VIEWER_images.length; i++) {
		$(VIEWER_images[i]).css({'clip' : 'rect(0px '+VIEWER_clipwidth+'px '+VIEWER_clipheight+'px 0px)', 'top' : '9px', 'left' : '7px'})
		$(VIEWER_images[i]).css({'left' : ((VIEWER_clipwidth-$(VIEWER_images[i]).width())/2+7)+'px'})
		$(VIEWER_images[i]).css({'top' : ((VIEWER_clipheight-$(VIEWER_images[i]).height())/2+9)+'px'})
		$(VIEWER_images[i]).toggle()
	}
	VIEWER_interval = window.setInterval('VIEWER_traverse()', VIEWER_time)
	
	if(VIEWER_images[VIEWER_position].width > VIEWER_clipwidth && VIEWER_images[VIEWER_position].height > VIEWER_clipheight) {
		$(VIEWER_images[VIEWER_position]).css({'clip' : 'rect(0px '+VIEWER_clipwidth+'px '+VIEWER_clipheight+'px 0px)', 'top' : '9px', 'left' : '7px'})
	}	
	$(VIEWER_images[VIEWER_position]).fadeIn(VIEWER_traverse_time, VIEWER_move)
}

function VIEWER_hover(event) {
	if(event.type == "mouseover") {
		VIEWER_control.attr('src', VIEWER_stop ? VIEWER_path+'play.jpg' : VIEWER_path+'pause.jpg')
	}
	else {
		VIEWER_control.attr('src', VIEWER_stop ? VIEWER_path+'pause.jpg' : VIEWER_path+'play.jpg')
	}
}

function VIEWER_pause() {
	VIEWER_control.unbind("click", VIEWER_pause)
	VIEWER_control.bind("click", VIEWER_resume)
	VIEWER_control.attr('src', VIEWER_path+'pause.jpg')
	window.clearInterval(VIEWER_interval)
	VIEWER_position = VIEWER_position+1 >= VIEWER_images.length ? 0 : VIEWER_position + 1
	VIEWER_stop = 1
}

function VIEWER_resume() {
	VIEWER_control.unbind("click", VIEWER_resume)
	VIEWER_control.bind("click", VIEWER_pause)
	VIEWER_control.attr('src', VIEWER_path+'play.jpg')
	VIEWER_interval = window.setInterval('VIEWER_traverse()', VIEWER_time)
	$(VIEWER_images[VIEWER_position]).css({'clip' : 'rect(0px '+VIEWER_clipwidth+'px '+VIEWER_clipheight+'px 0px)', 'top' : '8px', 'left' : '10px'})
	$(VIEWER_images[VIEWER_position]).fadeIn(VIEWER_traverse_time, VIEWER_move)
	VIEWER_stop = 0
}

function VIEWER_traverse() {
	var current = $(".viewer_image:visible")
	VIEWER_position = VIEWER_position+1 >= VIEWER_images.length ? 0 : VIEWER_position + 1
	var next = $(VIEWER_images[VIEWER_position])
	
	current.fadeOut(VIEWER_traverse_time)
	next.fadeIn(VIEWER_traverse_time, VIEWER_move)
	
	if(next.width > VIEWER_clipwidth && next.height > VIEWER_clipheight) {
		next.css({'clip' : 'rect(0px '+VIEWER_clipwidth+'px '+VIEWER_clipheight+'px 0px)', 'top' : '9px', 'left' : '7px'})
	}
}

function VIEWER_move() {
	var next = $(this)
	var width = next.width()
	var height = next.height()
	
	var newclip_left = width-VIEWER_clipwidth
	var newclip_right = width
	var newclip_top = height-VIEWER_clipheight
	var newclip_bottom = height
	
	
	var newclip_abs_top = 9-newclip_top;
	var newclip_abs_left = 7-newclip_left;
	
	if(VIEWER_images[VIEWER_position].width > VIEWER_clipwidth && VIEWER_images[VIEWER_position].height > VIEWER_clipheight) {
		var rect = 'rect('+newclip_top+'px '+newclip_right+'px '+newclip_bottom+'px '+newclip_left+'px)'
		next.animate({'clip' : rect, 'top' : newclip_abs_top+'px', 'left' : newclip_abs_left+'px'}, VIEWER_time-VIEWER_traverse_time*2-25)
	}
	else if (VIEWER_images[VIEWER_position].width > VIEWER_clipwidth && !(VIEWER_images[VIEWER_position].height > VIEWER_clipheight)) {
		var rect = 'rect(0px '+newclip_right+'px '+VIEWER_clipheight+'px '+newclip_left+'px)'
		next.animate({'clip' : rect, 'left' : newclip_abs_left+'px'}, VIEWER_time-VIEWER_traverse_time*2-25)
	}
	else if (!(VIEWER_images[VIEWER_position].width > VIEWER_clipwidth) && VIEWER_images[VIEWER_position].height > VIEWER_clipheight) {
		var rect = 'rect('+newclip_top+'px '+VIEWER_clipwidth+'px '+newclip_bottom+'px 0px)'
		next.animate({'clip' : rect, 'top' : newclip_abs_top+'px'}, VIEWER_time-VIEWER_traverse_time*2-25)
	}
	else {
		return true
	}
}