/**************************************************************

	Script	: slideGallery
	Version	: 1.0
	Authors	: Sebastian Wolf
	Copyright	: 2008 Kuse.de - Werbeagentur

	-> getOptions // All Options
	-> Init
		-> addAllEvents
		-> initThumbnails
			-> posThumbnails
				-> checkScroll
		-> changeImage
			-> scroller
			-> resizeImage
		-> SlideIn
		-> SlideOut
		-> initDragArrows
		-> windowLoaded
		-> windowWidth

**************************************************************/

var SlideGallery = new Class({

	getOptions: function(){
		return {
			imageForename: '',
			startImage: 0,
			imageLength: 0,

			mainImage: $('BackgroundImage'),
            imageContainer: $('imageContainer'),
			titleImage: $$('.galleryTitle img'),

			slideDuration: 500,
			thumbnailRightMargin: 7,
			fullImagePath: 'images/full/',
            thumbnailPath: 'images/thumbnails/'
		};
 	},

	initialize: function(options){

		// Options
		this.setOptions(this.getOptions(), options);
		this.toolbarIn = true;

		// Setze Aktives FullImage
		this.activeImage = 0;
		this.activeImage = this.options.startImage;
	   	this.options.mainImage.src = this.options.fullImagePath + this.options.imageForename + this.activeImage + '.jpg'

		// Definiere Images
		var i = 0;
		this.images = new Array();
		for(i; i < this.options.imageLength; i++) {
			this.images[i] = this.options.imageForename + i + '.jpg';
		}

		// Erstelle Thumbnails mit initThumbnails

		//alert($$('.galleryTitle img'));
		this.initThumbnails();


		// Back Add Eventhandler
		this.addAllEvents();

		// Wenn Internet Explorer Dragable Back / Next Image
  		if(Browser.Engine.trident)this.initDragArrows();
		// Wenn Internet Explorer 6 resizeImage
        if(Browser.Engine.trident && Browser.Engine.version < 7) this.resizeImage();
	},

	addAllEvents: function() {

		// on resize
        window.addEvent('resize', function(e){
			this.checkScrollFunction = this.checkScroll.delay(10, this);
               if(this.ThumbsWidth > this.windowWidth()) {
				this.options.imageContainer.setStyle('width', this.thumbnailLeft + this.thumbnails[lastThumb].width.toInt() + this.options.thumbnailRightMargin);
			} else {
				this.options.imageContainer.setStyle('width', this.windowWidth());
			}
			if(Browser.Engine.trident && Browser.Engine.version < 7) {
				this.resizeImage();
			}
		}.bind(this));

		//Slide Out
        this.toggleClick = $('GalleryToggle').addEvent('click', function(e){
			this.slideOut();
		}.bind(this));

		// On Load
		window.addEvent('load', function(e) {
			//console.debug('window Load 1mal!');
			this.windowLoaded();
		}.bind(this));


		// Image Back
	   	$('ImgBack').addEvent('click', function(e){
			this.changeImage('back');
		}.bind(this));
		// Image Next
	    $('ImgForward').addEvent('click', function(e){
				this.changeImage('next');
		}.bind(this));

	},

	// lade Thumbnails / InitThumbnails
	initThumbnails: function() {
        this.thumbnails = new Array();
		this.thumbnailLeft = 0;


		//console.debug('initThumbnails');
        for(i = 0; i < this.options.imageLength; i++) {
			this.thumbnails[i] = new Element('img');
            this.thumbnails[i].src = this.options.thumbnailPath + this.images[i];

            if(i == this.options.startImage) {
				this.thumbnails[i].id = 'Active';
			}
			this.options.imageContainer.appendChild(this.thumbnails[i]);
		}

		// Add Eventhandler
        this.thumbnails.each(function(el,i){
            el.addEvent('click', function(e){
				this.changeImage(i);
			}.bind(this));
		}.bind(this));

		lastThumb = this.options.imageLength-1;

		this.initPosThumbnails();
	},

 	initPosThumbnails: function() {

		this.thumbLoaded = true;

		for(i = 0; i < this.options.imageLength; i++) {
			//alert(this.thumbnails[i].getWidth());
			//console.debug(this.thumbnails[i].getWidth());
			if(!this.thumbnails[i].getWidth().toInt() || this.thumbnails[i].getHeight().toInt() != 40 || this.thumbnails[i].getWidth().toInt() == "undefinded") this.thumbLoaded = false;
		}

		if(this.thumbLoaded === false) {
			//alert('initPosThumbnails false');
			this.initPosThumbnails.delay(100, this);
		} else {
			//alert('initPosThumbnails true');
			this.thumbnailLeft += $('TitleImage').getStyle('width').toInt() + 20; // �berschrift abstand
			this.posThumbnails();
		}

	},

	// Positioniere Thumbnails
	posThumbnails: function() {
		//console.debug('posThumbnails');
		for(i = 0; i < this.options.imageLength; i++) {
			if(i > 0) {
				preEl = i - 1;
				this.thumbnailLeft += this.thumbnails[preEl].width.toInt() + this.options.thumbnailRightMargin;
			}
			this.thumbnails[i].setStyle('left', this.thumbnailLeft + 'px');
		}

		// ImageContainer Width
		lastThumb = this.options.imageLength - 1;

		this.ThumbsWidth = this.thumbnailLeft + this.thumbnails[lastThumb].width.toInt() + this.options.thumbnailRightMargin;

		if(this.ThumbsWidth > this.windowWidth()) {
			this.options.imageContainer.setStyle('width', this.thumbnailLeft + this.thumbnails[lastThumb].width.toInt() + this.options.thumbnailRightMargin);
		} else {
			this.options.imageContainer.setStyle('width', this.windowWidth());
		}


	   	this.checkScroll();
	},

	// Ueberprueft ob eine Scrollbar notwendig ist um Thumbnails zu zeigen
	checkScroll: function() {
	    //console.debug('checkScroll');
		// Layout nach Scrollbar anpassen
		if(this.options.imageContainer.scrollWidth > document.body.clientWidth) {
			this.options.imageContainer.style.height = "71px";
            $('imageScroller').style.height = "71px";
			this.scroll = true;
			this.toolbarTop = 93;;
		} else {
			this.options.imageContainer.style.height = "54px";
            $('imageScroller').style.height = "54px";
			this.scroll = false;
			this.toolbarTop = 76;
		}

		// GalleryToolbar nach Scrollbar positionieren
		if(this.toolbarIn && $('GalleryToolbar').getStyle('top').toInt() != this.toolbarTop) {
			$('GalleryToolbar').setStyle('top', this.toolbarTop);
		}

		// GalleryToolbar background-Image Zentrieren
		if(this.toolbarIn) {
			$('GalleryToggle').setStyle('background-position', this.windowWidth()/2-40+'px 7px');
		} else {
			$('GalleryToggle').setStyle('background-position', this.windowWidth()/2-40+'px -10px');
		}
	},

	// scrollt zum Aktiven Thumbnail
	scroller: function() {

	    //console.debug('scroller');
		if(this.scroll && $('Active')) {
          	if(this.myFx) this.myFx.cancel();
		 	this.myFx = new Fx.Scroll('imageScroller', {
		    offset: {
		        'x': ($('Active').getStyle('left').toInt() - this.windowWidth()) + (this.windowWidth()/2),
		        'y': 0
		    }
	   		}).toLeft();
		}
	},

	// Wechselt das Hintergrund bild
	changeImage: function(number){
		this.options.mainImage.src = "";
		// Bild Wechsel
		if(number === 'back') {
			number = this.activeImage-1;
		}
		else if(number === 'next') {
			number = this.activeImage+1;
		}

        if(number < 0) {
			number = this.options.imageLength - 1;
		} else if(number > (this.options.imageLength - 1)) {
			number = 0;
		}
		this.activeImage = number;

		this.loadImage();

	},

	loadImage: function() {
        this.options.mainImage.src = this.options.fullImagePath + this.images[this.activeImage];

		if(this.thumbnails[this.activeImage].getHeight() > this.thumbnails[this.activeImage].getWidth()){
			if(Browser.Engine.trident && Browser.Engine.version < 7) {
				$('BackgroundImage').setStyle('height', '50%');
                $('BackgroundImage').setStyle('width', '');
			}
			$('Image').className = "PortraitFormat";
		} else {
			$('Image').className = "";
			// Resize ie 6-
			if(Browser.Engine.trident && Browser.Engine.version < 7) this.resizeImage();
		}

        // Thumbnail Active
		if($('Active')) {
			$('Active').id = '';
			this.thumbnails[this.activeImage].id = 'Active';
            this.thumbnails[this.activeImage].focus();
		}
		this.scroller();
	},

    resizeImage: function() {
		bgImage = document.getElementById('Image').getElementsByTagName('img')[0];
		winHeight = document.body.clientHeight;
		winWidth = document.body.clientWidth;

		vImage = bgImage.width / bgImage.height;
		vWindow = winWidth / winHeight;

		if(vImage <= vWindow) {
			bgImage.style.width = winWidth + 'px';
			bgImage.style.height = "";
		} else {
			bgImage.style.height = winHeight + 'px';
			bgImage.style.width = "";
		}
	},

	// Thumbnail bar Slidet aus
	slideOut: function () {
		//console.debug('slideOut');
		this.toolbarIn = false;
        $('GalleryToggle').removeEvents('click');
        $('GalleryToggle').addEvent('click', function(e){
			this.slideIn();
		}.bind(this));

        this.barMove = new Fx.Tween('slideGallery');
		this.barMove.start('bottom', '-68');

        this.GalleryToolbar = new Fx.Tween('GalleryToolbar');
		this.GalleryToolbar.start('top', '0');

        this.ToolbarBg = new Fx.Tween('GalleryToggle');
	   	this.ToolbarBg.start('background-position', this.windowWidth()/2-40+' -10');
	},

	// Thumbnail bar Slidet rein
    slideIn: function () {
		//console.debug('slideIn');
		this.toolbarIn = true;
       $('GalleryToggle').removeEvents('click');
        this.toggleClick = $('GalleryToggle').addEvent('click', function(e){
			this.slideOut();
		}.bind(this));

        this.barMove = new Fx.Tween('slideGallery');
		this.barMove.start('bottom', '30');

        this.GalleryToolbar = new Fx.Tween('GalleryToolbar');
		this.GalleryToolbar.start('top', this.toolbarTop);

        this.ToolbarBg = new Fx.Tween('GalleryToggle');
		this.ToolbarBg.start('background-position', this.windowWidth()/2-40+' 7');
	},

	initDragArrows: function() {

        // Wenn Internet Explorer
		this.Arrow = $('NextArrow');
		this.mouseMove = '';
		this.ArrowClick = '';

		// Back
        $('ImgBack').addEvent('mouseover', function(e){

			// Bildwechsel
			this.Arrow.src = this.Arrow.src.replace('nextArrow', 'backArrow');

			document.removeEvents('mousemove');
            this.mouseMove = document.addEvent('mousemove', function(e){
			    this.Arrow.setStyle('left', e.page.x-30);
	            this.Arrow.setStyle('top', e.page.y-10);
			}.bind(this));

		}.bind(this));

		// Next
        $('ImgForward').addEvent('mouseover', function(e){

			// Bild wechsel
			this.Arrow.src = this.Arrow.src.replace('backArrow', 'nextArrow');

            document.removeEvents('mousemove');
               document.addEvent('mousemove', function(e){
			    this.Arrow.setStyle('left', e.page.x-10);
	            this.Arrow.setStyle('top', e.page.y-10);
			}.bind(this));

		}.bind(this));

		// Stop Back/Next
        $('slideGallery').addEvent('mouseover', function(e){
            document.removeEvents('mousemove');
			this.Arrow.setStyle('top', -100);
            this.Arrow.setStyle('left', -100);
		}.bind(this));

	},

	windowLoaded: function() {
		this.loadImage();
		//console.debug('windowLoaded');
		//this.slideOut.delay(1600, this);

        // PreLoad Images
		this.fullImages = new Array();
		for(x = 0; x < this.options.imageLength; x++) {
			this.fullImages[x] = new Element('img');
			this.fullImages[x].src = this.options.fullImagePath + this.images[x];
		}

	},

    windowWidth: function() {
		//console.debug('windowWidth');
		var w = 0;
		//IE
		if(!window.innerWidth) {
			//strict mode
			if(!(document.documentElement.clientWidth == 0)) {
				w = document.documentElement.clientWidth;
			} else {
				w = document.body.clientWidth;
			}
		} else {
			w = window.innerWidth;
		}
		return w;
	}
});

SlideGallery.implement(new Options);
SlideGallery.implement(new Events);