var toggle = function(element) {
  var display = element.getStyle('display');
  if (display == "none") {
    element.setStyle('display','block');
  } else {
    element.setStyle('display','none');
  }
}

var toggleClass = function(element, theClass) {
  if(element.hasClass(theClass)) {
    element.removeClass(theClass);
  } else {
    element.addClass(theClass);
  }
}

// SearchPageForm class
var SearchPageForm = new Class({
    Implements: [Options, Events],

    options: {
        formElement: ''
    },

    initialize: function(options){
        this.setOptions(options);
        //defensive
        if (!$('addfields')){
            return;
        }
        // Setup the inputs
        var inputGroups = this.options.formElement.getElements('.searchinput');
        inputGroups.each(function(el){
            if (el != null) {
                if (el.hasClass('showalways') || (el.getFirst('input.textinput') != null && el.getFirst('input.textinput').value != '')){
                    el.addClass('active');
                }else {
                    el.addClass('inactive');

                    // Add option to selectbox
                    var option = new Element('option',{
                        'value': el.id
                    });
                    option.set('text', el.getFirst('label').get('text'));
                    option.inject($('addfields'));
                }
            }
        });
        $('addfields').addEvent('change', function(e){
            //use mootools syntax?
            var selectedOption = this.options[this.options.selectedIndex];
            if (selectedOption.value != ''){
                $(selectedOption.value).removeClass('inactive');
                $(selectedOption.value).addClass('active');
                selectedOption.destroy();
            }
        });
        // Setup the add-fields-box
        $('addfields-container').removeClass('inactive');
    }
});

// prefilledFormFields class
var PrefilledFormField = new Class({
    Implements: [Options, Events],

    options: {
        formField: ''
    },

    initialize: function(options){
        this.setOptions(options);

        if ($(this.options.formField)){
            var originalValue = $(this.options.formField).value;

            $(this.options.formField).addEvent('focus', function(){
                if (this.value == originalValue){
                  this.value = '';
                  this.removeClass('defaultprefill');
                }
            });

            $(this.options.formField).addEvent('blur', function(){
                if (this.value == ''){
                  this.value = originalValue;
                  this.addClass('defaultprefill');
                }
            });
        }
    }
});

var use_subdomain = function(url) {
  host = location.host;
  subdomain = host.substring(0,host.indexOf('.'));
  rest = host.substring(host.indexOf('.') + 1);
  if (subdomain && subdomain != "") {
    if (subdomain == "mijn" || subdomain == "collectie" || subdomain == "arttube") {
      newurl = url.replace('/' + subdomain,'');
      newlocation = location.protocol + '//' + location.host + newurl;
      return newlocation;
    } else {
      return url;
    }
  } else {
      return url;
  }
}

