//SVN Base Revision 1100, 2007-10-16

var $jQ;

// Douglas Crockford's sugar funtions; see http://www.crockford.com/javascript/inheritance.html#sugar
Function.prototype.method = function (name, func) {
    this.prototype[name] = func;
    return this;
};
Function.method('inherits', function (parent) {
    var d = {}, p = (this.prototype = new parent());
    this.method('uber', function uber(name) {
        if (!(name in d)) {
            d[name] = 0;
        }        
        var f, r, t = d[name], v = parent.prototype;
        if (t) {
            while (t) {
                v = v.constructor.prototype;
                t -= 1;
            }
            f = v[name];
        } else {
            f = p[name];
            if (f == this[name]) {
                f = v[name];
            }
        }
        d[name] += 1;
        r = f.apply(this, Array.prototype.slice.apply(arguments, [1]));
        d[name] -= 1;
        return r;
    });
    return this;
});

// end sugar section

function Mediascope(rootElement, options) {
	this.createDomImagesFromArray = function(/*array of maps(src,alt)*/ images) {
			var zoomedImageContainer = document.createElement('div');
			for(var a = 0; a < images.length; a++) {
				var img = document.createElement('img');
				img.src = images[a].src;
				img.alt = images[a].alt;
				$jQ(zoomedImageContainer).append($jQ(img));
			}
			zoomedImageContainer = $jQ(zoomedImageContainer);
			return zoomedImageContainer;
		};
		
	var thumbnailImages = rootElement.find('img');
	var zoomedImages = [];
	
	if(options.zoomedImages)
	{
		if(!options.zoomedImageSize) {
			throw "No image size supplied for zoomed images";
		}
		
		if(options.zoomedImages instanceof Function) {
			thumbnailImages.each(function() {			
				zoomedImages.push(options.zoomedImages(this));
				});
		} else if(options.zoomedImages instanceof Array) {
			zoomedImages = options.zoomedImages;
		} else {
			throw "options.zoomedImages should be an Array or a Function";
		}
	}
	
	new Slideshow(rootElement, options.height, options.width);
	if(options.zoomedImages) {
		var imageContainer = this.createDomImagesFromArray(zoomedImages)
		imageContainer.addClass('jqmWindow');
		rootElement.append(imageContainer);
		
		new Slideshow(imageContainer, options.zoomedImageSize.height, options.zoomedImageSize.width, true);
		
		var thumbnailRoot = rootElement.find('.mediascopeThumbnailSlideshow');
		
		imageContainer.css('display', 'none').css('position', 'fixed').css('top', '17%').css('left', '50%').css('margin-left', '-' + (options.zoomedImageSize.width / 2) + 'px').css('width',  + options.zoomedImageSize.width + 'px').css('background-color', '#EEE').css('color', '#333').css('border', '1px solid black').css('padding', '12px');		
		imageContainer.css("position", "fixed");
		imageContainer.jqm( { onShow: function(h) {
					/* callback executed when a trigger click. Show notice */
					h.w.slideDown("slow"); 
				},
				onHide: function(h) {
					h.w.slideUp("slow", function() { if(h.o) h.o.remove(); }); 
				}
			} ).jqmAddTrigger(rootElement.find('.mediascopeZoom')).jqmAddClose(imageContainer.find('.mediascopeClose')).jqDrag('.mediascopeTop');
		imageContainer.find('.mediascopeTop').css('cursor', 'move');
		
		var updateZoomedSlideshow = function() {
				var activeSlide = thumbnailRoot.find('.mediascopePager .activeSlide').text();
				imageContainer.find('.mediascopePager a:contains("' + activeSlide + '")').click();
			};
		
		thumbnailRoot.find('.mediascopeZoom').bind('click', updateZoomedSlideshow);
		
		rootElement.find('.mediascopeZoom').css('cursor', 'pointer');
	} else {
		rootElement.find('.mediascopeZoom').each(function() {
				var rootElement = $jQ(this);
				var children = rootElement.children();
				rootElement.empty();
				rootElement.replaceWith(children);
			});
	}
	
	return this;

};
	
