var windowWidth;
var windowHeight;
var feature_panel_width = 940;
var feature_panel_offset;
var feature_panel_curr = 0;
var feature_live_xpos;
var feature_panel_userclick;
var panels;
var panelnav;
var hdrtitle_width = new Array();
var intervalID;
var nextSlide;
var prevSlide;
var isiPad = false;
var isiPhone = false;

function init() {
	isiPad = navigator.userAgent.match(/iPad/i) != null;
	isiPhone = navigator.userAgent.match(/iPhone/i) != null;
	
	initWindowResize();
	
	// setup tabs
	setup_featuredNav();

	// setup panels
	$('#home_feature_panel').css({ 'position' : 'absolute', 'top' : '0', 'left' : '0', 'width' : '9999px' });
	panels = $('#home_feature_panel .panel');
	panels.eq(0).addClass('curr');
	position_panels();
	
}

function setup_featuredNav(){

	//$('#home_feature').append('<span id="prevbtn">Previous</span><span id="nextbtn">Next</span>');

	$('#home_page').prepend('<div id="home_feature_nav"></div>');
	$('#home_page').css({ 'position' : 'relative', 'margin-top' : '-25px' });
	$('#home_feature_nav').append('<span id="nav_arrow"></span>');
	
	panels = $('#home_feature_panel .panel');
	panelnav = $('#home_feature_nav');

	panels.each(function() {
		
		var panel_id = $(this).index();
		var panel_title = $(this).find('.panel_img').children('img').eq(0).attr('alt');
		
		if(panel_id == 0) {
			panelnav.append('<span onclick="slide_panel(' + panel_id + ');" class="tab title">' + panel_title + '</span>');
		} else {
			panelnav.append('<span onclick="slide_panel(' + panel_id + ');" class="tab"><span>0' + panel_id + '</span> ' + panel_title + '</span>');
		}
		
	});
	panelnav.children('span').hover(
		function(){
			$(this).css({'cursor' : 'pointer'});
			$(this).addClass('hover');
		}, function(){
			$(this).removeClass('hover');
		}
	);

}

function position_panels(){

	//feature_live_xpos = (windowWidth/2) - (feature_panel_width/2);
	
	var panels = $('#home_feature_panel .panel');
	var panel_xpos;
	set_panel_xposition(panels);
}

function set_panel_xposition(panels){
	var feature_live_xpos = (windowWidth/2) - (feature_panel_width/2);
	if (isiPhone==true || isiPad==true){
		
	}
	panels.each(function() {
		
		indexed = $(this).index();
		
		if($(this).hasClass('curr')){
			panel_xpos = feature_live_xpos;
		} else {
			panel_xpos = feature_live_xpos + (feature_panel_offset * indexed);
		}		
		$(this).css({
			'position' : 'absolute',
			'top' : 0,
			'left' : panel_xpos
		});
		
		var tmp_width = $(this).find('.hdrtxt').outerWidth();
		
		hdrtitle_width.push(tmp_width);
		
		$(this).find('.headline').children('.hdrtxt').css({ 'width' : tmp_width + 'px' });
		$(this).find('.headline').css({ 'width' : 0 });		
	});
	animate_headline(0);
}

function slide_panel(num){

	feature_panel_curr = num;
	slide_marker(num);
	slide_panel_action(num);
	//feature_panel_user = true;
}

function slide_panel_action(num){
	panels = $('#home_feature_panel');
	panels.animate({
		marginLeft: ("-" + (feature_panel_offset * num) + 'px')
	}, 1000, 'easeInOutQuart', function(){
		animate_headline(num);
	});
}

function animate_headline(num){
	var target = $('#home_feature_panel').find('.panel').eq(num).find('.headline');
	target.stop(true,false).animate({ 'width' : hdrtitle_width[num] + 'px' }, 500)
}

function slide_marker(num){
	
	var tabitem = $('#home_feature_nav .tab').eq(num);
	var xpos = tabitem.position();
	    xpos = xpos.left + (tabitem.outerWidth()/2) - 5;
	    xpos = (Math.round(xpos / 1) * 1);
	    
	if(num == 0 || num == ""){
		xpos = -20
	}
	
	$('#nav_arrow').animate({
		left : xpos + 'px'
	}, 400, 'easeOutCirc')

}

function initWindowResize(){
	$(window).bind("resize", function(){
		onWinResize();
	});
	onWinResize();
}

function onWinResize(){
	windowWidth = $(window).width();
	windowHeight = $(window).height();
	feature_panel_offset = (windowWidth - feature_panel_width);
	feature_panel_offset = (feature_panel_offset/2) + feature_panel_width;	
	var additional_slides = $("#home_feature_panel div.panel");
	set_panel_xposition(additional_slides);
}

$.fn.textWidth = function(){
	var html_org = $(this).html();
	var html_calc = '<span>' + html_org + '</span>'
	$(this).html(html_calc);
	var width = $(this).find('span:first').width();
	$(this).html(html_org);
	return width;
};

/******************************************************************** START */

$(function(){
	
	init();

});