/*****************************************************************
DUBGALLERY

copyright (c) 2008 by carsten hansen
www.codebum.de

dubgallery is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

dubgallery is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.
*****************************************************************/
function Gallery()
{
	this.scrollable = true;
	
	this.init = function(data) {
		// init vars		
		this.data = data;
		this.curr_image = 0;
		this.mode = 'normal';
		this.diashow = false;
		this.element_cnt = data.images.normal.length;
		this.gallery = document.getElementById('gallery');
		
		this.preloadImages();
		
		this.printGallery();
		this.printThumbnails();	
		
		this.jumpTo(0);		
	}
	
	this.changeImage = function(direction) {		
		if (this.scrollable) {
			this.scrollable = false;
			this.direction = direction;			
			if (direction == 1) {
				// next
				if (this.mode == 'normal') {
					this.gallery_content.style.left = '0px';
					this.gallery_content1.innerHTML = this.getImageHTML();
				} else {
					// zoom-view
					this.gallery_zoom_content.style.left = '0px';
					this.gallery_zoom_content1.innerHTML = this.getImageHTML();
				}
				this.curr_image += 1;
				if (this.curr_image > this.element_cnt - 1) {
					if (this.data.loop) {
						this.curr_image = 0;											
					} else {
						this.curr_image -= 1;
					}
				}
				if (this.mode == 'normal') {
					this.gallery_content2.innerHTML = this.getImageHTML();
					movepixels = -this.data.content_width;
				} else {
					// zoom-view
					this.gallery_zoom_content2.innerHTML = this.getImageHTML();
					movepixels = -this.data.zoom.content_width;
				}				
			} else if (direction == -1) {
				// back
				if (this.mode == 'normal') {
					this.gallery_content.style.left = -this.data.content_width+'px';
					this.gallery_content2.innerHTML = this.getImageHTML();
				} else {
					// zoom-view
					this.gallery_zoom_content.style.left = -this.data.zoom.content_width+'px';
					this.gallery_zoom_content2.innerHTML = this.getImageHTML();
				}				
				this.curr_image -= 1;
				if (this.curr_image < 0) {
					if (this.data.loop) {
						this.curr_image = this.element_cnt - 1;
					} else {
						this.curr_image += 1;
					}
				}
				if (this.mode == 'normal') {
					this.gallery_content1.innerHTML = this.getImageHTML();
					movepixels = this.data.content_width;
				} else {
					// zoom-view
					this.gallery_zoom_content1.innerHTML = this.getImageHTML();
					movepixels = this.data.zoom.content_width;
				}	
				
			}
			this.printControls();
			if (this.mode == 'normal') {
				movewhat = 'gallery_content';
				moveduration = this.data.effect_duration;
			} else {
				// zoom-view
				movewhat = 'gallery_zoom_content';
				moveduration = this.data.effect_duration * 2;
			}
			new Effect.MoveBy(movewhat, 0, movepixels, {
				duration: moveduration,
				mode: 'relative',
				afterFinish: function() {
					gallery.afterchange();
				}
			});				
		}
	}
	
	this.afterchange = function() {
		if (this.direction == 1) {
			if (this.mode == 'normal') {
				this.gallery_content1.innerHTML = ' ';
			} else {
				this.gallery_zoom_content1.innerHTML = ' ';
			}
		} else if (this.direction == -1) {
			if (this.mode == 'normal') {
				this.gallery_content2.innerHTML = ' ';
			} else {
				this.gallery_zoom_content2.innerHTML = ' ';
			}			
		}
		this.scrollable = true;
	}
	
	this.jumpTo = function(img_num) {
		if (this.scrollable) {
			if (this.diashow) {
				this.stopDiashow();
			}
			this.curr_image = img_num;
			this.printControls();
			if (this.mode == 'normal') {
				this.gallery_content1.innerHTML = this.getImageHTML();
				this.gallery_content2.innerHTML = this.getImageHTML();
			} else {
				this.gallery_zoom_content1.innerHTML = this.getImageHTML();
				this.gallery_zoom_content2.innerHTML = this.getImageHTML();
			}
		} else {
			void(0); // hack, IE knows no onclick... (FU#*!!!)
		}
	}
	
	this.openZoom = function() {
		if (this.scrollable) {
			if (this.diashow) {
				this.stopDiashow();
			}
			this.mode = 'zoom';
			
			this.printZoom();
			this.jumpTo(this.curr_image);
		} else {
			void(0);
		}
	}
	
	this.closeZoom = function() {
		if (this.scrollable) {
			if (this.diashow) {
				this.stopDiashow();
			}
			this.mode = 'normal';
			document.body.removeChild(document.getElementById('gallery_zoom_bg'));
			document.body.removeChild(document.getElementById('gallery_zoom_container'));
			
			this.printGallery();
			this.printThumbnails();
			
			this.jumpTo(this.curr_image);
		} else {
			void(0);
		}
	}	
	
	this.startDiashow = function() {
		this.diashow = true;
		
		this.changeImage(1);
		this.diashow_timer = new PeriodicalExecuter(function() {
			gallery.changeImage(1)
		}, 6);
	}
	
	this.stopDiashow = function() {
		this.diashow = false;
		this.diashow_timer.stop();
		this.printControls();
	}
	
	this.printGallery = function() {
		if (elem = document.getElementById('gallery_controls')) {
			this.gallery.removeChild(elem);
		}
		if (elem = document.getElementById('gallery_view')) {
			this.gallery.removeChild(elem);
		}
		if (elem = document.getElementById('gallery_thumbnails')) {
			this.gallery.removeChild(elem);
		}
		this.createElement({
			tag: 'div',
			id: 'gallery_controls',
			parent: this.gallery,
			styles: {
				
			}
		});
		this.createElement({
			tag: 'div',
			id: 'gallery_view',
			parent: this.gallery,
			styles: {
				clear: 'left',
				position: 'relative',
				overflow: 'hidden'
			},
			childs: {
				1: {
					tag: 'div',
					id: 'gallery_content',
					styles: {
						width: (data.content_width * 2) + 'px',
						position: 'relative'
					},
					childs: {
						1: {
							tag: 'div',
							id: 'gallery_content1',
							styles: {
								width: data.content_width + 'px',
								float: 'left',
								textAlign: 'center'
							}
						},
						2: {
							tag: 'div',
							id: 'gallery_content2',
							styles: {
								width: data.content_width + 'px',
								float: 'left',
								textAlign: 'center'
							}
						}
					}
				}
			}
		});
		this.createElement({
			tag: 'div',
			id: 'gallery_thumbnails',
			parent: this.gallery,
			styles: {
				marginTop: '10px',
				padding: '7px'
			}
		});
	}
	
	this.printZoom = function() {
		window.scrollTo(0, 0);
		windowsize = this.getWindowsize();
		if (document.body.offsetHeight > windowsize[1]) { // content higher than window			
			bg_height = document.body.offsetHeight;
		} else {
			bg_height = windowsize[1];
		}
		content_width = windowsize[0]/100*90;
		content_height = windowsize[1]/100*90;
		xpos = Math.floor((windowsize[0] - content_width) / 2);
		ypos = Math.floor((windowsize[1] - content_height) / 4);
		this.data.zoom = {
			xpos: xpos,
			ypos: ypos,			
			content_width: content_width,
			content_height: content_height,
			bg_height: bg_height
		};
		this.createElement({
			tag: 'div',
			id: 'gallery_zoom_bg',
			parent: document.body,
			styles: {
				left: '0px',
				top: '0px',
				width: '100%',
				height: this.data.zoom.bg_height+'px',
				zIndex: 1000,
				position: 'absolute'				
			}
		});
		this.createElement({
			tag: 'div',
			id: 'gallery_zoom_container',
			parent: document.body,
			styles: {
				position: 'absolute',
				top: '0px',
				left: '0px',
				zIndex: 1001,
				overflow: 'hidden'
			},
			childs: {
				1: {
					tag: 'div',
					id: 'gallery_zoom_controls',
					styles: {
						marginLeft: this.data.zoom.xpos+'px',
						marginTop: this.data.zoom.ypos+'px',
						width: this.data.zoom.content_width+'px',
						zIndex: 1002,
						textAlign: 'center'
					}
				},
				2: {
					tag: 'div',
					id: 'gallery_zoom_view',
					styles: {					
						marginLeft: this.data.zoom.xpos+'px',	
						width: this.data.zoom.content_width+'px',
						//height: this.data.zoom.content_height+'px',						
						clear: 'left',
						zIndex: 1003,
						overflow: 'hidden'
					},
					childs: {
						1: {
							tag: 'div',
							id: 'gallery_zoom_content',
							styles: {
								width: (this.data.zoom.content_width * 2) + 'px',
								//height: this.data.zoom.content_height+'px',
								position: 'relative',
								overflow: 'hidden'
							},
							childs: {
								1: {
									tag: 'div',
									id: 'gallery_zoom_content1',
									styles: {
										width: this.data.zoom.content_width + 'px',
										float: 'left',
										textAlign: 'center'
									}
								},
								2: {
									tag: 'div',
									id: 'gallery_zoom_content2',
									styles: {
										width: this.data.zoom.content_width + 'px',
										float: 'left',
										textAlign: 'center'
									}
								}
							}
						}
					}
				}
			}
		});
	}
	
	this.printControls = function() {
		if (this.element_cnt < 2) {
			return false;
		}
		
		if (this.curr_image == 0) {
			if (this.data.loop) {
				back = 1;
			} else {
				back = 0;
			}
		} else {
			back = 1;
		}
		if (this.curr_image == this.element_cnt - 1) {
			if (this.data.loop) {
				next = 1;
			} else {
				next = 0;
			}
		} else {
			next = 1;
		}
		
		// back-button		
		if (back == 1) {
			back_href = 'javascript: gallery.changeImage(-1);';
			back_title = 'Zurück';
			back_class_name = 'active';
			back_html = this.data.button_back_active;
			zoom_back_html = this.data.button_zoom_back_active;
		} else {
			back_href = 'javascript: void(0);';
			back_title = '';
			back_class_name = 'inactive';
			back_html = this.data.button_back_inactive;
			zoom_back_html = this.data.button_zoom_back_inactive;
		}				
		// next-button		
		if (next == 1) {
			next_href = 'javascript: gallery.changeImage(1);';
			next_title = 'Vor';
			next_class_name = 'active';
			next_html = this.data.button_next_active;
			zoom_next_html = this.data.button_zoom_next_active;
		} else {
			next_href = 'javascript: void(0);';
			next_title = '';
			next_class_name = 'inactive';
			next_html = this.data.button_next_inactive;
			zoom_next_html = this.data.button_zoom_next_inactive;
		}
		if (this.diashow) {
			play_title = 'Stop';
			play_href = 'javascript: gallery.stopDiashow();';
			play_html = this.data.button_stop;
			zoom_play_html = this.data.button_zoom_stop;
		} else {
			play_title = 'Play';
			play_href = 'javascript: gallery.startDiashow();';
			play_html = this.data.button_play;
			zoom_play_html = this.data.button_zoom_play;
		}
		
		if (this.mode == 'normal') {
			if (this.data.controls_position == 'centered') {
				back_textalign = 'right';
				next_textalign = 'left';
				zoom_textalign = 'right';
				play_textalign = 'left';
			} else if (this.data.controls_position == 'stretched') {
				back_textalign = 'left';
				next_textalign = 'right';
				zoom_textalign = 'center';
				play_textalign = 'center';
			}
			// normal view
			if (elem = document.getElementById('controls_table')) {
				this.gallery_controls.removeChild(elem);
			}	
			this.createElement({
				tag: 'table',
				id: 'controls_table',
				parent: this.gallery_controls,
				attributes: {
					cellpadding: 0,
					cellspacing: 0,
					border: 0
				},
				styles: {
					width: '100%'
				},
				childs: {
					1: {
						tag: 'tbody',
						childs: {
							1: {
								tag: 'tr',
								childs: {
									1: {
										tag: 'td',
										id: 'gallery_button_back',
										styles: {
											width: '25%',
											textAlign: back_textalign
										},
										childs: {
											1: {
												tag: 'a',
												attributes: {
													href: back_href,
													title: back_title
												},
												class_name: back_class_name,
												html: back_html
											}
										}
									},
									2: {
										tag: 'td',
										id: 'gallery_button_zoom',
										styles: {
											width: '25%',
											textAlign: zoom_textalign
										},
										childs: {
											1: {
												tag: 'a',
												attributes: {
													href: 'javascript: gallery.openZoom();',
													title: 'Zoom'
												},
												class_name: 'active',
												html: this.data.button_zoom
											}
										}
									},
									3: {
										tag: 'td',
										id: 'gallery_button_diashow',
										styles: {
											width: '25%',
											textAlign: play_textalign
										},
										childs: {
											1: {
												tag: 'a',
												attributes: {
													href: play_href,
													title: play_title
												},
												html: play_html
											}
										}
									},
									4: {
										tag: 'td',
										id: 'gallery_button_next',
										styles: {
											width: '25%',
											textAlign: next_textalign
										},
										childs: {
											1: {
												tag: 'a',
												attributes: {
													href: next_href,
													title: next_title
												},
												class_name: next_class_name,
												html: next_html
											}
										}
									}
								}
							}
						}
					}
				}
			});
		} else {
			// zoom view			
			if (elem = document.getElementById('gallery_zoom_controls_table')) {
				this.gallery_zoom_controls.removeChild(elem);
			}
			this.createElement({
				tag: 'table',
				id: 'gallery_zoom_controls_table',
				parent: this.gallery_zoom_controls,
				attributes: {
					cellpadding: 0,
					cellspacing: 0,
					border: 0
				},
				styles: {
					width: '500px',
					textAlign: 'center',
					marginLeft: 'auto',
					marginRight: 'auto'
				},
				childs: {
					1: {
						tag: 'tbody',
						childs: {
							1: {
								tag: 'tr',
								childs: {
									1: {
										tag: 'td',
										styles: {
											width: '35%',
											textAlign: 'right'
										},
										childs: {
											1: {
												tag: 'a',
												attributes: {
													href: back_href,
													title: back_title
												},
												class_name: back_class_name,
												html: zoom_back_html
											}
										}
									},
									2: {
										tag: 'td',
										styles: {
											width: '30%',
											textAlign: 'center'
										},
										childs: {
											1: {
												tag: 'a',
												attributes: {
													href: play_href,
													title: play_title
												},
												html: zoom_play_html
											}
										}
									},
									3: {
										tag: 'td',
										styles: {
											width: '25%',
											textAlign: 'left'
										},
										childs: {
											1: {
												tag: 'a',
												attributes: {
													href: next_href,
													title: next_title
												},
												class_name: next_class_name,
												html: zoom_next_html
											}
										}
									},
									4: {
										tag: 'td',
										styles: {
											width: '10%',
											textAlign: 'center'
										},
										childs: {
											1: {
												tag: 'a',
												attributes: {
													href: 'javascript: gallery.closeZoom();',
													title: 'Close'
												},
												html: this.data.button_zoom_close
											}
										}
									}
								}
							}
						}
					}
				}
			});
		}
	}
	
	this.printThumbnails = function() {
		if (this.data.thumbnail_scroll == 'horizontal') {
			if (this.data.thumbnail_scroll_height > 0) {
				this.gallery_thumbnails.style.height = this.data.thumbnail_scroll_height+'px';
			}
			this.gallery_thumbnails.style.overflowY = 'hidden';
			this.gallery_thumbnails.style.overflowX = 'auto';
			width = ((this.data.thumbnail_width + this.data.thumbnail_space) * this.element_cnt)+'px';
		} else if (this.data.thumbnail_scroll == 'vertical') {
			if (this.data.thumbnail_scroll_height > 0) {
				this.gallery_thumbnails.style.height = this.data.thumbnail_scroll_height+'px';
			}
			this.gallery_thumbnails.style.overflowY = 'auto';
			this.gallery_thumbnails.style.overflowX = 'hidden';
			width = 'auto';
		}
		// create thumbnails-element
		this.createElement({
			tag: 'div',
			id: 'gallery_thumbnails_content',
			parent: this.gallery_thumbnails,
			styles: {
				width: width
			}
		});
		for (i = 0; i < this.element_cnt; i++) {
			link = document.createElement('a');
			link.setAttribute('href', 'javascript: gallery.jumpTo('+i+');');
			if (this.data.images.titles[i]) {
				link.setAttribute('title', this.data.images.titles[i]);
			}
			link.style.outline = 'none';
			tag = document.createElement('img');
			tag.style.padding = '0px '+this.data.thumbnail_space+'px '+this.data.thumbnail_space+'px 0px';
			tag.setAttribute('src', this.data.images.small[i]);
			tag.setAttribute('border', 0);
			if (this.data.images.titles[i]) {
				tag.setAttribute('alt', this.data.images.titles[i]);
			}			
			link.appendChild(tag);
			this.gallery_thumbnails_content.appendChild(link);
		}
	}
		
	this.getWindowsize = function() {
		if (self.innerWidth) { // mozilla
			size = new Array(self.innerWidth, self.innerHeight);
		} else if (document.documentElement && document.documentElement.clientWidth) { // IE 6
			size = new Array(document.documentElement.clientWidth, document.documentElement.clientHeight);
		} else if (document.body) { // other IE
			size = new Array(document.body.clientWidth, document.body.clientHeight);
		}
		return size;
	}
	
	this.createElement = function(data, parent) {
		var elem = document.createElement(data.tag);
		if (data.id) {
			eval("elem.setAttribute('id', '"+data.id+"')");
		}
		if (data.class_name) {
			eval("elem.className = '"+data.class_name+"'");
		}
		if (data.html) {
			eval("elem.innerHTML = '"+data.html+"'");
		}
		// attributes
		for (i in data.attributes) {
		    eval("elem.setAttribute('"+i+"', '"+data.attributes[i]+"')");
		}
		// styles
		for (i in data.styles) {
			if (i == 'float') {
				// 'float' must be treated special
				eval("elem.style.cssFloat = '"+data.styles[i]+"'"); // all browsers
				eval("elem.style.styleFloat = '"+data.styles[i]+"'"); // IE
			} else {
				eval("elem.style."+i+" = '"+data.styles[i]+"'");
			}
		}
		// childs
		for (i in data.childs) {
		    this.createElement(data.childs[i], elem);
		}
		// assign to parent
		if (data.parent) {
			data.parent.appendChild(elem);
		} else if (parent) {
			parent.appendChild(elem);
		}
		// if it has a ID, make it a property of the gallery-object
		if (data.id) {
			eval("this."+data.id+" = elem");
		}
	}
	
	this.getImageHTML = function() {
		if (this.data.images.titles[this.curr_image]) {
			var title = this.data.images.titles[this.curr_image];
		} else {
			var title = '';
		}
		if (this.mode == 'normal') {
			image = '<a href="javascript: gallery.openZoom();"><img src="'+data.images.normal[this.curr_image]+'" border="0" alt="'+title+'" /></a><span class="gallery_image_title">'+title+'</span>';
		} else {
			// zoom
			// resize image
			img = this.pic3[this.curr_image];
			width_ratio = (this.data.zoom.content_width) / img.width;
			height_ratio = (this.data.zoom.content_height) / img.height;
			if (width_ratio < height_ratio) {
				width = (Math.floor(img.width * width_ratio))+'px';
				height =( Math.floor(img.height * width_ratio))+'px';
			} else {
				width = (Math.floor(img.width * height_ratio))+'px';
				height = (Math.floor(img.height * height_ratio))+'px';
			}
			image = '<a href="javascript: gallery.closeZoom();"><img src="'+data.images.big[this.curr_image]+'" border="0" alt="'+title+'" style="width: '+width+'; height: '+height+';" /></a>';
		}
		return image;
	}
	
	this.preloadImages = function() {
		this.pic1 = new Array();
		this.pic2 = new Array();
		this.pic3 = new Array();
		for (i = 0; i < this.element_cnt; i++) {
			this.pic1[i] = new Image();
			this.pic1[i].src = this.data.images.normal[i];
			this.pic2[i] = new Image();
			this.pic2[i].src = this.data.images.small[i];
			this.pic3[i] = new Image();
			this.pic3[i].src = this.data.images.big[i];
		}
	}
}