var colour;

$(document).ready(function() {

	if (!$.browser.msie || $.browser.version > 7) {
		$('#hardware_browser li li').addClass('clickable_box');
	}

	/* Initialize */
	$('#tabs_nav').show();
	// initialise slider controls
	$('#hardware_browser').append('<div id="slide_controls"></div>');
	$('#slide_controls').html('<a href="#" class="slide_left"></a><a href="#" class="slide_right"></a>');
	$('#slide_controls').hide();
	$('#captcha').hide();


	// hide all hardware lists
	$('#hardware_browser li div').hide();

	

	// make the first tab active
	$('#tab1').addClass('active');
	$('#tabs_nav li#monthly').addClass('active');
	
	switchTab($('#tabs_nav li.active'));
	
	// show the first hardware list
	$('#tab1 div').show();

	$("#hardware_browser ul>li > div").addClass('browser_active');

	var	slide = 1;
	var items_per_slide = 6;
	var	scroll_unit = 858;
	var active_list = $('.active div ul');
	var	items = $(active_list).find('li').size();
	var the_list = active_list;
	var in_progress = false;

	setup_list(the_list);

	function setup_list(list) {
		items = $(active_list).find('li').size();

		var empty_cells = 6-(items%items_per_slide);
		if (empty_cells == 6) {empty_cells=0;}
		var maxSlide = (items+empty_cells)/items_per_slide;

		// Generate empty spaces
		for(i=1;i<=empty_cells;i++) {
			$('<li class="original">&nbsp;</li>').appendTo(list);
		}

		// add the edge class to the last empty cell
		$(list).find('li.original:last').addClass('edge_right');

		// add 'original' class to every item
		for(i=0;i<items;i++) {
			$(list).find('li').eq(i).attr('id',i).addClass('original');
		}

		/* Clone first slide */
		for(i=0;i<items_per_slide;i++) {
			$(list).find('li').eq(i).clone().removeClass('original').addClass('head_clone').appendTo(list);
		}

		/* Clone last slide */
		for(i=0;i<items_per_slide;i++) {
			$(list).find('li').eq(items+empty_cells-1).clone().removeClass('original').addClass('end_clone').prependTo(list);
		}

		// indicate that the list has been set up
		// TODO remove this and set up all list in one go when the document loads
		$(list).addClass('cloned');

		//$(list).addClass('cloned').find('li.original:last').css('margin-right','20px');
	}

	resetSlider();

	// tabs
	$('#tabs_nav li').click(function(){
		switchTab($(this));
		return false;
	});

	function switchTab(tab){
		$('#tabs_nav li').removeClass('active');

		$(tab).addClass('active');

		if ($(tab).is('#monthly')) {tab = $('#tab1');}	else { tab = $('#tab2');}

		tabID = tab.attr('id');

		// remove any classes on the slide controls
		$('#slide_controls').attr('class','');

		// give the slider controls a class to match their appearance to tab tab
		$('#slide_controls').addClass(tabID);

		browser = tab.find('div');

		// find out if the clicked tab is active
		if (tab.hasClass('active')) {
			// if it's active, do nothing
			return false;
		}
		else {
			// hide the active tab
			$('.active div').hide();
			// remove the active class from all tabs
			$('#hardware_browser ul>li').removeClass('active');
			// assign the active class to the clicked tab
			tab.addClass('active');

			active_list = tab.find('div ul');
			if (!$(active_list).hasClass('cloned')) {
				setup_list(active_list);
			}

			$('#slide_controls').hide();
			resetSlider();

			$(browser).show();
			$(browser).addClass('slider');
		}
		return false;
	}

	function resetSlider(){
		slide = 1;
		items = $('.active div li.original').size();
		maxSlide = items/items_per_slide;
		// push the list back one slide
		$(active_list).css('left','-'+scroll_unit+'px');
		// display the slide controls if there's more than 6 items in the list
		if (items>6) {
			$('#slide_controls').show();
		}
	}

	function moveToLast() {
		slide=maxSlide;
		$(active_list).css('left','-'+(scroll_unit*maxSlide)+'px');
	}

	$("#slide_controls .slide_left").click(function(){
		if (!in_progress) {
			in_progress = true;
			if (slide==1) {
				$(active_list).animate({left: '+='+scroll_unit+'px'}, "normal", function(){moveToLast();in_progress = false;});
			}
			else {
				$(active_list).animate({left: '+='+scroll_unit+'px'}, "normal", function () {
					slide--;
					if (slide==1) {
						resetSlider();
					}
					in_progress = false;
				});
			}
		}
		return false;
	});

	$(".slide_right").click(function(){
		if (!in_progress) {
			in_progress = true;
			if (slide<maxSlide) {
				$(active_list).animate({left: '-='+scroll_unit+'px'}, "normal", function(){slide++;in_progress = false;});
			}
			else if (slide==maxSlide) {
				$(active_list).animate({left: '-='+scroll_unit+'px'}, "normal", function() {
					resetSlider();
					in_progress = false;
				});
			}
		}
		return false;
	});

	// merchant features
	$('#features dt').show();
	$('#features #feat_wrap').css('height','226px')
	.css('padding','0');
	$('#feature_details ul').css('margin','0');

	if ($("#feature_details").length) {
		$("#feature_details").attr("id","feature_nav");
		$("#feature_nav").parent().append('<div id="feature_display"></div>');
		$("#feature_nav dd").hide();
		$("#feature_nav dt").each(function(index) {
			$(this).html('<a href="#">'+$("#feature_nav dt:eq("+index+")").html()+'</a>');
		});
	$("#ftr0_title a").addClass("selected"); // The first element is selected by default
		$("#feature_nav a").click(function(){
			$("#feature_nav dt a").removeAttr("class");
			$(this).addClass("selected");
			$(this).parent().attr("class","active");
			$("#feature_display").html($(this).parent().next().html());
			return false;
		});
		$("#feature_nav dt:first").attr("class","active");
		$("#feature_display").html($("#feature_nav dd:first").html());
	}

	// Ratings
	$('#rating ul input').inputSlider();

	$('.user_rating > li').hide();
	$('.user_rating > li.overall').show();
	$('.user_rating > li.overall').toggle(
		function () {
			$(this).parent().find('li:not(.overall)').slideDown('fast').addClass('expanded');
			return false;
		},
		function () {
			$(this).parent().find('li.expanded').slideUp('fast').removeClass('expanded');
			$('.user_rating > li.overall').show();
			return false;
		}
	);


        $('#select_period').change(function() {
            $.getJSON("/_ajax/comments.php", {channel: 3, merchant: $('input[name="merchant_id"]').val(), start: $(this).val()}, function(data){
                $('#ratings > ul:not(.ratings_list)').empty();
                $.each(data, function(i, item){
                    html = '<li>' + item.comment + '<cite>' + item.name + ', ' + item.date + '</cite>'
                         + '<ul class="user_rating">'
                         + '<li class="overall"><a href="" class="rating_label">Overall rating:</a><span class="rated_' + item.overall + '"></span>' + item.overall + '/10</li>'
                         + '<li><span class="rating_label">Coverage:</span><span class="rating_bar rated_' + item.coverage + '"></span>' + item.coverage + '/10</li>'
                         + '<li><span class="rating_label">Customer service:</span><span class="rating_bar rated_' + item.customer + '"></span>' + item.customer + '/10</li>'
                         + '<li><span class="rating_label">Value:</span><span class="rating_bar rated_' + item.value + '"></span>' + item.value + '/10</li></ul></li>'

                    if (i < 4) {
                        $('#ratings > ul:not(.ratings_list, #more_reviews)').append(html);
                    } else {
                        $('#more_reviews').append(html);
                    }
                });

                $('.user_rating > li').hide();
                $('.user_rating > li.overall').show();
                $('.user_rating > li.overall').toggle(
                        function () {
                                $(this).parent().find('li:not(.overall)').slideDown('fast').addClass('expanded');
                                return false;
                        },
                        function () {
                                $(this).parent().find('li.expanded').slideUp('fast').removeClass('expanded');
                                $('.user_rating > li.overall').show();
                                return false;
                        }
                );
            });
        });


//Scrolling

$('#page_nav ul li a').click(function(){
	if ($(this).attr('href')=='#payg_phones') {
		var the_tab = $('#tabs_nav li#payg');
		switchTab(the_tab);
		$('#tabs_nav li#payg').addClass('active');
		$(window).scrollTo('#tabs_nav', 500);
	}
	else if ($(this).attr('href')=='#paymonthly_phones') {
		var the_tab = $('#tabs_nav li#monthly');
		switchTab(the_tab);
		$('#tabs_nav li#monthly').addClass('active');
		$(window).scrollTo('#tabs_nav', 500);
	}
	else {
	var target=$(this).attr('href');
	$(window).scrollTo(target, 500);
	}
	return false;
});

$('.link_top').click(function(){
	$(window).scrollTo('#header', 250);
	return false;
});

});