(function ($) {
$.fn.slideshow = function (options) {
	var defaults = { size : { height: 100, width: 100 }, // px
					icons: {
						previous: '_img/img_switch_arrow_l.gif',
						next: '_img/img_switch_arrow_r.gif',
						close: '_img/closeicon.jpg',
						'background-top': '_img/topbg.jpg',
						'background-bottom': '_img/img_switch_bg_small.gif'
						
					},

						containerClassName: 'slideshow',
						title: null,
						closeLabel: 'Close',
                        flexibleHeight: false,
						
						domImages: null,
						domRoot: null,
						
						renderTop: $.fn.slideshow.defaultEmptyFunction,
						renderBottom: $.fn.slideshow.createBottomBar,
						
						slideEffect: { fx: 'scrollHorz', timeout: 1, pager: null }
					}; 
	var opts = $.extend (defaults, options);
	
	var targetElement = $(this);
	var slideshowTitle = opts.title;
	
	// sanity checks
	if(opts.domImages === null) {
		throw 'domImages must not be null.';
	}
	if(opts.domRoot === null) {
		throw 'domRoot must not be null.';
	}
	
	opts.domImages = $($.grep(opts.domImages, function(element, counter) {
		var image = $(element);
        if( image.attr('src') === null || image.attr('src') === undefined )
        {
            image.remove();
            return false;
        } else {
            return true;
        }
	}));	
	
	if(options.flexibleHeight) {
	    options.size.width = $(opts.domImages[0]).width();
		options.size.height = $(opts.domImages[0]).height();
	} else {
        if(typeof(opts.size.height) === "undefined" || opts.size.height.constructor !== Number || opts.size.height === undefined) {
            throw 'options.size.height must be a valid Number!';
        }
        if(typeof(opts.size.width) === "undefined" || opts.size.width.constructor !== Number || opts.size.width === undefined) {
            throw 'options.size.width must be a valid Number!';
        }
	}
    
    if(opts.size.height === 0) {
        throw 'options.size.height must not be zero!';
    }
    if(opts.size.width === 0) {
        throw 'options.size.width must not be zero!';
    }
    

    opts.size.heightInPx = opts.size.height + 'px';
    opts.size.widthInPx = opts.size.width + 'px';
	
	// dom manipulation
	
	var imageContainer = $('<div />');
	imageContainer.addClass('imagecontainer');	
	
	var children = targetElement.children();
	targetElement.empty();
	imageContainer.append( children );
	
	targetElement.append(imageContainer);
	
	imageContainer.css( 
		{ 
			overflow: 'hidden', 
			position: 'relative',
			height: options.size.heightInPx,
			width: options.size.widthInPx,
			padding: '0',
			margin: '0'
		} );
				
	imageContainer.wrap('<div />');
	var slideshowContainer = imageContainer.parent();
	slideshowContainer.addClass(opts.containerClassName);
	
	// framing the slideshow 
	var topbar = opts.renderTop(opts);
	slideshowContainer.prepend(topbar.domRoot);

	var bottombar = opts.renderBottom(opts);

	slideshowContainer.append(bottombar.domRoot);

	slideshowContainer.css({ 
			overflow: 'hidden', 
			position: 'relative',
			height: options.size.height + topbar.size.height + bottombar.size.height + 'px',
			width: options.size.widthInPx
		} );

	opts.domImages.css( 
					{ padding: '0',
						margin: '0',
						top: '0',
						left: '0',
						width: opts.size.widthInPx,
						height: opts.size.heightInPx
					});

					
	opts.slideEffect.prev = targetElement.find('.previous');
	opts.slideEffect.next = targetElement.find('.next');
	opts.slideEffect.timeout = 0;

	opts.slideEffect.after = function(e0, e1, opts) {  // static! this-object 
		var currentSlide = opts.currSlide;
		var nextSlide = opts.nextSlide;
		var maxSlides = opts.maxSlides;
		var rootElement = slideshowContainer; // using function scope
		
		var previousElements = rootElement.find('.previous');
		if(currentSlide === 0) { // current slide is first slide
			previousElements.css('visibility', 'hidden');
		} else {
			previousElements.css('visibility', 'visible');
		}
		
		var nextElements = rootElement.find('.next');
		if(nextSlide < currentSlide) { // currentSlide is last slide
			nextElements.css('visibility', 'hidden');
		} else {
			nextElements.css('visibility', 'visible');
		}
		
		var navBar = bottombar.domRoot;
		if (slideshowTitle === '') {
            var imageTitle = $(this).attr('alt');
            if(imageTitle === null || imageTitle === undefined)
            {
                imageTitle = '';
            }
            navBar.find('.title').text(imageTitle);
		}
        if(navBar) {
            navBar.find('.position').text( (currentSlide + 1) + '/' + maxSlides );
        }

		return this;
	};
	
    opts.slideEffect.pager = targetElement.find('.pager');

	imageContainer.cycle(opts.slideEffect);
	
	return targetElement;
};

$.fn.slideshow.defaultEmptyFunction = function() { 
	return { 
			size: { 
				height: 0, width: 0
				}
			};
};

$.fn.slideshow.createBottomBar = function (options) {

	var targetElement = $(this);
	var returnObject = { 
						size: { 
							height: 0, width: 0
						},
						domRoot: null
					};
	
	if (options.domImages.length === 0) {
		return returnObject;
	}
	
	var NAVIGATIONBUTTON_WIDTH_HEIGHT = 29; // px :hack: static size
	var BOTTOMMARGIN = 1;
	var POSITIONFIELD_WIDTH = 200;
	var isVisible = false;
	
	returnObject.domRoot = $('<div class="bottomBar" />');
	var navBar = $('<div class="navigation" />');

	navBar.css( { position: 'relative', 
					background: 'transparent url(' + options.icons['background-bottom'] + ') repeat-x scroll 0pt',
					height: '20px' 
				} );
	returnObject.domRoot.append(navBar);
    
    // pager will be used to access specific image
	var pager = $('<div class="pager"></div>');
    pager.css( 'display', 'none' );
	returnObject.domRoot.append(pager);

	var prevButton = null;
	if (options.domImages.length > 1) {
		prevButton = $('<a href="#" class="previous"><img src="' + options.icons.previous + '" /></a>');
		prevButton.css( { 
						'float': 'left',
						width: NAVIGATIONBUTTON_WIDTH_HEIGHT + 'px' 
						});
		isVisible = true;
	}
	navBar.append(prevButton);
	
	var positionInfo = null;
	if (options.domImages.length > 1) {
			positionInfo = $('<span class="position">1/1</span>');
			positionInfo.css({ 
						'text-align': 'center',
						align: 'center',
						'margin-left': NAVIGATIONBUTTON_WIDTH_HEIGHT + 'px',
						width: POSITIONFIELD_WIDTH + 'px',
						'float': 'left',
						display: 'none'
					});
	}
	navBar.append(positionInfo);

	var nextButton = null;
	if (options.domImages.length > 1) {
		nextButton = $('<a class="next" href="#"><img src="' + options.icons.next + '" /></a>');
		nextButton.css({ 'float': 'right',
						width: NAVIGATIONBUTTON_WIDTH_HEIGHT + 'px'
					});
		isVisible = true;
	}
	navBar.append(nextButton);

	var title = options.title;
	if ($.isFunction(options.title)) {
		title = options.title();
	}
	if(title === '') {
		
		title = $(options.domImages).attr('alt');
	}
	var titleElement = $('<div class="title">' + title + '</div>');
	if(title !== null && (title !== '' || options.domImages.length > 1)) {
		titleElement.css({ 
						'text-align': 'center',
						align: 'center',
						'margin-left': NAVIGATIONBUTTON_WIDTH_HEIGHT + 'px',
						'margin-right': NAVIGATIONBUTTON_WIDTH_HEIGHT + 'px',
						'font-family': 'Helvetica, Arial, Verdana, sans-serif',
						color: '#8B7861'
					});
		isVisible = true;
		navBar.append(titleElement);
	}

	navBar.find('img').css('border', 'none');


	if(isVisible === true) {
		returnObject.size.height = NAVIGATIONBUTTON_WIDTH_HEIGHT;
	}
	
	return returnObject;
};

$.fn.slideshow.createTopBar = function(options) {
	var targetElement = $(this);
	var returnObject = { 
						size: { 
							height: 0, width: 0
						},
						domRoot: null
					};
	
	if (options.domImages.length === 0) {
		return returnObject;
	}
	
	var TOPBAR_HEIGHT = 29; // px :hack: static size
	var TOPMARGIN = 1;
	
	returnObject.domRoot = $('<div class="topbar"></div>');
	var topBar = $('<div>&nbsp;</div>');
	returnObject.domRoot.append(topBar);
	topBar.css( {
					margin: TOPMARGIN + 'px',
					position: 'relative',
					background: 'transparent url(' + options.icons['background-top'] + ') repeat-x scroll 0',
					'font-family': 'Helvetica, Arial, Verdana, sans-serif',
					color: '#4A5865'
				} );
	
		
	// creating buttons/elements
	
	var closeButton = $('<a class="close" href="#">' + options.closeLabel + ' <img src="' + options.icons.close + '" /></a>');
	closeButton.css( { 
					position: 'absolute',
					top: '0',
					right: '10px', 
					'text-align': 'right',
					align: 'right',
					'text-decoration': 'none',
					color: '#4A5865' });
	
	topBar.append(closeButton);
	
	topBar.find('img').css('border', 'none');
		
	returnObject.size.height = TOPBAR_HEIGHT + TOPMARGIN * 2;
	return returnObject;
};

}) (jQuery);