var Application = new Class({
    Implements: [Events, Options],
    options: {
		playerOptions: null,
		pageToolsFoldout: null
    },
    
    initialize: function(options) {
        this.setOptions(options);
        window.addEvent('domready', function() {
           this.onDomReady();
        }.bind(this));
    },
    
    onDomReady: function() {
        this.setupSaveObject();
        this.setupSaveObjectLightBox();
        this.setupMailAFriend();
        this.setupMailAFriendLightBox();
        this.setupDraggableToolbox();
        this.setupDraggableLogo();
        this.setupImageGallery();
        this.setupSearchFilters();
        this.setupSearchScroller();
        //this.setupImageHeap();
        //this.setupInlineNav();
        this.setupImageZoomer();
        this.setupToggleTagForm();
        this.setupExpand();
        this.setupGridFilter();
        this.setupShowHideGridFilter();
        this.setupShowHideInfoSlides();

        // Hide grid filter at start
        if($('grid-filter-menu')) {
            $('grid-filter-menu').setProperty('style','display: none;');
        }

        // Searchpage
        if ($('searchpageform')){
            new SearchPageForm({
                'formElement' : $('searchpageform')
            });
        }

        // Enable prefilled formfields
        $$('.prefilled').each(function(el){
            new PrefilledFormField({
                'formField' : el
            });
        });

        //has to be last call
        this.setupStickyFooter();
    },
    
    setupShowHideInfoSlides: function() {
        var infoslides = $$('.slide h4');
        infoslides.each(function(el) {
            el.addEvent('click', function(e) {
                toggle(el.getParent().getElement('div'));
                toggleClass(el, 'collapsed');
            });
        });
    },
    
    setupImageZoomer: function() {
        if($('zoom-in')) {
            //$$('.mainimage')[0].setAttribute('src', $('zoom-in').getAttribute('href'));
            //$$('.imagecontainer')[0].setStyle('height', 500);
            var options = {
                'viewport':$$('.imagecontainer')[0],
                'mainimage':$$('.mainimage')[0],
                'loader': $('ajaxloader'),
                'button-zoom':$('zoom-in'),
                'button-zoom-out':$('zoom-out')
            }
            var viewer = new ObjectViewer(options, this);

        }
    }, 

    setupInlineNav: function() {
        var inlines = $$('.inlinenav');
        inlines.each(function(el, i) {
            el.addEvent('click', function(e) {
                $$('.' + el.rel).each(function(nel) {
                    nel.setStyle('display', 'none');
                });

                $(el.rel + '_' + el.href.split('#')[1]).setStyle('display', '');
                el.getParent().getParent().getParent().getChildren().removeClass('active');
                el.getParent().getParent().addClass('active');
            });
        });

        var last = inlines.getLast();
        if(last) {
            var hash = document.location.href.split('#')[1] || ''
            if(hash) {
                $(last.rel + '_link_' + hash).fireEvent('click');       
            }
        }
    },
    
    setupShowHideGridFilter: function() {
        var link = $('choose-filter-url');
        var filter = $('grid-filter-menu');
        if (!link) {
          return;
        }
        link.addEvent('click', function(e) {
            //alert('hoioe');
            toggle(filter);
            toggleClass(link, 'collapsed');
        });
    },
    setupGridFilter: function() {
        //var entries = $$('#departments li a');
        var entries = $$('.menu-header li a');
        var imageheap = $$("div[id^='imageheap-']");
        if (!entries) {
          return;
        }
        entries.addEvent('click', function(e) {
          code = this.getAttribute('rel');
          menu_header = this.getParent('.menu-header').getAttribute('id');
          query = '/search/json?' + menu_header + '=' + code;
          $('imageheap-overlay').setStyle('display', 'block');
          //alert('will query ' + query);
          var filterRequest = new Request.JSON({
              url: use_subdomain(query),
              onSuccess: function (json){
                $('imageheap-overlay').setStyle('display', 'none');
                //alert('json back:' + json);
                var i = 0;
                imageheap.each(function(el) {
                  if (typeof json[i] == 'undefined'){
                      el.setStyle('display', 'none');
                      return;
                  }
                  el.setStyle('display', '');
                  var data_fullimage = el.getElement('.data .fullimage');
                  //alert(i);
                  data_fullimage.setAttribute('href',json[i]['primary_image']);
                  var span_title = el.getElement('.data .title');
                  span_title.set('html',json[i]['title']);
                  //alert(el.getElement('.data .author').get('html'));
                  var author = el.getElement('.data .author');
                  //alert('heeft author obj');
                  author.set('html',json[i]['creator']['name']);
                  var img = el.getElement('img');
                  img.setAttribute('src',json[i]['thumbnail_image']);
                  var objectlink = el.getElement('.objectlink');
                  objectlink.setAttribute('href',use_subdomain(json[i]['link']));
                  i = i+1;
                });
                return false;
          }}).get();
        });
    },
    setupToggleTagForm: function() {
        var add_tags_link = $('add-tags-link');
        var tags_form = $('tags-form');
        if (!add_tags_link) {
          return;
        }
        tags_form.setProperty('style','display: none;');
        add_tags_link.addEvent('click', function(e) {
            var display = tags_form.getStyle('display');
            if (display == "none") {
                if($$('p.logged-in').length == 0) {
                    $('nav-login').fireEvent('click');
                }
            }
            toggle(tags_form);
        });

    },
    setupSaveObject: function(){
        var form = $('save-object-form');
        if (!form) {
          return;
        }
        
        var submitb = $('save-object-submit');
        var submitted = function() {
          form.send();
          $('video-save-box').set('html', '');
          $('video-save-box').setAttribute('style', 'display:none');
          return false;
        }
        submitb.addEvent('click',submitted );
    },

    setupStickyFooter: function(){
        var framework = $('framework');
        var footer = $('footer');
        if (!(framework || footer)){
            return;
        }
        //show it
        footer.setStyle('visibility', 'visible');
        
        //calculate
        var padTop = framework.getStyle('paddingTop').toInt();
        var padBar = $('boijmans_bar_wrapper').getStyle('height').toInt();
        var frameworkHeight = framework.getSize().y;
        var footerHeight = footer.getSize().y;
        var contentHeight = frameworkHeight + footerHeight;
        var windowHeight = window.getSize().y;
        if (contentHeight < windowHeight){
            framework.setStyle('min-height', (windowHeight - padTop - footerHeight - padBar) + 'px');
        }
    },

    setupSaveObjectLightBox: function(){
        var setupSaveObject = this.setupSaveObject; 
        var el = $('mark-as-favorite');
        if (!el) {
          return;
        }
        el.addEvent('click', function(e) {
            if($$('p.logged-in').length == 0) {
                $('nav-login').fireEvent('click');
            }
            var href = this.getProperty('href');
            var box = $('video-save-box');
            box.setStyle('display','block');
            //alert('click');
            // fill the light box
            var getForm = new Request.HTML({url: href,
              onSuccess: function (tree,elements,html,js){
              //alert('succes')
                box.set('html',html);
                //create hook to close the box
                $$('.close-me-link').addEvent('click', function(){
                  box.setStyle('display','none');
                  return false;
                });
                myboijmans.setupSaveObject();
                return false;
              }
            }).get();
            if(e) {
                e.stop();
            }
        });

        if(document.location.href.indexOf('save=1') !== -1) {
            el.fireEvent('click');
        }
    },
    
    setupMailAFriend: function() {
        var form = $('mailafriend-form');  
        if (!form) { return; }
        var submitb = $('mailafriend-submit');
        var submitted = function() {
          form.send();
          $('mailafriend-box').set('html', '');
          $('mailafriend-box').setAttribute('style', 'display: none');
          return false;
        }
        submitb.addEvent('click', submitted);
    },
    
    setupMailAFriendLightBox: function() {
        var el = $('mailafriend')
        if(!el) { return; }
        
        el.addEvent('click', function(e) {
            var href = this.getProperty('href');
            var box = $('mailafriend-box')
            box.setStyle('display', 'block');
            var getForm = new Request.HTML({url: href,
              onSuccess: function (tree,elements,html,js) {
                box.set('html', html);
                //create hook to close the box
                $$('.close-me-link').addEvent('click', function() {
                    box.setProperty('style','display: none;');
                    return false;
                });
                var email_field = $('id_email');
                email_field = new PrefilledFormField({
                    'formField': email_field
                })
                myboijmans.setupMailAFriend();
                return false;
              }
            }).get();
            e.stop();
        })

    },

    setupDraggableToolbox: function(){
        //lekker hard coded en een beetje vies, want ik ga er vanuit dat de site-toolbox altijd bestaat

        if($('id_username')) {
            $('id_username').addEvent('click', function(e) {
                this.focus();
                e.stop(); 
            });
            $('id_password').addEvent('click', function(e) {
                this.focus();
                e.stop(); 
            });
        }
        
        
        var el = $('site-toolbox');
        var close = $('close-mijn');
        var open = $('nav-login');

        //el.setStyle('display','block');
        if(close) {
            close.addEvent('click', function(e) {
                $(el).setStyle('display', 'none');
                var cookie = Cookie.write('mijnClosed', 'yes', {duration: 100, path: '/'});
            });
        }
    
        if(open) {
            open.addEvent('click', function(e) {
                $(el).setStyle('display', 'block');
                $(el).setStyle('top', 100);
                $(el).setStyle('margin-left', -300);
                var cookie = Cookie.write('mijnClosed', 'no', {duration: 100, path: '/'});
            });
        }


        var closed = Cookie.read('mijnClosed');
        if(closed != 'no') {
            $(el).setStyle('display', 'none');
        }

        if(el) {
            var marginLeft = Cookie.read('toolboxMarginLeft');
            if (marginLeft){
                el.setStyle('marginLeft',marginLeft);
            }
            var styleTop = Cookie.read('toolboxTop');
            if (styleTop){
                el.setStyle('top',styleTop);
            }

            var drag = new Drag('site-toolbox', {
                snap: 0,
                onSnap: function(el){
                    el.addClass('dragging');
                    el.setStyle('z-index', '300');
                },
                onComplete: function(el){
                    var duration = 100;
                    el.removeClass('dragging');
                    var cookie = Cookie.write('toolboxMarginLeft',el.getStyle('marginLeft'),{duration: duration, path: '/'});
                    var cookie = Cookie.write('toolboxTop',el.getStyle('top'),{duration: duration, path: '/'});
                },
                modifiers: {x: 'marginLeft', y: 'top'}
            });
        }
    },

    setupDraggableLogo: function(){
        // Create the logo-container
        el = new Element('div', {
            'id': 'logo-collectie-container'
        });

        el.inject($(document.body));

        var marginLeft = Cookie.read('logoMarginLeft');
        if (marginLeft){
            el.setStyle('marginLeft',marginLeft);
        }
        var styleTop = Cookie.read('logoTop');
        if (styleTop){
            el.setStyle('top',styleTop);
        }
        
        var drag = new Drag('logo-collectie-container', {
            snap: 0,
            onSnap: function(el){
                el.addClass('dragging');
                if($('site-toolbox')) {
                    $('site-toolbox').setStyle('z-index', '200');
                }
                el.setStyle('z-index', '300');
            },
            onComplete: function(el){
                var duration = 100;
                el.removeClass('dragging');
                var cookie = Cookie.write('logoMarginLeft',el.getStyle('marginLeft'),{duration: duration, path: '/'});
                var cookie = Cookie.write('logoTop',el.getStyle('top'),{duration: duration, path: '/'});
            },
            modifiers: {x: 'marginLeft', y: 'top'}
        });
    },

    setupImageGallery: function(){
        $$('.collectiongallery').each(function(el){
            var thisGallery = el;
            var thumbs = el.getElements('.thumbs li');
            thumbs.addEvent('click', function(el){
                thumbs.removeClass('active');
                this.addClass('active');
                var title = this.getElement('h3').get('html');
                var author = this.getElement('.author').get('html');
                var source = this.getElement('.thumblink').getAttribute('href');
                var url = this.getElement('h3 a').getProperty('href');
                thisGallery.getElement('.active-image').getElement('img').setProperties({
                    'alt' : '',
                    'src' : source
                });
                thisGallery.getElement('.author').set('html', author);
                thisGallery.getElement('h3').set('html', title);
                //thisGallery.getElement('.imagecontainer a').setProperty('href', url)
                
                /** zoom in button should link to the current image shown **/
                if($('zoom-in')) {
                    var source_full = this.getElement('.full-link').getAttribute('href');
                    $('zoom-in').setAttribute('href', source_full)
                }
                
                el.stop();
            });
        });
    },

    setupSearchFilters: function(){
        if ($('filteroptions')){
            $('filteroptions').getElements('.filtergroup').each(function(el){
                el.getElements('.hidden').addClass('inactive');
            });
            $('filteroptions').getElements('a.more').addEvent('click', function(el){
                this.getParent('.filtergroup').getElements('.hidden').removeClass('inactive');
                this.destroy();
                el.stop();
            });
        }
    },
    
    /* sets up the "scroll-to-search-result-after-clicking-search"-thingy 
        TODO: need more thought
    */
    setupSearchScroller: function() {
        if(!$('resultlist')) { return; }
        var has_result = $('resultlist').getChildren('li').length
        if(has_result) {
            document.location.href = document.location.href + "#results"
        }
    },

    setupImageHeap: function(){
        if ($('imageheap')){
            $('imageheap').getElements('div').addEvent('click', function(el){
                // Destroy all existing boxes
                $('imageheap').getElements('.infobox').destroy();
                // Get imagedata
                var fullImageSource = this.getElement('.data').getElement('.fullimage').getProperty('href');
                var title = this.getElement('.data').getElement('.title').get('text');
                var author = this.getElement('.data').getElement('.author').get('text');
                var year = this.getElement('.data').getElement('.year').get('text');
                var objectlink = this.getElement('.objectlink').getProperty('href');

                // Setup box
                var infobox = new Element('div', {
                    'class': 'infobox'
                });
                infobox.addEvent('click', function(el){
                    window.location = objectlink;;
                });
                infobox.addEvent('mouseleave', function(el){
                    this.destroy();
                });
                $('imageheap').addEvent('mouseleave', function(el){
                    this.getElements('.infobox').destroy();
                });
                var fullImage = new Element('img', {
                    'src': fullImageSource,
                    'alt': title
                });
                var infoboxAuthor = new Element('h3', {
                    'text': author
                });
                var infoboxTitle = new Element('h4', {
                    'text': title
                });
                var infoboxYear = new Element('span', {
                    'text': year,
                    'class': 'year'
                });
                fullImage.inject(infobox);
                infoboxAuthor.inject(infobox);
                infoboxTitle.inject(infobox);
                infoboxYear.inject(infobox);
                infobox.inject($('imageheap'));
                el.stop();
            });
        }
    },
    
    setupExpand: function() {
        
        $$('a.expander').addEvent('click', function(e) {
            var targt = $(e.target).getAttribute('rel')
            if($(targt)) {
                $(targt).removeClass('folded')
                $(targt).addClass('unfolded')
            }
            $(e.target).setProperty('style', 'display: none')
        })

    },

	emptySetup: function(options){ }
});

