$(document).ready(function() {
    $('#img-box')
		.before('<ul class="img-list" id="nav">')
		.cycle({ 
			debug:false,
		    speed:  'fast',
		    timeout: 0, 
		    pager:  '#nav',
		    pagerAnchorBuilder: function(index, el) {
		    	return '<li>'+$("#pager_src #p_"+index).html()+'</li>';
		    },
		    before: function(currSlideElement, nextSlideElement, options, forwardFlag){
		    	$(".txt-info .holder span").html($(nextSlideElement).attr('alt'));
		    }
		});
	$("#nav li").mouseover(function(){$(this).click()})
	$("#c_pause").click(function(){
		$('#img-box').cycle('pause')
	});
	$("#c_play").click(function(){
		$('#img-box').cycle('resume')
	});

	$('.img-box')
		.cycle({ 
			debug:false,
		    speed:  'fast',
		    timeout: 0, 
		    pager:  '#pager_dst',
		    pagerAnchorBuilder: function(index, el) {
		    	return '<li>'+$("#pager_src #p_"+index).html()+'</li>';
		    },
		    before: function(currSlideElement, nextSlideElement, options, forwardFlag){
		    	$(".txt-info .holder span").html($(nextSlideElement).attr('alt'));
		    }
		});
	$("#pager_dst li").mouseover(function(){$(this).click()})

	$('.image-area .block')
		.cycle({ 
			debug:false,
		    speed:  'fast',
		    timeout: 0, 
		    pager:  '#pager_dst2',
		    pagerAnchorBuilder: function(index, el) {
		    	return '<li>'+$("#pager_src2 #p_"+index).html()+'</li>';
		    },
		});
	$("#pager_dst2 li").mouseover(function(){$(this).click()})

});