function Slideshow(/*jqueryElement*/ rootElement, /*integer*/imageHeight, /*integer*/ imageWidth, /*boolean*/ isZoomed) {

		this.renderSlideshow = function(/*jqueryElement*/ rootElement, /*integer*/imageHeight, /*integer*/ imageWidth) {
				// constructor
				var originalHeight = rootElement.height();
				var originalWidth = rootElement.width();
				var resizeFactor = 1; // do not resize by default
				
				if(imageHeight && (imageHeight.constructor !== Number || imageHeight === undefined)) {
					imageHeight = rootElement.height(); // setting default value if none is set
				} else {
					resizeFactor = imageHeight / originalHeight; // if value is set, calculate resize factor
				}
				if(imageWidth && (imageWidth.constructor !== Number || imageWidth === undefined)) {
					imageWidth = rootElement.width() * resizeFactor; // if no value is set, use default value and resize factor
				} else if(resizeFactor === 1) { // if resizeFactor was not used so far ...
					resizeFactor = imageHeight / originalWidth; // ... calculate resizeFactor
					imageHeight = imageHeight * resizeFactor; // and use it with already defined imageHeight
				}
				
				var heightInPx = imageHeight + 'px';
				var widthInPx = imageWidth + 'px';
				
				// creating slideshow frame
				var picContainer = document.createElement('div');
				var children = rootElement.children().empty();
				$jQ(picContainer).append(children);
				rootElement.append(picContainer);
				picContainer = $jQ(picContainer);
				picContainer.addClass('pics');
				
				var topBarInfo = this.slideshowRenderer.createTopBar();
				var bottomBarInfo = this.slideshowRenderer.createBottomBar();
				rootElement = this.slideshowRenderer.reorganizeSlideshow();
				
				rootElement.css('overflow', 'hidden').css('position', 'relative');
				rootElement.css('height', (imageHeight + bottomBarInfo.height + topBarInfo.height ) + 'px').css('width', widthInPx);

				// prepare html structure for use of cycle plugin
				picContainer.addClass('pics');
				picContainer.css('height', heightInPx).css('width', widthInPx);
				picContainer.css('padding', '0').css('margin', '0');
				picContainer.css('border', 'none');
				
				var images = picContainer.find('img');
				images.css('padding', '0').css('margin', '0').css('top', '0').css('left', '0');
				images.css('height', heightInPx).css('width', widthInPx);

				this.slideshowRenderer.enableCycleEffect(rootElement);

				return this;
			};
					
		var hasZoomableImages = true;
		var hasZoomButton = (isZoomed === false && hasZoomableImages);
		
		if(isZoomed === true) {
			this.slideshowRenderer = new ZoomedSlideshowRenderer();
		} else {
			this.slideshowRenderer = new ThumbnailSlideshowRenderer(hasZoomButton);
		}
		this.slideshowRenderer.setRootElement(rootElement);

		this.renderSlideshow(rootElement, imageHeight, imageWidth, hasZoomButton);
		
		return this;
	};
	
function SlideshowRenderer() {
		this.setRootElement = function(/*jqueryElement*/rootElement) {
				this.rootElement = rootElement;
				return this;
			};
		this.defaultSlideEffect = function() {
				return { fx: 'scrollHorz', timeout: 0, after: this.onNextSlide };
			};
		this.createBottomBar = function() { return { height: 0 }; };
		this.createTopBar = function() { return { height: 0 }; };
		this.reorganizeSlideshow  = function() { return this.rootElement; };
		this.enableCycleEffect  = function() { return this; };
		this.onNextSlide = function(e0, e1, opts) {  // static! this-object 
				var currentSlide = opts.currSlide;
				var nextSlide = opts.nextSlide;
				var rootElement = $jQ(this).parents('.mediascopeThumbnailSlideshow, .mediascopeZoomedSlideshow');
				
				if(currentSlide === 0) { // current slide is first slide
					rootElement.find('.mediascopePrev').css('display', 'none');
				} else {
					rootElement.find('.mediascopePrev').css('display', 'block');
				}
				
				if(nextSlide < currentSlide) { // currentSlide is last slide
					rootElement.find('.mediascopeNext').css('display', 'none');
				} else {
					rootElement.find('.mediascopeNext').css('display', 'block');
				}
				
				return this;
			};
		return this;
	};