//provide global reference
var myboijmans = new Application();

var IE6Fixes = new Class({
    Implements: [Events, Options],
	
	//options / variables 
    options: {
    },
	
    lastHoverId: null,

    initialize: function(options) {
    
        //no ie6: let's quit
        if (!(Browser.Engine.trident && Browser.Engine.version <= 4)){
            return;
        }
        
        //set those options
        this.setOptions(options);
        
        //set onload listener
        window.addEvent('domready', function() {
           this.onDomReady();
        }.bind(this));
        
        //setups
        this.setupBackgroundCacheForcer();
    },
    
    onDomReady: function() {
    
        //setups
        this.setupHoverElements();
    },
    
    setupBackgroundCacheForcer: function(){
        try {
            document.execCommand("BackgroundImageCache", false, true);
        } 
        catch(e){
        
        };
    },
    
    setupHoverElements: function(){
        var lhelem = this.lastHoverId;

        this.options.hoverElements.each(function(cssQuery) {

            $$(cssQuery).each(function(el) {
                
                //mouseover
                el.addEvent('mouseover', function(e){
                    e.stop();
                    if(this.id && this.id != lhelem && lhelem) {
                        $(lhelem).removeClass('hover');
                    }
                    if(this.id) {
                        lhelem = this.id;
                    }
                    if (this.hasClass('hover')){
                        return;
                    }
                    this.addClass('hover');
                });
                
                //mouseout
                el.addEvent('mouseout', function(e){
                    e.stop();
                    if(this.id != lhelem) {
                        this.removeClass('hover');
                    }
                });
                
            });

        });
    }
    
});

