(function( $ ){

	var NAME	= 'dtiSlider';
	var CONFIG;
	var SLIDESHOW, CANVAS;
	
	var defaults = {
		speed	: 500
	}
	
	var _id;
	var _items;
	var _itemCount;
	var _hideImage;
	
	var methods =
	{
		init : function( $xml_path, $config )
		{
			$(this).empty().append('<div class="' + NAME + '">');
			
			CONFIG		= $.extend(defaults, $config);
			SLIDESHOW	= $(this).children('.' + NAME);

			methods.loadData($xml_path);
		},
		
		onBarClick : function()
		{
			var newId = $(this).parent().attr('data-id');
			_items[_id]['bar'].css('display', 'block');
			_items[_id]['barActive'].css('display', 'none');
			_items[newId]['bar'].css('display', 'none');
			_items[newId]['image'].css('display', 'block');
			_items[newId]['barActive'].css('display', 'block');
			
			_hideImage = _items[_id]['image'];
			
			_id = newId;
			
			$.each(_items, function(key, value)
			{
				if(key <= newId)
				{
					value['item'].animate({left: value['left']}, CONFIG.speed, function() { _hideImage.css('display', 'none'); });
				}
				else if(key > newId)
				{
					value['item'].animate({left: value['left'] + 663}, CONFIG.speed, function() { _hideImage.css('display', 'none'); });
				}
			})
		},
		
		onImageClick : function()
		{
			window.location = _items[_id]['link'];
		},
		
		loadData : function($xml_path)
		{
			$.ajax(
				{
					url		: $xml_path,
					dataType: "xml",
					success	: methods.createSlider,
					error	: methods.loadDataError
				}
			);
		},
		
		loadDataError : function()
		{
			alert('ajax load error');
		},
		
		createSlider : function($xml)
		{
			_items = new Array();
			
			SLIDESHOW.append('<div class="canvas">');
			CANVAS = SLIDESHOW.children('.canvas');
			
			_itemCount = 0;
			$($xml).find('item').each(function()
				{
					methods.addItem($(this).text(), _itemCount, $(this).attr("link"));
					_itemCount++;
				}			
			);
			
			_id = _itemCount - 1;
			_items[_id]['image'].css('display', 'block');
			_items[_id]['bar'].css('display', 'none');
			_items[_id]['barActive'].css('display', 'block');
		},
		
		addItem : function($src, $id, $link)
		{
			var image = $('<div class="image">');
			image.append('<img src="' + $src + '.jpg" />');
			image.bind('click', methods.onImageClick);
			
			var bar	= $('<div class="bar">');
			bar.bind('click', methods.onBarClick);
			bar.append('<img src="' + $src + '-bar.png" />');
			
			var barActive = $('<div class="bar-active">');
			barActive.append('<img src="' + $src + '-bar-active.png" />');
			
			var item = $('<div class="item" data-id="' + $id + '">');
			item.append(image);
			item.append(bar);
			item.append(barActive);
			
			var left = 42 * $id;
			item.css('left', left + 'px');
			
			var currItem = new Array();
			currItem['left']		= left;
			currItem['item']		= item;
			currItem['image']		= image;
			currItem['bar']			= bar;
			currItem['barActive']	= barActive;
			currItem['link']		= $link;
			
			_items.push(currItem);
			
			CANVAS.append(item);
		}
	};

	
	
	$.fn.dtiSlider = function( method )
	{
	    if ( methods[method] )
	    {
	    	return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
	    }
	    else if ( typeof method === 'object' || ! method )
	    {
	    	return methods.init.apply( this, arguments );
	    }
	    else
	    {
	    	$.error( 'Method ' +  method + ' does not exist on jQuery.dtiSlider' );
	    }
	};

})( jQuery );