function ThumbnailSlideshowRenderer(/*boolean*/ canZoom) { this.canZoom = true; return this; }; ThumbnailSlideshowRenderer.inherits(SlideshowRenderer);
ThumbnailSlideshowRenderer.method('createBottomBar', function() {
		var NAVIGATIONBUTTON_WIDTH_HEIGHT = 29;
		if(this.rootElement.find('.pics img').length > 1) {
				
			// creating buttons
			var navBar = $jQ(document.createElement('div'));
			navBar.addClass('mediascopeNav');
			navBar.css('position', 'relative').css('background', 'transparent url(_img/img_switch_bg_small.gif) repeat-x scroll 0pt').css('height', '20px');


			var prevButton = $jQ(document.createElement('a'));
			prevButton.addClass('mediascopePrev');
			prevButton.css('position', 'absolute').css('top', '0').css('left', '0').css('width', NAVIGATIONBUTTON_WIDTH_HEIGHT + 'px');
			prevButton.attr('href', '#');
			prevButton.append('<img src="_img/img_switch_arrow_l.gif" />');
			
			var zoomButton = $jQ('<div class="mediascopeZoom">Zoom</div>');
			zoomButton.css('text-align', 'center').css('align', 'center').css('margin-left', NAVIGATIONBUTTON_WIDTH_HEIGHT + 'px').css('margin-right', NAVIGATIONBUTTON_WIDTH_HEIGHT + 'px').css('font-family', 'Helvetica, Arial, Verdana, sans-serif').css('color', '#4982C1');;
			
			var nextButton = $jQ(document.createElement('a'));
			nextButton.addClass('mediascopeNext');
			nextButton.css('position', 'absolute').css('top', '0').css('right', '0').css('width', NAVIGATIONBUTTON_WIDTH_HEIGHT + 'px');
			nextButton.attr('href', '#');
			nextButton.append('<img src="_img/img_switch_arrow_r.gif" />');		

			navBar.append(prevButton);
			if(this.canZoom === true) {
				navBar.append(zoomButton);
			} else {
				navBar.append('&nbsp;');
			}
			navBar.append(nextButton);
			
			this.rootElement.append(navBar);
			navBar.find('img').css('border', 'none');
			
			$jQ('<div class="mediascopePager"></div>').appendTo(this.rootElement).css('display', 'none');

			return { height: NAVIGATIONBUTTON_WIDTH_HEIGHT };
		}
		return { height: 0 }
	});
ThumbnailSlideshowRenderer.method('reorganizeSlideshow', function() {
		this.rootElement.wrapInner('<div class="mediascopeThumbnailSlideshow"></div>');

		if(this.canZoom !== false) {
			var pictureContainer = this.rootElement.find('.pics');
			pictureContainer.wrap('<div class="mediascopeZoom"></div>');
			pictureContainer.find('img').css('border', 'none');
		}
		
		return this.rootElement.find('.mediascopeThumbnailSlideshow');
	});
ThumbnailSlideshowRenderer.method('enableCycleEffect', function() {
		var thumbnailSlideshow = this.rootElement.find('.mediascopeThumbnailSlideshow');
		
		var slideEffect = this.defaultSlideEffect();
		slideEffect.prev = thumbnailSlideshow.find('.mediascopePrev');
		slideEffect.next = thumbnailSlideshow.find('.mediascopeNext');
		slideEffect.pager = thumbnailSlideshow.find('.mediascopePager');
		
		thumbnailSlideshow.find('.pics').cycle(slideEffect);
	});
	
	
function ZoomedSlideshowRenderer() { return this; };	ZoomedSlideshowRenderer.inherits(SlideshowRenderer);
ZoomedSlideshowRenderer.method('createBottomBar', function(rootElement) {
		var NAVIGATIONBUTTON_WIDTH_HEIGHT = 29;
		var TOPBOTTOMMARGIN = 1;
		var POSITIONFIELD_WIDTH = 200;
				
		if(this.rootElement.find('.pics img').length > 1) {
			// creating buttons/elements
			var navBar = $jQ(document.createElement('div'));
			navBar.addClass('mediascopeNav');
			navBar.css('margin', TOPBOTTOMMARGIN + 'px').css('position', 'relative').css('background', 'transparent url(_img/img_switch_bg_small.gif) repeat-x scroll 0').css('font-family', 'Helvetica, Arial, Verdana, sans-serif').css('color', '#4A5865');

			var prevButton = $jQ(document.createElement('a'));
			prevButton.addClass('mediascopePrev');
			prevButton.css('position', 'absolute').css('top', '0').css('left', '0').css('width', NAVIGATIONBUTTON_WIDTH_HEIGHT + 'px');
			prevButton.attr('href', '#');
			prevButton.append('<img src="_img/img_switch_arrow_l.gif" />');
			
			var positionInfo = $jQ(document.createElement('span'));
			positionInfo.addClass('mediascopePosition');
			positionInfo.css('text-align', 'center').css('align', 'center').css('margin-left', NAVIGATIONBUTTON_WIDTH_HEIGHT + 'px').css('width', POSITIONFIELD_WIDTH + 'px').css('float', 'left');
			positionInfo.append('1/1');
			
			var nextButton = $jQ(document.createElement('a'));
			nextButton.addClass('mediascopeNext');
			nextButton.css('position', 'absolute').css('top', '0').css('left', (POSITIONFIELD_WIDTH + NAVIGATIONBUTTON_WIDTH_HEIGHT) + 'px').css('width', NAVIGATIONBUTTON_WIDTH_HEIGHT + 'px');
			nextButton.attr('href', '#');
			nextButton.append('<img src="_img/img_switch_arrow_r.gif" />');		

			var titleInfo = $jQ(document.createElement('div'));
			titleInfo.addClass('mediascopeTitle');
			titleInfo.css('text-align', 'center').css('align', 'center').css('margin-left', (NAVIGATIONBUTTON_WIDTH_HEIGHT * 2 + POSITIONFIELD_WIDTH) + 'px').css('margin-right', '0');
			titleInfo.append('Schweisshandschuhe');

			navBar.append(prevButton);
			navBar.append(positionInfo);
			navBar.append(nextButton);
			navBar.append(titleInfo);
			
			navBar.find('img').css('border', 'none');
			
			this.rootElement.append(navBar);
			var zoomedImagePager = $jQ('<div class="mediascopePager"></div>').appendTo(this.rootElement).css('display', 'none');
			
			return { height: NAVIGATIONBUTTON_WIDTH_HEIGHT + TOPBOTTOMMARGIN * 2 };
		}
		return { height: 0 };
	});
