//
// viewport.js
// Copyright (c) Connect Group Ltd. All rights reserved.
//
// $Id: viewport.js 527 2010-02-05 19:10:44Z paul $
//

jQuery(function($) {
	// The mouse parameters for controlling the slider with a mouse.
	// The parameters are used by the left and right buttons; sliding the slider and clicking in the 
	// main slide area are handled by the jQuery slider code.
	var mouse = { down: false, interval: 50, step: 10 };

	if (typeof viewports == 'undefined' || viewports == undefined || viewports == null || viewports.length == 0) {
		if(typeof console != 'undefined') {
			console.log('The variable "viewports" is undefined or empty. Was this your intention?');
		}
		return;
	}

	for (var index = 0; index < viewports.length; index++) {
		var viewportConfig = viewports[index];

		var parent = $(viewportConfig.parent.selector);
		if (parent.length) {
			parent.css({'overflow':'hidden', 'position':'relative' });
			parent.addClass(viewportConfig.parent.cssClass);

			var viewport = viewportConfig.create();

			var items = $(viewportConfig.childSelector, viewport);
			if (items.length > viewportConfig.size) {

				// Initialize the viewport
				viewport.css({'overflow':'hidden', 'position':'relative' });
				viewport.addClass('viewport');
				viewport.data('size', viewportConfig.size);

				// Initialize the slider
				var sliderOpts = {
					animate: true,
					slide: function(e, ui) {
						slide($(this), ui.value);
					},
					change: function(e, ui) {
						slide($(this), ui.value);
					}
				};

				var sliderParent = $(viewportConfig.slider.selector);
				var sliderWrapper = $('<div class="slider-wrapper"><span class="left"></span><span class="right"></span><div class="slider"></div></div>');
				sliderParent.append(sliderWrapper);

				var slider = $('div.slider', sliderParent);
				slider.data('viewport', viewport);
				slider.data('viewportChildSelector', viewportConfig.childSelector)
				slider.slider(sliderOpts);
				slider.append($('<span class="counter">' + items.length + '</span>'));

				$('span.left, span.right', slider.parent()).each(function() {
					var arrow = $(this);
					$(this).click(function(e) {
						e.preventDefault();
						//var direction = this.className;
						changeSliderValue($('div.slider', $(this).parent()), this.className);
						return false;
					})
					// $(this).mousedown(function() {
					// 	mouse.down = true;
					// 	var direction = this.className;
					// 	setTimeout(
					// 		function() { changeSliderValue($('div.slider', arrow.parent()), direction) },
					// 		mouse.interval
					// 	);
					// });
					// $(this).mouseup(function(e) {
					// 	e.preventDefault();
					// 	mouse.down = false;
					// 	return false;
					// });
					// $(this).children('a').click(function(e) {
					// 	e.preventDefault();
					// 	return false;
					// });
				});

				setCounterText(slider);

				var itemDimensions = getViewportItemDimensions(items);
				viewport.height(itemDimensions.height);
				viewport.width(itemDimensions.width * items.length);
				
				var tuning = 0;
				if (!isNaN(parseInt(viewportConfig.tuning))) {
					tuning = parseInt(viewportConfig.tuning);
				}

				slider.slider('option', 'max', viewport.width() - parent.outerWidth() - tuning);
				slider.slider('option', 'step', itemDimensions.width);

				var selectedItemIndex = items.index(items.filter('.selected'));
				var left = 0;
				if (selectedItemIndex < viewportConfig.size) {
					left = 0;
				} else if ((selectedItemIndex >= viewportConfig.size) && (selectedItemIndex <= (items.length - (viewportConfig.size)))) {
					left = (selectedItemIndex * itemDimensions.width);
				} else {
					left = (items.length - viewportConfig.size) * itemDimensions.width;
				}
				slider.slider('value', left);
			}

			var sliderWrapper = $('div.slider-wrapper', viewportConfig.slider.selector);
			if (viewport.width() < parent.width()) {
				sliderWrapper.hide();
			}

			// Apply PNG fixes to the newly created or positioned elements
			if (typeof DD_belatedPNG != 'undefined') {
				$('img', viewport).each(function() { DD_belatedPNG.fixPng(this); });
				$('a.ui-slider-handle', slider).each(function() { DD_belatedPNG.fixPng(this); });
			}
		}
	}
	//
	// changeSliderValue(slider, direction)
	// Changes the value of the specified slider in the specified direction.
	// PARAMS
	//  slider: A slider.
	//  direction: The direction in which the value should be set.
	// REMARKS
	//  Once the value has been changed, a timer is started to continue changing the value until the 
	//  mouse button is released.
	//
	function changeSliderValue(slider, direction) {
		var value = slider.slider('value');

		var viewport = slider.data('viewport');
		var items = $(slider.data('viewportChildSelector'), viewport);
		var itemDimensions = getViewportItemDimensions(items);

//		if (mouse.down && value >= 0) {
			var step = slider.slider('option', 'step');//itemDimensions.width;
			if (direction == 'left') {
				step = step * -1;
			}

			slider.slider('value', value + step);

		// 	setTimeout(function() { changeSliderValue(slider, direction) }, mouse.interval);
		// }
	}
	//
	// getViewportItemDimensions(items)
	// Gets the dimensions of an item in a viewport.
	// PARAMS
	//  items: The items in a viewport.
	//
	function getViewportItemDimensions(items) {
		var height
			= parseInt(items.css("margin-top"))
			+ items.outerHeight()
			+ parseInt(items.css("margin-top"));

		var width
			= parseInt(items.css("margin-left"))
			+ items.outerWidth()
			+ parseInt(items.css("margin-right"));
		
		return { height: height, width: width };
	}
	//
	// setCounterText(slider)
	// Sets the counter text for the specified slider.
	// PARAMS
	//  slider: A slider.
	//
	function setCounterText(slider) {
		var viewport = slider.data('viewport');
		var items = $(slider.data('viewportChildSelector'), viewport);
		var itemDimensions = getViewportItemDimensions(items);

		var left = parseInt(viewport.css("left"));
		if (isNaN(left)) {
			left = 0;
		}

		var firstElement = Math.round((left / itemDimensions.width) * -1) + 1;
		var lastElement = firstElement + (viewport.data('size') - 1);

		var counterText
			= bpConfig.text.slider.counter
			.replace('{0}', firstElement)
			.replace('{1}', lastElement)
			.replace('{2}', items.length);
		$('span.counter', slider).text(counterText);
	}
	//
	// slide(slider, value)
	// Slides the slider to the specified value.
	// PARAMS
	//  slider: A slider.
	//  value: A value.
	// REMARKS
	//  This function is the event handler for the slider slide and change events.
	//
	function slide(slider, value) {
		var viewport = slider.data('viewport');
		var left = "-" + value + "px";
		viewport.css("left", left);
		setCounterText(slider);
	}
});