var RegioDialog_Flipbook = new Class({

	Implements: [Events, Options],
	Extends: RegioDialog,

	options: {
		json: null,
		flipbook_key: 0,
		key : 0,
		ImageIndex: 0,
		counter : {
			separator : ' / '
		},
		tracking: {
			ivw: true,
			google: true
		}
	},

	initialize : function(options){
		this.root = document.getElement('body');
		
		/**
		 * Merge global class specified options.
		 * The global data are set in the file: js/%client%/frontent.js
		 */
		if( $type(document.blankoweb_client_settings) !== false ) {
			if( $type(document.blankoweb_client_settings.RegioDialog_Flipbook) !== false ) {
				this.options = $merge(this.options,document.blankoweb_client_settings.RegioDialog_Flipbook);
			}
		}

		this.setOptions(options);
		this._buildLayer();
		
		this.Mask = new RegioMask();

		if( $chk($('RegioMask')) ) {
			$('RegioMask').addEvent('click', function () {
				this._close();
			}.bind(this));
		}

		this._getScreenCenter();

		document.getElement('body').setStyle('overflow','hidden');

		window.addEvents({
			'keydown': function (event) {
				var PressedKey = event.key;
				
				if( PressedKey == 'esc') {
					event.stop();
					this._close();
				}

				if( PressedKey == 'right' ) {
					event.stop();
					this.ButtonRight.fireEvent('click');
					if( (this.options.key+1) == this.current_json.images.length ) this.options.key = this.options.key-1;
				}

				if( PressedKey == 'left' ) {
					event.stop();
					if( this.options.key == 0) this.options.key = 1;
					this.ButtonLeft.fireEvent('click');
				}
			}.bind(this),
			'scroll': function () {
				if( $chk($('dialog')) ) {
					$('dialog').setStyle('top',this._getScreenCenter().top);
				}
			}.bind(this),
			'resize': function () {
				if( $chk($('dialog')) ) {
					$('dialog').setStyles({
						top:this._getScreenCenter().top,
						left:this._getScreenCenter().left
					});
				}
			}.bind(this)
		});
	},

	_getScreenCenter: function () {
		var element = $('dialog');
		var width = window.getCoordinates().width;
		var height = window.getCoordinates().height;
		var topPosition = (height-element.getStyle('height').toInt())/2;

		if( document.getScroll().y > 150 ) {
			topPosition = topPosition + document.getScroll().y;
		}
		
		return {
			left: (width-element.getStyle('width').toInt())/2,
			top: topPosition
		}
	},

	_buildLayer: function () {

		this.current_json = this.options.json[this.options.flipbook_key];

		if( $chk($('dialog')) ) {
			$('dialog').destroy();
		}

		this.container = new Element('div', {
			'id': 'dialog',
			'class': 'dialog flipbook-dialog'
		});
		var dialog_header  = new Element('div',{'class': 'dialog_header'}).inject(this.container);
		var dialog_header_close  = new Element('div',{
			'class': 'close',
			'events': {
				'click': function () {
					this._close();
				}.bind(this)
			}
		}).inject(dialog_header);

		var dialog_content		= new Element('div',{'class': 'dialog_content'});
		this.SilverBox			= new Element('div',{'class':'box-layout silver_box_content'}).inject(dialog_content);
		this.SilverBoxHeader	= new Element('div',{'class':'box-header'}).inject(this.SilverBox).set('html','<h3><span>'+this.current_json.flipbook_title+'</span></h3>');
		this.SilverBoxContent	= new Element('div',{'class':'box-content hPadding vPadding'}).inject(this.SilverBox);
		this.SilverBoxFooter	= new Element('div',{'class':'box-footer'}).inject(this.SilverBox);

		this.current_json.images.each( function (ImageObject,key){

			this.flipbook_container = new Element('div',{'class':'flipbook_container'});

			this.flipbook_image_container = new Element('div',{
				'class':'flipbook_image_container'
			}).inject(this.flipbook_container);

			this.flipbook_image = new Element('img',{
				'src': ImageObject.images.source,
				'title': ImageObject.title,
				'alt': ImageObject.title,
				'id':'dialog-flipbook-image'
			}).inject(this.flipbook_image_container);

			if( ImageObject.copyright != '') {
				this.flipbook_copyright = new Element('p',{'html': ImageObject.copyright,'class': 'copyright'}).inject(this.flipbook_container);
			}
			this.flipbook_text = new Element('h3',{'html': ImageObject.title,'class': 'headline'}).inject(this.flipbook_container);
			this.flipbook_text = new Element('p',{'html': ImageObject.caption,'class': 'caption'}).inject(this.flipbook_container);

			if( key == this.options.key) {
				this.flipbook_container.addClass('active');
			}

			this.flipbook_container.inject(this.SilverBoxContent)

			this._addButtons(key);

		}.bind(this));

		/* counter */
		this.flipbook_counter_container = new Element('p',{'class': 'counter_container'}).inject(this.SilverBoxContent);
		this.flipbook_counter_container_text = new Element('span',{
				'html':'Bild ',
				'class': 'text'
		}).inject(this.flipbook_counter_container);

		this.flipbook_counter_container_counter = new Element('span',{
				'html': (this.options.key+1),
				'class': 'counter'
		}).inject(this.flipbook_counter_container);

		this.flipbook_counter_container_number = new Element('span',{
				'html': this.options.counter.separator + this.current_json.images.length,
				'class': 'number'
		}).inject(this.flipbook_counter_container);
		/* counter */
		
		dialog_content.inject(this.container);
		this.container.inject(this.root);

		this.container.setStyles({
			top: this._getScreenCenter(this).top,
			left: this._getScreenCenter(this).left
		});
		
	},

	_addButtons: function (key) {

		this.ButtonRight = new Element('a',{
			'class': 'flipbook_right',
			'events': {
				'click': function () {
					
					/* EventTracking */
					this._trackClickEvent('Next');
					/* EventTracking */
					
					this._setImageCounter(this.options.key,'right');

					if( this.ButtonRight.getPrevious('a.flipbook_left').hasClass('inactive')) {
						this.ButtonRight.getPrevious('a.flipbook_left').removeClass('inactive');
					}

					if( this.options.key < (this.current_json.images.length-1) )
						this.options.key = this.options.key + 1;

					if( this.options.key == (this.current_json.images.length-1) ) {
						this.ButtonRight.addClass('inactive');
					} else {
						if( this.ButtonRight.hasClass('inactive') ) {
							this.ButtonRight.removeClass('inactive');
						}
					}
					this._setActive(this.options.key);

				}.bind(this)
			}
		}).inject(this.flipbook_image_container, 'top');

		var ButtonLeft = new Element('a',{
			'class': 'flipbook_left',
			'events': {
				'click': function () {

					/* EventTracking */
					this._trackClickEvent('Previous');
					/* EventTracking */
					
					this._setImageCounter(this.options.key,'left');

					if( this.options.key == 0 ) {
						ButtonLeft.addClass('inactive');
					} else {
						if( ButtonLeft.hasClass('inactive') ) {
							ButtonLeft.removeClass('inactive');
						}
					}

					if( this.options.key > 0 )
						this.options.key = this.options.key - 1;

					this._setActive(this.options.key);
				}.bind(this)
			}
		}).inject(this.flipbook_image_container, 'top');
		this.ButtonLeft = ButtonLeft;

		if( key == 0 ) {
			ButtonLeft.addClass('inactive');
		}
	},

	_setImageCounter: function (key,direction) {
		if( direction == 'right') {
			var Counter = key+2;
		}
		if( direction == 'left') {
			var Counter = key;
		}
		$('dialog').getElement('.counter').set('html',Counter);
	},

	_setActive: function (key) {

		var ArrFlipbooks = this.container.getElements('div.flipbook_container');
		ArrFlipbooks.each( function (Flipbook,FlipbookKey) {

			var ImageContainer = Flipbook.getElement('.flipbook_image_container').getElement('img');

			if( FlipbookKey == key ) {
				ImageContainer.fade('hide');
				Flipbook.addClass('active');
				ImageContainer.fade('in');
			} else {
				Flipbook.removeClass('active');
			}

		});
	},
	
	_trackClickEvent: function (identifier) {
		var FlipbookHeadline = $('dialog').getElement('.dialog_content .box-header h3 span').get('html').stripTags();
		
		/* Google EventTracking */
		if( this.options.tracking.google == true ) {
			var gaLabel = FlipbookHeadline;
			gaLabel = (gaLabel.length > 0) ? gaLabel : '[n/a]';
			_gaq.push(['_trackEvent', 'RegioDialog_Flipbook', identifier, gaLabel]);
		}
		/* IVW tracking */
		if( this.options.tracking.ivw == true ) {
			// search page ivw pixel
			var SiteIvwImage = document.getElement('img.ivw');
			// check if the pixel exists 
			if( $chk(SiteIvwImage) ) {
				// get the URI Object from the ivw page pixel
				var IvwBoxUri = new URI(SiteIvwImage.getAttribute('src'));
				// get the host. For example: rsa.ivwbox.de
				var IvwBoxUriHost = IvwBoxUri.get('host');
				// check if there is a flipbook ivw image
				if( $chk($('FlipbookIvwImage')) ) {
					$('FlipbookIvwImage').destroy();
				}
				// Build url
				var ivwSource = "http://" + IvwBoxUriHost + "/cgi-bin/ivw/CP/Flipbook/" + (FlipbookHeadline.sanitize()) + "?r="+escape(document.referrer)+"&d="+(Math.random()*100000);
				var IvwImage = new Element('img', {
					'src': ivwSource,
					'styles': {
						'width': '0px',
						'height': '0px',
						'display': 'none',
						'visibility': 'hidden'
					},
					'id': 'FlipbookIvwImage',
					'alt': 'ivw',
					'class': 'stat ivw'
				}).inject(this.container);
			}
		}
	}


});