ZoomedSlideshowRenderer.method('createTopBar', function(rootElement) {
		var TOPBAR_HEIGHT = 29;
		var TOPBOTTOMMARGIN = 1;
		
		// creating buttons/elements
		var topBar = $jQ(document.createElement('div'));
		topBar.addClass('mediascopeTop');
		topBar.css('margin', TOPBOTTOMMARGIN + 'px').css('position', 'relative').css('background', 'transparent url(_img/topbg.jpg) repeat-x scroll 0').css('font-family', 'Helvetica, Arial, Verdana, sans-serif').css('color', '#4A5865');
		
		topBar.html('<div>&nbsp;</div>');
		
		var closeButton = $jQ(document.createElement('a'));
		closeButton.addClass('mediascopeClose');
		closeButton.css('position', 'absolute').css('top', '0').css('right', '10px').css('text-align', 'right').css('align', 'right').css('text-decoration', 'none').css('color', '#4A5865'); // removed width parameter
		//closeButton.text("schliessen ");	//sid
		closeButton.attr('href', '#');
		closeButton.append('<img src="/banner/images/design/closeicon.jpg" alt="" />');
		
		topBar.append(closeButton);
		
		topBar.find('img').css('border', 'none');
		
		this.rootElement.prepend(topBar);
		
		return { height: TOPBAR_HEIGHT + TOPBOTTOMMARGIN * 2 };
	});
ZoomedSlideshowRenderer.method('reorganizeSlideshow', function(rootElement) {
		this.rootElement.wrapInner('<div class="mediascopeZoomedSlideshow"></div>');
		return this.rootElement.find('.mediascopeZoomedSlideshow');
	});
ZoomedSlideshowRenderer.method('enableCycleEffect', function(rootElement) {
		var zoomedSlideshow = this.rootElement.find('.mediascopeZoomedSlideshow');

		var slideEffect = this.defaultSlideEffect();
		slideEffect.prev = zoomedSlideshow.find('.mediascopePrev');
		slideEffect.next = zoomedSlideshow.find('.mediascopeNext');
		slideEffect.pager = zoomedSlideshow.find('.mediascopePager');

		rootElement.find('.pics').cycle(slideEffect);
	});
ZoomedSlideshowRenderer.method('onNextSlide', function(e0, e1, opts) {
		// :hack: found no other possibility to call super method
		var uberSlideshowRenderer = new SlideshowRenderer();
		if(uberSlideshowRenderer.onNextSlide && uberSlideshowRenderer.onNextSlide instanceof Function)
		{
			uberSlideshowRenderer.onNextSlide.apply(this, arguments);
		}
		
		var currentSlide  = opts.currSlide;
		var maxSlides = opts.maxSlides;
		
		var rootElement = $jQ(this).parents('.mediascopeZoomedSlideshow');
		
		var navBar = rootElement.find('.mediascopeNav');
		navBar.find('.mediascopeTitle').text($jQ(this).attr('alt'));
		navBar.find('.mediascopePosition').text( (currentSlide + 1) + '/' + maxSlides );
		return this;
	});
	

// Mediascope jQuery plugin 

jQuery.fn.mediascope = function(options) {
	$jQ = jQuery.noConflict();
	return this.each(function() {
		Mediascope($jQ(this), options);
		});
	};

