var img_gallery = new Class({
    Implements: [Options, Events],
    options: {
        gallery_holder: '',		// Holder element which holds gallery
        gallery_holder_tag: '',	// Holder element which holds gallery
        gallery_images: [],		// images to show
        gallery_captions: [],	// captions to show
        num_images: 0,
        img_counter: 0,
        z_index_counter: 2,
        show_captions: true,
        gallery_w: 0,			// gallery width
        gallery_h: 0,			// gallery height
        set_image_dimensions: false,	// set all images to gal_w & gal_h ?
        slide_top: '',			
        slide_bottom: '',
        loading_image: '_img/ajax_loader.gif',
        img_sliders: [],	
        next_but: '',			// Slide to left button
        prev_but: '',			// Slide to right button
        slidespeed: 500			// Animation speed
    },
    initialize: function(options){
        this.setOptions(options);
        this.div_switch_counter = 0;
    	this.options.num_images = this.options.gallery_images.length;
    	this.options.gallery_holder_tag = this.options.gallery_holder.tagName;
    	if(this.options.gallery_holder_tag=='SPAN') {
    		this.measure_element = this.options.gallery_holder.getChildren('img')[0];
    		this.measure_element_type = 'img';
	    } else {
    		this.measure_element = this.options.gallery_holder;
    		this.measure_element_type = 'div';
    		// this.set_gallery_dimensions();
	    }
	    // PRELOAD FIRST IMAGE
		var first_img_to_load = this.options.gallery_holder.getChildren('img')[0].src;
		var img_preloader = new Image();
		var gal_class = this;
		img_preloader.onload=function() { 
			gal_class.set_gallery_dimensions(); 
		}
		img_preloader.src = first_img_to_load;
    },
    set_gallery_dimensions: function(element_type) {
    	if(this.measure_element_type=='div') {
	    	// var holder_dims = this.measure_element.getSize();
	    	this.options.gallery_w = this.measure_element.getStyle('width').toInt(); // holder_dims.x.toInt() ;
	    	this.options.gallery_h = this.measure_element.getStyle('height').toInt(); // holder_dims.x.toInt() ;
	    	//this.options.gallery_h = holder_dims.y.toInt() - this.measure_element.getStyle('padding-bottom').toInt();
	    } else if(this.measure_element_type=='img') {
	    	this.options.gallery_w = this.measure_element.width;
	    	this.options.gallery_h = this.measure_element.height;
	    }
    	// alert('w = '+this.options.gallery_w)
    	// alert(measure_element.getStyle('padding-bottom').toInt());
    	this.options.num_images = this.options.gallery_images.length;
	    // als meer dan 1 image -> maak er gallery van
    	if(this.options.num_images>1) {
        	this.set_gallery();
        }    
    },
    set_gallery: function() {
	    // set holder op display block, position relative, overflow-x: hidden
    	this.options.gallery_holder.setStyles({
    		display: 'block',
    		position: 'relative',
    		width: this.options.gallery_w,
    		height: this.options.gallery_h,
    		'overflow': 'hidden'
    	});
    	this.insert_img_slides();
    },
    insert_img_slides: function() {
	    // insert 2 divs, cur showing & prev_next_showing
	    var img_w_h_html = '';
	    if(this.options.set_image_dimensions==true) {
	    	this.img_w_h_html = ' width="'+this.options.gallery_w+'" height="'+this.options.gallery_h+'"';
	    }
		// IMAGE
		if(this.options.gallery_images[0].indexOf('.jpg')!=-1) {
			var first_html = '<img src="'+this.options.gallery_images[0]+'" alt=""'+this.img_w_h_html+' />';
		} else {
			var video_data = this.options.gallery_images[0].split('###');
			var first_html = get_video_iframe_code(video_data[0], video_data[1], this.options.gallery_w, this.options.gallery_h);
		}
	    // output('first: '+this.options.gallery_images[0]);
		var top_slide = new Element(this.options.gallery_holder_tag, {
		    'class': 'img_gallery_slide',
		    html: first_html,
		    styles: {
		        position: 'absolute',
		        top: 0,
		        left: 0,
		        width: this.options.gallery_w,
		        height: this.options.gallery_h,
		        'z-index': this.options.z_index_counter
		    }
		});
		top_slide.store('my_img', top_slide.getChildren('img')[0]);
		this.slide_top = top_slide;
		top_slide.inject(this.options.gallery_holder);
		
		var bottom_slide = new Element(this.options.gallery_holder_tag, {
		    'class': 'img_gallery_slide',
		    html: '<img src="_img/blank.gif" alt=""'+this.img_w_h_html+' />',
		    styles: {
		        position: 'absolute',
		        top: 0,
		        left: this.options.gallery_w,
		        width: this.options.gallery_w,
		        height: this.options.gallery_h,
		        'z-index': this.options.z_index_counter+1
		    }
		});
		bottom_slide.store('my_img', bottom_slide.getChildren('img')[0]);
		this.slide_bottom = bottom_slide;
		bottom_slide.inject(this.options.gallery_holder);
		// img_sliders array vullen
		this.options.img_sliders = [this.slide_top, this.slide_bottom];
		// CHECK OF GALLERY IN EEN DISPLAY: NONE PARENT ZITTEN...
		// ZOJA, DAN DIE EVEN OP DISPLAY: BLOCK ZETTEN, BOEL METEN, EN WEER SLUITEN
		this.check_hidden_parents();
    },
    check_hidden_parents: function() {
    	this.gals_hidden_parent = false;
    	var has_show_more_parent = this.options.gallery_holder.getParent('div.show_more');
    	if(
    		(has_show_more_parent!=null) 
    		&&
    		(has_show_more_parent.getStyle('display')=='none')
    	) {
    		this.gals_hidden_parent = has_show_more_parent;
    		this.set_prev_next_buttons();
    	} else {
    		this.set_prev_next_buttons();
    	}
    },
	// Insert previous and next slide buttons
	set_prev_next_buttons: function() {
		// These buttons need to be outside the holder div, since it's overflow is hidden
		// Get the position of the holder div, to position the buttons relative to the holder
		var gallery_parent_div = this.options.gallery_holder.getParent('div');
		if(gallery_parent_div.getStyle('position')=='static') { gallery_parent_div.setStyle('position', 'relative'); }
		if(this.gals_hidden_parent!=false) { this.gals_hidden_parent.setStyle('display', 'block'); }
		var gallery_position = this.options.gallery_holder.getCoordinates(gallery_parent_div); 
		var nav_right_offset = gallery_parent_div.getStyle('padding-right').toInt() + (gallery_parent_div.getStyle('width').toInt() - this.options.gallery_w)
		// alert('gallery_position.top '+gallery_position.top)
		// Create the next button, this will be visible 
		var next_button = new Element('a', {
		    href: '#gal_next',
		    'class': 'img_gallery_control next',
		    html: '&gt;',
		    styles: {
		        display: 'block',
		        top: gallery_position.top + this.options.gallery_h + 5,
		        left: this.options.gallery_w
		    },
		    events: {
		        click: function(){
		            return false;
		        }
		    }
		});
        next_button.addEvent('click', this.show_image.bind(this));

		// Create the prev button, this will be invisible, because the slider starts at 0
		var prev_button = new Element('a', {
		    href: '#gal_prev',
		    'class': 'img_gallery_control prev',
		    html: '&lt;',
		    styles: {
		        display: 'none',
		        top: gallery_position.top + this.options.gallery_h + 5,
		        left: this.options.gallery_w - 15
		    },
		    events: {
		        click: function(){
		            return false;
		        }
		    }
		});
        prev_button.addEvent('click', this.show_image.bind(this));
        // LOADING IMAGE
		var show_loading_image = new Element('img', {
		    src: this.options.loading_image,
		    'class': 'loading_image',
		    alt: 'loading...',
		    styles: {
		        display: 'none',
		        position: 'absolute',
		        top: gallery_position.top + this.options.gallery_h + 6,
		        left: this.options.gallery_w - 30
		    }
		});
        
		// INJECT the prev/next buttons to the holder's parent element
		next_button.inject(gallery_parent_div);
		prev_button.inject(gallery_parent_div);
		show_loading_image.inject(gallery_parent_div);
		this.options.next_but = next_button;
		this.options.prev_but = prev_button;
		this.loader_display = show_loading_image;
		// SET POSSIBLE HIDDEN PARENT BACK TO DISPLAY NONE
		if(this.gals_hidden_parent!=false) { this.gals_hidden_parent.setStyle('display', 'none'); }
	},
	show_image: function(event) {
		// prev or next, kijk welke div active is
		this.options.z_index_counter++;
		var counter_offset = this.div_switch_counter%2;
		var showing_div = this.options.img_sliders[counter_offset];
		var hidden_div =  this.options.img_sliders[counter_offset-1];
		if(counter_offset==0) { hidden_div = this.options.img_sliders[1]; }
		this.div_switch_counter++;
		// kijken welk img te laden
		var hidden_left_pos;
		if(event.target.hasClass('next')) {
			if(this.options.img_counter+1<this.options.num_images) {
				this.options.img_counter++;
				hidden_left_pos = this.options.gallery_w;
			} else {
				this.options.img_counter = 0;
				hidden_left_pos = this.options.gallery_w;
			}
		} else if(event.target.hasClass('prev')) {
			if(this.options.img_counter-1>=0) {
				this.options.img_counter--;
				hidden_left_pos = -1 * this.options.gallery_w;
			}
		}
		hidden_div.setStyles({
			'left': hidden_left_pos,
			'z-index': this.options.z_index_counter
		});
		var image_to_show = this.options.gallery_images[this.options.img_counter];
		// output('image_to_show = '+image_to_show);
		this.hidden_div = hidden_div;
		this.showing_div = showing_div;
		this.hidden_left_pos = hidden_left_pos;
		// IMAGE
		if(image_to_show.indexOf('.jpg')!=-1) {
			this.content_to_show = 'image';
			this.image_to_show = image_to_show;
			this.image_to_change = hidden_div.retrieve('my_img');
	    	var gal_class = this;
	    	this.loader_display.setStyle('display', 'block');
	    	var loadertje = this.loader_display;
	    	// PRELOAD IT
			var next_img_preloader = new Image();
	    	next_img_preloader.onload=function() { 
		    	loadertje.setStyle('display', 'none');
	    		gal_class.slide_in_image(); 
	    	}
			next_img_preloader.src = image_to_show;
		// VIDEO
		} else {
			var video_data = image_to_show.split('###');
			this.video_html = get_video_iframe_code(video_data[0], video_data[1], this.options.gallery_w, this.options.gallery_h);
			this.content_to_show = 'video';
			this.slide_in_image();
		}
	},
	slide_in_image: function() {
		// alert(this.options.img_counter);
		if(this.content_to_show=='image') {
			this.hidden_div.innerHTML = '<img src="'+this.image_to_show+'" alt=""'+this.img_w_h_html+' />';
			// this.image_to_change.src = this.image_to_show;
		} else if(this.content_to_show=='video') {
			this.hidden_div.innerHTML = this.video_html;
		}
		var gal_img_slide_FX = new Fx.Tween(this.hidden_div, {property: 'left', duration: this.options.slidespeed});
		// Start the slide animation and update the visibility of the prev/next buttons
		gal_img_slide_FX.start(this.hidden_left_pos,0);//.chain(function(){ this.update_controls(); }.bind(this));				
		// SHOWING DIV OOK MOVEN
		var gal_img_slide_FX_2 = new Fx.Tween(this.showing_div, {property: 'left', duration: this.options.slidespeed});
		gal_img_slide_FX_2.start(0, -1*this.hidden_left_pos);				
		this.update_controls();
	},
	update_controls: function() {
		if(this.options.img_counter==0) {
			this.options.prev_but.setStyle('display', 'none');
		} else {
			this.options.prev_but.setStyle('display', 'block');		
		}
		if(this.options.img_counter+1==this.options.num_images) {
			//this.options.next_but.setStyle('display', 'none');
		} else {
			this.options.next_but.setStyle('display', 'block');		
		}
	}
    
});