$(document).ready(function() {
	
	var $panels = $('#home_slider_mid_content_border .home_slider_panel');
	var $container = $('#home_slider_mid_content_border .home_slider_mid_content_scrollContainer');
	var $scroll = $('#home_slider_mid_content_border .home_slider_mid_content_scroll').css('overflow', 'hidden');
	var horizontal = true;
	
	$('.home_slider_panel p').css({opacity: 0});
	$('.home_slider_navigation img:not(.selected)').css({opacity: 0.5});

	
	if (horizontal) {
	  $panels.css({
		'float' : 'left',
		'position' : 'relative' // IE fix to ensure overflow is hidden
	  });
	  
	  // calculate a new width for the container (so it holds all panels)
	  $container.css('width', $panels[0].offsetWidth * $panels.length);
	}	
	
	
	function selectNav() {
		$(this)
			.parents('ul:first')
				.find('a')
					.removeClass('selected')
				.end()
			.end()
			.addClass('selected');
		$('.home_slider_navigation .selected img').fadeTo(200, 1.0);

	}

	$scroll
  		.before('<img class="home_slider_scrollButtons left" src="http://metapixel.com.ph/wp-content/themes/metapixel/slider/home_slider_left.png" />')
  		.after('<img class="home_slider_scrollButtons right" src="http://metapixel.com.ph/wp-content/themes/metapixel/slider/home_slider_right.png" />');
	
	var scrollOptions = {
		target: $scroll,
		items: $panels,
		navigation: '.home_slider_navigation a',
		prev: 'img.left',
		next: 'img.right',
		axis: 'xy',
		onAfter: trigger,
		duration: 800,
		interval: 20000,
		force: true,
		constant: false,
		easing: 'easeInOutQuint',
		lock: false,
		stop: true,
		offset: {top:0, left:-146},
		onBefore: function() {
			$('.home_slider_navigation img:not(.selected)').fadeTo(400, 0.5);
		}
	};
	
	function trigger(data) {
  		var el = $('#home_slider_mid_content_border .home_slider_navigation').find('a[href$="' + data.id + '"]').get(0);
  		selectNav.call(el);
	}

	if (window.location.hash) {
	  	trigger({ id : window.location.hash.substr(1) });
	} else {
	  	$('ul.home_slider_navigation a:first').click();
	}
	
	
	// animation for slider
	$('#home_slider_mid_content_border').serialScroll(scrollOptions);
	
	
	// animation for left and right buttons on mouse click
	$('.home_slider_scrollButtons.left').mousedown(function() {
		$(this).stop().animate({
			left: '25px'
		}, 100);
	});
	$('.home_slider_scrollButtons.left').mouseup(function() {
		$(this).stop().animate({
			left: '30px'
		}, 100);
	});	
	$('.home_slider_scrollButtons.right').mousedown(function() {
		$(this).stop().animate({
			left: '838px'
		}, 100);
	});
	$('.home_slider_scrollButtons.right').mouseup(function() {
		$(this).stop().animate({
			left: '833px'
		}, 100);
	});


	$('.home_slider_panel').hover(
		function panelHoverIn() {
			jQuery(this).find('p').stop().fadeTo(200, 1.0);
			jQuery(this).children('.home_slider_panel_caption').stop().animate({
				top: '170px'
			}, 200);
		},
		function panelHoverOut() {
			jQuery(this).find('p').stop().fadeTo(400, 0);
			jQuery(this).children('.home_slider_panel_caption').stop().animate({
				top: '225px'
			}, 400);
		}
	);



	var $scrollPause = $('<img class="scrollPause" src="http://metapixel.com.ph/wp-content/themes/metapixel/slider/home_slider_pause.jpg">');
	var $scrollPlay = $('<img class="scrollPlay" src="http://metapixel.com.ph/wp-content/themes/metapixel/slider/home_slider_play.jpg">');
	var $autoscroll = $('#home_slider_mid_content_border #home_slider_autoscroll').append($scrollPause);
	
	$autoscroll.css({opacity: 0});
	
	$scrollPause.click(function() {
			$('.home_slider_mid_content_scroll').trigger( 'stop' );
			$(this).appendTo();
			$autoscroll.append($scrollPlay);
	});
	
	$scrollPlay.click(function() {
			$('.home_slider_mid_content_scroll').trigger( 'start' );
			$(this).appendTo();
			$autoscroll.append($scrollPause);
	});
	
	$('.home_slider_panel, #home_slider_autoscroll').hover(
		function () {
			$autoscroll.stop().fadeTo(200, .9);
		},
		function () {
			$autoscroll.stop().fadeTo(400, 0);
		}
	);
	

});