iqLIB.addEvent( 'start', function() {

    try {
        Card.implement( {
            newCard: function( option, index, sortclass ) {
                this.orientation = sortclass;
                var card = new Element('div', {
                    'class': 'sortList'+sortclass
                    }).store('index', index);
                if(option.picture != '') {
                    var aantal = this.options.model.get('options');
                    if(this.orientation == 'Horizontal') {
                        var size = ( 600 / aantal.getLength() ).toInt().limit( 0, 200 );
                        var image = this.options.model.getGeneratedImage( option.picture, {
                            crop: false,
                            width: size,
                            height: size
                        } );
                    } else {
                        var size = ( 400 / aantal.getLength() ).toInt().limit( 0, 200 );
                        var image = this.options.model.getGeneratedImage( option.picture, {
                            crop: false,
                            width: 520,
                            height: size
                        } );
                    }
                    if(option.pictureCredits != '') {
                    	this.options.model.wrapItem(image, option).inject(card);
                    } else {
                    	image.inject( card );
                    }
                }
                if(option.option != '') {
                    var textbox = new Element('div').set('html', option.option ).inject( card );
                }
                new Element('div', {
                    'class': 'disabled_div',
                    styles: {
                        width: '100%',
                        height: '100%',
                        position: 'absolute'
                    }
                    } ).inject( card );
				
                this.cards.push( card );
                return card;
            }
        } );
    } catch(e) {}

    try {
        ModelExploreImages.implement( {

            createMiniatuur: function( item ) {
                if( this.type != 'filmroll' ) {
                    this.miniHeight = ( 450 / 3 ).toInt();
                    if( this.get('columns').toInt() ) {
                        this.miniHeight = ( 450 / this.get('columns').toInt() ).toInt().limit( 0, 200 );
                    } else {
                        this.miniHeight = ( 450 / this.options.getLength() ).toInt().limit( 0, 200 );
                    }
                }
                var miniatuur = new Element( 'td', {
                    'class': 'miniatuur',
                    'valign': 'top'
                } );
                var imageborderdiv = new Element( 'div' ).setStyles( {
                    height: this.miniHeight,
                    width: (this.type === 'thumbnails') ? 'auto' : this.miniHeight,
                    'margin': 5
                } ).inject( miniatuur );
                //om te centreren
                //var centerdiv = new Element( 'div' ).setStyles( { width: this.miniHeight, 'margin': 'auto' } ).inject( imageborderdiv );
                if( item.picture ) {
                    var image = this.getSquareImage(item.picture, this.miniHeight).setStyles({
                        'display': 'block',
                        'margin': 'auto'
                    }).inject( imageborderdiv );
                }
                if( this.get('showtext') == 'under' ) {
                    var text = new Element( 'div' ).set('html', item.option ).setStyles( {
                        width: this.miniHeight
                    } ).inject( miniatuur );
                } else if( this.get('showtext') == 'mouse_over' ) {
                    miniatuur.set('title', item.option);
                }
                miniatuur.addEvent( 'click', function(el) {
                    if( item.picture ) {
                        if( this.type == 'filmroll' ){
                            var bigimage = this.createBigImage( item, this.bigHeight );
                            //if(this.preview.getElement('div')) {
                            bigimage.replaces(this.preview.getElement('div'));
                        //}
                        //this.preview.adopt('html', bigimage);
                        } else {
                            this.openImageOverlay( item.picture );
                        }
                    }
                    this.setSelected( miniatuur );
                }.bind(this));
				
                return miniatuur;
            },
            createBigImage: function( item, height ) {
                var bigImage = new Element( 'div' ).setStyles( {
                    width: 438,
                    height: height
                } );
							
                var image = this.getGeneratedImage(item.picture, {
                    crop: false,
                    height: height,
                    width: 438
                }).inject( bigImage );
		
                image.addEvent( 'click', function(el) {
                    this.openImageOverlay( item.picture );
                }.bind(this));
				
                return bigImage;
            },
		
            openImageOverlay: function( picture ) {
                var img = this.cleanImage( picture );
                var clean_src = img.src.substr( img.src.indexOf('_') + 1 );
                this.openSlimbox( 'generated/s900x600_'+clean_src );
            },
		
            getSquareImage: function( picture, size ) {
                return this.getGeneratedImage( picture, {
                    crop: false,
                    width: size,
                    height: size
                } );
            }
	
        });
    } catch(e) {}
	
    try {
        ModelDetermination.implement( {
		
            createMiniatuur: function( item ) {
                var miniatuur = new Element( 'td', {
                    'class': 'miniatuur',
                    'valign': 'top'
                } );
                var imageborderdiv = new Element( 'div' ).setStyles( {
                    height: this.miniHeight,
                    width: this.miniHeight,
                    'margin': 5
                } ).inject( miniatuur );
                var image = this.getSquareImage(item.picture, this.miniHeight).setStyles({
                    'display': 'block',
                    'margin': 'auto'
                }).inject( imageborderdiv );
				
                miniatuur.addEvent( 'click', function(el) {
                    this.previewImage = this.createBigImage( item, this.bigHeight ).replaces(this.previewImage);
                    this.previewText.set('html', item.option);
                    this.setSelected(miniatuur);
                }.bind(this));
		
                return miniatuur;
            },
	
            createBigImage: function( item, height ) {
                var bigImage = new Element( 'div' ).setStyles( {
                    width: height,
                    height: height,
                    left: 0,
                    top: 0,
                    position: 'absolute'
                } );
							
                var image = this.getGeneratedImage(item.picture, {
                    crop: false,
                    height: height,
                    width: height
                }).inject( bigImage );
		
                image.addEvent( 'click', function(el) {
                    this.openImageOverlay( item.picture );
                }.bind(this));
				
                return bigImage;
            },
		
            openImageOverlay: function( picture ) {
                var img = this.cleanImage( picture );
                var clean_src = img.src.substr( img.src.indexOf('_') + 1 );
                this.openSlimbox( 'generated/s900x600_'+clean_src );
            },
		
            getSquareImage: function( picture, size ) {
                return this.getGeneratedImage( picture, {
                    crop: false,
                    width: 70,
                    height: 70
                } );
            }
            
        } );
    } catch(e) {}
	
	
    try {
        ModelZoomImage.implement( {
            updateSmallImage: function( styles ) {
                var src = this.smallImage.get('src');
                var clean_src = src.substr( src.indexOf('_') + 1 );
                this.smallImage.set( 'src', 'generated/s'+styles.width+'x'+styles.height+'_'+clean_src );
				
            }
        } );

    } catch(e) {}

    try {
        ModelMPC.implement( {
            getAnswerForm: function() {
                if( this.form ) {
                    delete this.form; 
                }

                this.form = new Form( {
                    'type':		'radio',
                    'options':	this.get('options'),
                    'random':	this.get('random')
                    } );

                return this.form.getElement();
            }            
        });
    } catch(e) {}


    try {
        ModelZoomMeasureImage.implement( {
            updateSmallImage: function( styles ) {
                var src = this.smallImage.get('src');
                var clean_src = src.substr( src.indexOf('_') + 1 );
                this.smallImage.set( 'src', 'generated/s'+styles.width+'x'+styles.height+'_'+clean_src );
				
            },
		
            init: function() {
                this.question.clickAnswerFormOK = function() {
                    iqLIB.hideQuestion( this.getQuestionId() );
                }.bind(this.question);
		
                this.width = 500;
                this.height = 375;
                this.smallWidth = 200;
		
                this.unit = this.get('unit'); // km / m / cm / mm / um / px
                this.text = this.get('option'); //some text
                this.image = this.get('image'); //the image.
                this.scale = this.get('realSize').toInt() / this.cleanImage( this.image ).styles.width.toInt(); //original size of picture
                this.clicked = 0;
                this.lineWidth = 3;
                this.pointSize = 4;
                this.fillColor = 'red';
                this.firstPoint = $A([]);
            }
        } );

    } catch(e) {}
	
    Model.implement( {
        getGeneratedImage: function( picture, styles ) {
            var img = this.cleanImage( picture );

            var clean_src = img.src.substr( img.src.indexOf('_') + 1 );
			
            if( $chk(styles.crop) ) {
                var src = 'generated/c'+styles.width+'x'+styles.height+'_'+clean_src;
                var width = styles.width;
                var height = styles.height;
            } else {
                var width = styles.width;
                var height = styles.height;
				
                if( img.styles.width / width > img.styles.height / height ) {
                    height = img.styles.height * width / img.styles.width;
                } else {
                    width = img.styles.width * height / img.styles.height;
                }
                width = width.toInt();
                height = height.toInt();
                var src = 'generated/s'+width+'x'+height+'_'+clean_src;
            }
			
            return Element( 'img', {
                src: src,
                styles: {
                    width: width,
                    height: height
                }
            } );
        },

        initButtons: function(win) {
            if( iqLIB.getDefault( 'options', 'showStopButton' ) &&
                !this.isInformationModel() && !this.question.getDefault( 'options', 'embed' ) ) {
                win.addButton({
                    'class': 'button_stop',
                    'html': 'SLUITEN'
                }).addEvent( 'click', function() {
                    iqLIB.hideQuestion( this.getQuestionId() );
                }.bind(this.question) );
            }
            if( this.isInformationModel() ) {
                if( !this.question.getDefault( 'options', 'embed' ) ) {
                    win.addButton({
                        'class': 'button_ok',
                        'html': 'SLUITEN'
                    }).addEvent( 'click', function() {
                        this.clickOK();
                    }.bind(this.question) );
                }
            } else {
                win.addButton({
                    'class': 'button_ok',
                    'html': 'OK'
                }).addEvent( 'click', function() {
                    this.clickOK();
                }.bind(this.question) );
            }
        },
        getMaxTimesAnswered: function() {
            if( $defined( this.question.options.data.maxTimesAnswered ) ) {
                return this.question.options.data.maxTimesAnswered.toInt();
            }
            return 3;
        }
    } );
	
    ['ModelPointAndClick', 'ModelHotspots', 'ModelMeasureImage', 'ModelZoomImage', 'ModelZoomMeasureImage'].each(function(model) {
	    try {
	    	model = window[model];
	    	
	    	var getImage = model.prototype.getImage;
	    	
	    	model.implement({
	    		getImage: function() {		
	    			return this.wrapImage(getImage.call(this))
	    		}
	    	});
	    } catch(e) {}
    });

    try {
    	ModelHotspots.implement({
		handleClick: function( e, option ) {
               		// open de option in een overlay.
	                if( option.target != '' && option.target != '.js' ) {
        	                var id = iqLIB.loadAndShowQuestion( option.target );
                	} else if(option.picture!='' || option.option !='') {
	                        var contents = new Element('div', {styles: {display: 'block'}});
        	                if(option.picture != '') {
                	                var img = this.createImage(option.picture);
					if(option.pictureCredits) {
						img = this.wrapItem(img, option);
					}
					contents.grab(img);
                        	}
	                        if(option.option != '') {
        	                        contents.grab( new Element('div').set( 'html', iqLIB.formatHTML(option.option) ) );
                	        }
				
                        	this.popup.showPopup( contents );
                	}
        	}
	});
    } catch(e) {}
	
    ['ModelDetermination', 'ModelExploreImages'].each(function(model) {
	    try {
	    	model = window[model];
	    	
	    	var createBigImage = model.prototype.createBigImage;
	    	
	    	model.implement({
	    		createBigImage: function(item, height) {		
	    			return this.wrapItem(createBigImage.call(this, item, height), item);
	    		}
	        });
	    } catch(e) {}
    });
    
    try {
    	ModelDetermination.implement({
    		getAnswerForm: function() {
	    		
	    		// haal de opties op
	    		this.options = this.get('options');
	    		this.miniHeight = this.question.getDefault('layout', 'determinatie_miniatuur_height');
	    		this.bigHeight = this.question.getDefault('layout', 'determinatie_image_width');
	    		this.textWidth = this.question.getDefault('layout', 'determinatie_text_width');
	    		
	    		this.element = new Element( 'div', { styles: { 'width': this.bigHeight*2 + this.textWidth + 10, height: this.bigHeight + 10 + this.miniHeight }} );
	    		var item = $A([]);
	    		item.picture = this.get('image');
	    		item.pictureCredits = this.get('imageCredits');
	    		
	    		this.target = this.createBigImage( item, this.bigHeight ).set('class', 'lichtbakPreview' ).setStyles( {'position': 'absolute', top: 0, left: 0, 'width': this.bigHeight, 'height': this.bigHeight, margin: 'auto' }).inject( this.element );
	    		
	    		this.lichtbakcontainer = new Element( 'div', {'class': 'lichtbakContainer', styles: {position: 'absolute', left:  this.bigHeight + 10,  top: 0, width: this.bigHeight + this.textWidth + 20 } }).inject( this.element );
	
	    		// maak een div voor de grote afbeelding. Zet er een lege div in waar later de preview afbeelding moet komen.
	    		this.preview = new Element( 'div', {'class': 'lichtbakPreview', styles: { position: 'absolute', height: this.bigHeight}} ).inject( this.lichtbakcontainer );
	    		
	    		this.previewText = new Element( 'div', {'class': 'lichtbakPreviewText'} ).setStyles( {height: this.bigHeight, width: this.textWidth, left: this.bigHeight+10, top: 0, position: 'absolute'} ).inject(this.preview);
	    		this.previewImage = new Element( 'div' ).setStyles( {height: this.bigHeight, width: this.bigHeight, left: 0, top: 0, position: 'absolute'} ).inject(this.preview);
	
	    		// maak een div aan voor de miniaturen en deze horizontaal scrolbaar (zie css)
	    		var tableholder = new Element( 'div', {'class': 'lichtbakMiniaturen', styles: {'position': 'absolute', top: this.bigHeight+11, left: 0} } ).inject(this.lichtbakcontainer);
	    		
	    		var table = new Element( 'table', { 'class': 'miniatuur-tabel', 'valign':'top', styles: { 'width': 10 }} ).inject(tableholder);
	    		var tbody = new Element( 'tbody' ).inject( table );
	    		var tablerow = new Element( 'tr' ).inject(tbody);
	
	    		this.options.each( function( item ) {
	    			if(item.picture != '') {
	    				this.createMiniatuur( item ).inject( tablerow );
	    			}
	    		}.bind(this) );
	    		//eerste uitklappen.
	    		this.tablerow = tablerow;
	
	    		return this.element;
	    	}
    	});
    } catch(e) {}
    
    ['ModelExploreImages'].each(function(model) {
	    try {
	    	model = window[model];
	    	
	    	var createMiniatuur = model.prototype.createMiniatuur;
	    	
	    	model.implement({
	    		createMiniatuur: function(item) {
	    			if(this.type == 'filmroll') {
	    				return createMiniatuur.call(this, item);
	    			} else {
	    				return this.wrapItem(createMiniatuur.call(this, item), item);
	    			}
	    		}
	        });
	    } catch(e) {}
    });
    
    try {
    	ModelZoomMeasureImage.implement({
   			refreshLayout: function() {
	    		if( this.refreshed ) return;
	    		this.refreshed = true;
	
	    		this.orginalXY = this.originalSize.styles.height / this.originalSize.styles.width;
	    		this.frameXY = this.bigFrame.getSize().y / this.bigFrame.getSize().x;
	    		this.bigFactor = this.bigFrame.getSize().x / this.originalSize.styles.width;
	
	    		this.smallHeight = (this.smallWidth * this.orginalXY).toInt();
	
	    		this.smallImage.setStyles({width: this.smallWidth, height: this.smallHeight});
	    		this.updateSmallImage({width: this.smallWidth, height: this.smallHeight});
	
	    		this.smallFrame.setStyles({width: this.smallWidth, height: this.smallHeight});
	
	    		this.xdiff = this.originalSize.width - this.bigFrame.getSize().x;
	    		this.ydiff = this.originalSize.height - this.bigFrame.getSize().y;
	
	    		this.imageContainer.setStyles( {
	    			   'width': ( this.originalSize.width + this.xdiff ),
	    			   'height': ( this.originalSize.height + this.ydiff ),
	    			   'left': ( -2 - this.xdiff ),
	    			   'top': ( -2 - this.ydiff ),
	    			   'z-index': -10
	    		   });
	
	    		this.zoomElement.setStyles( {
	    			   'left': this.smallFrame.getCoordinates(this.bigFrame).left + 16,
	    			   'top': this.smallFrame.getSize().y+8,
	    			   'width': this.zoomElement.getSize().x - 30
	    		   });
	    		
	    		this.zoomElement.adopt(new Element('div', {
	    			html: '<img src="res/images_naturalis/icons/just_minus.png" />',
	    			styles: {
	    				'position': 'absolute',
	    				'top': '0px',
	    				'left': '-17px'
	    			}
	    		}).addEvent('mousedown', function(e) { zoomSlider.set(zoomSlider.step - 1); e.stop(); }));
	
	    		this.zoomElement.adopt(new Element('div', {
	    			html: '<img src="res/images_naturalis/icons/just_plus.png" />',
	    			styles: {
	    				'position': 'absolute',
	    				'top': '0px',
	    				'right': '-17px'
	    			}
	    		}).addEvent('mousedown', function(e) { zoomSlider.set(zoomSlider.step + 1); e.stop(); }));
	
	    		var height = Math.max( this.bigFrame.getSize().y, this.smallFrame.getSize().y+8+16 );
	    		this.totalContainer.setStyles( {
	    			   'height': height	
	    		} );
	    		
	
	
	    		var zoomSlider = new Slider( this.zoomElement, this.zoomElement.getElement('.knob'), {
	    										snap: true,
	    										wheel:true,
	    										steps: 20,
	    										range: [0,19],
	    										onChange: function(step) {
	    											//verander afmeting van dragSquare en bigImage.
	    											this.factor = Math.pow(0.9,step);
	
	    											this.updateSquare( this.factor );
	
	    											var width = (this.originalSize.styles.width * this.bigFactor / this.factor ).toInt();
	    											var height = (this.originalSize.styles.height * this.bigFactor / this.factor ).toInt();
	
	    											this.scale = this.get('realSize').toInt()/width;
	
	    											this.bigImage.setStyles( {
	    													'width': width,
	    													'height': height
	    												} );
	
	    											this.xdiff = width - this.bigFrame.getSize().x;
	    											this.ydiff = height - this.bigFrame.getSize().y;
	
	    											this.imageContainer.setStyles( {
	    													'width': ( width + this.xdiff ),
	    													'height': ( height + this.ydiff ),
	    													'left': ( -2 - this.xdiff ),
	    													'top': ( -2 - this.ydiff )
	    												});
	
	    										//update image bij zoom
	    											this.refreshBigImage( this.dragSquare.getPosition( this.smallFrame ) );
	
	    										//	zoomElement.getElement('span').set( 'text', Math.round( 1/factor*100 ) + '%' );
	    										}.bind(this)
	    									}).set(5);
	
	
	    		var squareMove = new Drag.Move( this.dragSquare, {
	    			'container': this.smallFrame
	    		});
	
	    		squareMove.addEvents( {
	    			'start': function( el, obj ) {
	    			//	el.setStyle( 'z-index', '100' );
	    			}.bind(this),
	    			'drag': function(el, obj){
	    				var pos = el.getPosition( this.smallFrame );
	    				this.refreshBigImage(pos);
	    			}.bind(this)
	    		});
	
	    		if(this.get('type')!='meetlat'){
	    			this.updateSquare( 0.59049 );
	    			this.refreshBigImage( this.dragSquare.getPosition( this.smallFrame ) );
	    		} else {
	    			zoomSlider.set(0);
	    			this.smallFrame.setStyle('display','none');
	    			this.zoomElement.setStyle('display','none');
	    			this.bigFrame.setStyle('height', this.originalSize.styles.height * this.bigFactor);
	    		}
   			}
    	});
    } catch(e) {}
    
    try {
    	ModelZoomImage.implement({
    		refreshLayout: function( ) {
	    		if( this.refreshed ) return;
	    		this.refreshed = true;
	
	    		this.orginalXY = this.originalSize.styles.height / this.originalSize.styles.width;
	    		this.frameXY = this.bigFrame.getSize().y / this.bigFrame.getSize().x;
	    		this.bigFactor = this.bigFrame.getSize().x / this.originalSize.styles.width;
	
	    		this.smallWidth = 200;
	    		this.smallHeight = (this.smallWidth * this.orginalXY).toInt();
	
	    		this.smallImage.setStyles({width: this.smallWidth, height: this.smallHeight});
	    		this.updateSmallImage({width: this.smallWidth, height: this.smallHeight}); 
	    		
	    		this.smallFrame.setStyles({width: this.smallWidth, height: this.smallHeight});
	
	    		this.xdiff = this.originalSize.width - this.bigFrame.getSize().x;
	    		this.ydiff = this.originalSize.height - this.bigFrame.getSize().y;
	
	    		this.imageContainer.setStyles( {
	    			   'width': ( this.originalSize.width + this.xdiff ),
	    			   'height': ( this.originalSize.height + this.ydiff ),
	    			   'left': ( -2 - this.xdiff ),
	    			   'top': ( -2 - this.ydiff )
	    		   });
	
	    		this.zoomElement.setStyles( {
	    			   'left': this.smallFrame.getCoordinates(this.bigFrame).left + 16,
	    			   'top': this.smallFrame.getSize().y+8,
	    			   'width': this.zoomElement.getSize().x - 30
	    		   });
	    		
	    		this.zoomElement.adopt(new Element('div', {
	    			html: '<img src="res/images_naturalis/icons/just_minus.png" />',
	    			styles: {
	    				'position': 'absolute',
	    				'top': '0px',
	    				'left': '-17px'
	    			}
	    		}).addEvent('mousedown', function(e) { zoomSlider.set(zoomSlider.step - 1); e.stop(); }));
	
	    		this.zoomElement.adopt(new Element('div', {
	    			html: '<img src="res/images_naturalis/icons/just_plus.png" />',
	    			styles: {
	    				'position': 'absolute',
	    				'top': '0px',
	    				'right': '-17px'
	    			}
	    		}).addEvent('mousedown', function(e) { zoomSlider.set(zoomSlider.step + 1); e.stop(); }));
	
	    		var height = Math.max( this.bigFrame.getSize().y, this.smallFrame.getSize().y+8+16 );
	    		this.totalContainer.setStyles( {
	    			   'height': height	
	    		} );
	    		
	
	
	    		var zoomSlider = new Slider( this.zoomElement, this.zoomElement.getElement('.knob'), {
	    										snap: true,
	    									    wheel:true,
	    									    steps: 20,
	    									    range: [0,19],
	    									    onChange: function(step) {
	    									    	//verander afmeting van dragSquare en bigImage.
	    									    	this.factor = Math.pow(0.9,step);
	
	    									    	this.updateSquare( this.factor );
	
	    											var width = (this.originalSize.styles.width * this.bigFactor / this.factor ).toInt();
	    											var height = (this.originalSize.styles.height * this.bigFactor / this.factor ).toInt();
	
	    									    	this.bigImage.setStyles( {
	    									    			'width': width,
	    									    			'height': height
	    									    		} );
	
	    									    	this.xdiff = width - this.bigFrame.getSize().x;
	    									    	this.ydiff = height - this.bigFrame.getSize().y;
	
	    											this.imageContainer.setStyles( {
	    													'width': ( width + this.xdiff ),
	    													'height': ( height + this.ydiff ),
	    													'left': ( -2 - this.xdiff ),
	    													'top': ( -2 - this.ydiff )
	    												});
	
	    										//update image bij zoom
	    											this.refreshBigImage( this.dragSquare.getPosition( this.smallFrame ) );
	
	    										//	zoomElement.getElement('span').set( 'text', Math.round( 1/factor*100 ) + '%' );
	    									    }.bind(this)
	    									}).set(5);
	
	    		var squareMove = new Drag.Move( this.dragSquare, {
	    			'container': this.smallFrame
	    		});
	
	    		squareMove.addEvents( {
	    			'start': function( el, obj ) {
	    			//	el.setStyle( 'z-index', '100' );
	    			}.bind(this),
	    			'drag': function(el, obj){
	    				var pos = el.getPosition( this.smallFrame );
	    				this.refreshBigImage(pos);
	    			}.bind(this)
	    		});
	
	    		this.updateSquare( 0.59049 );
	    		this.refreshBigImage( this.dragSquare.getPosition( this.smallFrame ) );
	    	}
    	});
    } catch(e) {}
} );