//ie6 shizzle (diepe zucht)
var collectieIE6Fixes = new IE6Fixes({
    hoverElements: [
        'div#nav-main li',
        'div#grid-filter li'
    ]
});

var ObjectViewer = new Class({
    Implements: [Events, Options],
    
    //options / variables 
    options: {
        'viewport': null,
        'hotspots': null,
        'mainimage': null,
        'loader': null,
        'button-zoom': null,
        'button-zoom-out': null,
        'button-mark': null
    },
    zoomed: false,
    marked: true,
    provider: null,
    dragHandle: false,
    
    //dimensions

    initialize: function(options, provider) {
        if (!options.viewport){
            return;
        }
        this.setOptions(options);
        this.provider = provider;
        
        //previous / next
        this.setupEventListeners();
        this.dragHandle = new Drag(this.options['viewport']
        ,{preventDefault:true,stopPropagation:true}
        );
        this.dragHandle.detach();
        /*$('myDeactivator').addEvent('click', function(){
            alert('No more dragging for you, Mister.');
            myDrag.detach();
        });*/
        
        this.zoomtext = this.options['button-zoom'].get('text');
        this.zoomouttext = this.options['button-zoom-out'].get('text');

    },
    
    setupEventListeners: function(){
    
        this.options['button-zoom'].addEvent('click', function(e){
            this.toggleZoom(e);
            return false;
        }.bind(this));
        
        
        if(this.options['button-mark']) {
            this.options['button-mark'].addEvent('click', function(e){
                this.toggleMark(e);
              }.bind(this));
        }
        
        if(this.options['hotspots']) {
            var listHotspots = this.options['hotspots'].getElements('li');
            
            listHotspots.each(function(el, i) {
                el.addEvent('mouseover', function(e){
                    var styleClass = this.get('class');
                    var artefactsContainer = $$('div.' + styleClass);
                    if(artefactsContainer){
                        artefactsContainer.addClass('item-scroller-active');
                    }
                });
                el.addEvent('mouseout', function(e){
                    var styleClass = this.get('class');
                    var artefactsContainer = $$('div.' + styleClass);
                    if(artefactsContainer){
                        artefactsContainer.removeClass('item-scroller-active');
                    }
                });
            },this);
        }
        
    },
    
    
    toggleZoom: function(event){
        var viewport = this.options['viewport'];
        var image = this.options['mainimage'];
        var button = this.options['button-zoom'];
        var buttonout = this.options['button-zoom-out'];
        var zoomtext = this.zoomtext;
        var zoomouttext = this.zoomouttext;
        var zoomed = this.zoomed;
        var loader = this.options['loader'];

        image.removeEvents();

        if (this.zoomed){ //zoom out
            viewport.addClass('zoomed-out');
            viewport.removeClass('zoomed-in');
            image.setAttribute('src', this.original_image);
            button.removeClass('active');
            button.set('text', zoomtext);
            this.dragHandle.detach();
        }
        else { //zoom in
            loader.setStyle('display', 'block');
            button.set('text', zoomouttext);
            viewport.removeClass('zoomed-out');
            this.original_image = image.getAttribute('src');
            image.setAttribute('src', event.target.href);
            button.addClass('active');
            //alert(viewport.getStyle('height').toInt());
            //1231 - 500 = 732
            var dragHandle = this.dragHandle;

            image.addEvent('load', function(e) {
                loader.setStyle('display', 'none');
                viewport.addClass('zoomed-in');
                dragHandle = new Drag(image
                    ,{preventDefault:true,stopPropagation:true}
                );
                dragHandle.setOptions({limit:{'x': [viewport.getWidth()-image.getWidth(),0], 'y': [viewport.getHeight()-image.getHeight(),0]}});//TODO dynamic
                dragHandle.attach();
            }, this);
        }
        this.zoomed = !this.zoomed;
    },
    
    toggleMark: function(){
        var hotspots = this.options['hotspots'];
            var button = this.options['button-mark'];
            if (this.marked){
                hotspots.removeClass('active');
            button.removeClass('active');
            button.set('text','artefacten markeren');
        }
        else {
            hotspots.addClass('active');
            button.addClass('active');
            button.set('text','artefacten demarkeren');
        }
        this.marked = !this.marked;
    }
    
});