(function($){
	var element;
	var elementName;
	var dataArray = new Array();
	var largerDataArray = new Array();
	var imagePointer = 0;
	var numbersOfItems = 0;
	var options = {};
	var loader;
	var cursor;
	
	function parseData(isData) {
		
		imagePointer = 0;
		var i = 0;
		
		$('<div>' + isData + '</div>').find('img').each(function() {
			
			dataArray[i] = $(this).data('isImage' + elementName,i);
			
			dataArray[i] = $(this).css('position','absolute').css('left','0').css('top','0');
			i++;
		})
		numberOfItems = i;
		
		if(numberOfItems > 1) {
			element.click(function(){nextImage()});
			createDots().appendTo(options['boxesElement'].html(''));
			element.css('cursor','pointer');
			element.hover(function(){cursor.fadeIn(300);}, function(){cursor.fadeOut(300);});
		}
	}
	
	function loadLargerPhotos() {
		if(options['largerPhotos'] != '') {
			$.get( options['largerPhotos'], function(data){
				var i = 0;
				$('<div>' + data + '</div>').find('img').each(function() {
					var element = $(this)
					largerDataArray[i] = element.css('position','absolute').css('left','0').css('top','0');
					dataArray[i].click(function(){
						largerDataArray[i].appendTo($('#shop-item-description'));
					});
					i++;
				})
				
			});
		}
	}
	
	function nextImage() {
		old = imagePointer;
		imagePointer = (++imagePointer) % numberOfItems;
		showImage(old, imagePointer);
	}
	
	function prevImage() {
		old = imagePointer;
		imagePointer = (--imagePointer + numberOfItems) % numberOfItems;
		showImage(old, imagePointer);
	}
	
	function createDots() {
		var dots = $('<div class="dots"></div>');
		for(var i = 0; i < numberOfItems; i++) {
			var dot = null;
			if(i == imagePointer)
				dot = $('<span class="' + elementName + 'Browser"><img src="' + options['activeImage'] + '" /></span>');
			else {
				dot = $('<span id="' +elementName + 'Browser' + i + '" class="' + elementName + 'Browser"><img src="' + options['inActiveImage'] + '" title="' + options['picture'] + ' ' + (i+1) + '" /></span>');
				dot.css('cursor','pointer');
				dot.find('img').data('number', ""+i);
				dot.find('img').click(function(e){
					var a = $(e.target).data('number');
					new showImage(imagePointer, a);
				});
			}
			dot.appendTo(dots);
		}
		return dots;
		
	}
	
	function showImage(prevNumber,newNumber) {
		
		loader.fadeIn();
		element.html('');
		loader.appendTo(element);
		
		var older = (dataArray[prevNumber]).css({'opacity':'1', 'zIndex':'1', 'cursor':'pointer'});
		var newer = (dataArray[newNumber] ).css({'opacity':'1', 'zIndex':'0', 'cursor':'pointer'});
		cursor.appendTo(element);
		older.appendTo(element);
		newer.appendTo(element);
		loader.fadeIn();
		newer.batchImageLoad({
			loadingCompleteCallback: function(){
				// Centering
				newer.css('top',((element.outerHeight() / 2) - (newer.outerHeight() / 2)) + 'px' );
				newer.css('left',((element.outerWidth() / 2) - (newer.outerWidth() / 2)) + 'px' );
				loader.stop().fadeOut();
				older.stop(true).animate({
				    opacity: 0
				  }, 400, function(){
					  newer.css('zIndex','');
					  older.css('zIndex','');
					  newer.fadeIn();
					  older.remove();
					  }
				);
				
			}
		});
		imagePointer = newNumber;
		createDots().appendTo(options['boxesElement'].html(''));
	}
	
    $.fn.extend({
    	
        isSlideShow: function(option) {

            var defaults = {
                'boxesElement': '', // Placement for boxes
                'activeImage': '',
                'inActiveImage': '',
                'picture':'Show picture',
                'nextImage':'',
                'loadImage':'',
                'baseUrl' : '',
                'largerPhotos' : ''
                	
            };
           
            options = $.extend(defaults, option);

            return this.each(function() {
                var obj = $(this);
                element = obj;
                elementName = obj.attr('id').substring('_isElement_'.length);
                element.css('position', 'relative');
                cursor = $('<div id="imagebrowser" />').css({
                	zIndex:100000,
                	left: (element.width() * 0.75) + 'px',
                	position: 'absolute',
                	display: 'none',
                	backgroundRepeat: 'no-repeat',
                	backgroundPosition: 'right center',
                	//backgroundImage: 'url(' + options['nextImage'] + ')',
                	width: (element.width()/4) + 'px',
                	height: element.height() + 'px'
                });
                
                cursor.appendTo(element);
                
                var url;
                if(options['baseUrl'] == '')
                	url = (document.location.href).split('?')[0] + "?_is._view=" + elementName + "&" + elementName + ".single=0&templateFile=url.html";
                else
                	url = options['baseUrl'] + "?_is._view=" + elementName + "&" + elementName + ".single=0";;
                
                loader = $('<div id="imageLoader"><img src="' + options['loadImage'] + '" /><br /></div>');
                loader.appendTo(element);
                loader.css('top', (obj.outerHeight()/2-loader.outerHeight()/2) + 'px');
                loader.css('left', (obj.outerWidth()/2-loader.outerWidth()/2) + 'px');
                
                $.get( url, function(data){
                	   parseData(data);
                });
                
                return;
            });
        }
    
    });
})(jQuery);