﻿(function ($) {

$.fn.mediascope = function (options) {
	var defaults = { size : { height: 100, width: 100 }, // px
					title: 'Zoom',
					containerClassName: 'thumbnails'
					};
	var defaultsZoomedImages = { 
							size : { height: 200, width: 200 }, // px
							source: null,
							title: '',
							closeLabel: '',
							
							renderTop: $.fn.slideshow.createTopBar
						};

	// -------------- member declarations --------------------------------
	
	// arr is an array of objects or a function returning an object
	// the object will be mapped to an image element
	// every member of the object will result in an attribute of the object
	$.fn.mediascope.createDomImagesFromArrayOrFunction = function (arr, sourceArray) {
		if(arr === null) {
			return null;
		}
		// if arr is a function, use this function to create a new array from the source array
		if($.isFunction(arr)) {
			arr = $.map(sourceArray, arr);
		}
		
		// create dom elements
		var container = $('<div />');
		$.each(arr, function () {
			var image = $('<img>');
			for(var key in this) if (this.hasOwnProperty(key)) {
				image.attr(key, this[key]);
			}
			container.append(image);
		});
		
		return container;
	};
	
	
	// --------------------- main call -------------------------------------------
	return this.each(function () {
		var opts = $.extend (defaults, options);
		opts.zoomedImages = $.extend (defaultsZoomedImages, opts.zoomedImages);
		
		var targetElement = $(this);
		
		opts.domRoot = targetElement;
		opts.domImages = targetElement.find('img');
		
		opts.zoomedImages.domRoot = $.fn.mediascope.createDomImagesFromArrayOrFunction( opts.zoomedImages.source, opts.domImages );

		if (opts.domImages.length === 0) {
			throw 'No thumbnail images found';
		}
		
		if(opts.zoomedImages.domRoot === null) {
			opts.title = null;
		}
	
		opts.domRoot.slideshow(opts);
		
		// zooming functionality
		if(opts.zoomedImages.domRoot !== null) {
			opts.zoomedImages.domRoot.addClass('fullsize');
			opts.domRoot.append(opts.zoomedImages.domRoot);
			
			opts.zoomedImages.domImages = opts.zoomedImages.domRoot.find('img');

			if (opts.zoomedImages.domImages.length === 0) {
				throw 'No zoomed images found';
			}

			opts.zoomedImages.domRoot.slideshow(opts.zoomedImages);
			
			// manipulating bottom bar
			var NAVIGATIONBUTTON_WIDTH_HEIGHT = 29; // px :hack: static size
			var BOTTOMMARGIN = 1;
			var POSITIONFIELD_WIDTH = 200;
			opts.zoomedImages.domRoot.find('.navigation').css({
					margin: BOTTOMMARGIN + 'px',
					color: '#4A5865'					
				});
			opts.zoomedImages.domRoot.find('.next').css({
					'float': 'left'
				});
			if(opts.zoomedImages.domImages.length === 1) {
				POSITIONFIELD_WIDTH  = 0;
				NAVIGATIONBUTTON_WIDTH_HEIGHT = 0;
			}
			opts.zoomedImages.domRoot.find('.title').css({
					'margin-left': (NAVIGATIONBUTTON_WIDTH_HEIGHT * 2 + POSITIONFIELD_WIDTH) + 'px',
					'margin-right': '0'
				});
			opts.zoomedImages.domRoot.find('.position').css({
					display: 'block'
				});
			
			// adding window effect			
			var jqmWindow = $('<div class="jqmWindow" />');
			opts.zoomedImages.domRoot.wrapInner(jqmWindow);
			jqmWindow = opts.zoomedImages.domRoot.children('.jqmWindow');
			
			var selector = '.' + opts.containerClassName;
			opts.domRoot.find(selector + ' .title, ' + selector + ' .imagecontainer').css('cursor', 'pointer');
			opts.zoomedImages.domRoot.css('position', 'relative');
			
			var offset = opts.domRoot.offset();
			jqmWindow.css({ 
						display: 'none',
						position: 'absolute',
						top: offset.top + 'px',
						left: (($(window).width() / 2) - (options.zoomedImages.size.width / 2)) + 'px', // aligning jqmwindow to center
						width: options.zoomedImages.size.width + 'px',
						'background-color': '#EEE',
						color: '#333',
						border: '1px solid black',
						padding: '12px',
						'z-index': 300
					});

			var jqmSettings = { 
				toTop: true,
				onShow: function(h) {
					// callback executed when a trigger click. Show notice 
					var offset = $(h.t).offset();
					h.w.css('top', offset.top + 'px');
					h.w.css('left', (($(window).width() / 2) - (options.zoomedImages.size.width / 2)) + 'px');
					h.w.slideDown("slow"); 
				}
			};
			jqmWindow.jqm( jqmSettings );
			
			jqmWindow.jqmAddTrigger(opts.domRoot.find('.thumbnails .title'));
			jqmWindow.jqmAddTrigger(opts.domRoot.find('.thumbnails .imagecontainer'));
			jqmWindow.jqmAddClose(opts.zoomedImages.domRoot.find('.close'));	

            // must be after jqmAddTrigger Calls to keep slide effect
    		var updateZoomedSlideshow = function(event) {
                var activeSlide = $(event.currentTarget).parents('.thumbnails').find('.pager .activeSlide').text();
                $('.jqmWindow .slideshow .bottomBar .pager a:contains("' + activeSlide + '")').click();
            };	
            opts.domRoot.find('.thumbnails .title, .thumbnails .imagecontainer').bind('click', updateZoomedSlideshow);
		}
		
	});
};

}) (jQuery);
