﻿// JScript File
    imageLoaded = function(img){if (!img.complete) {return false;} if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {return false;} return true;}
    if (window.HTMLElement) HTMLElement.prototype.contains = function(element) {if (element == this) return true; return !element ? false : this.contains(element.parentNode);};
    clsChild = function(classname, element){ var c=Array.from(element.childNodes.length?element.childNodes:[]); return !classname ? c : c.filter(function(child){ return child.className && child.className.split(' ').indexOf(classname) > -1;});}
    if (window.location.href.indexOf("localhost")!=-1) photoServiceURL = "/HayesImagesAjax/PhotoService.asmx";
    else photoServiceURL = "/PhotoService.asmx";    
    enhanced = true;
    debug = false;
        
    PhotoFinder = 
    {
        search: function(searchType, value, limit)
        {
            var soap = new SOAPEnvelope('SearchPhotos', 'http://www.hayesimages.com/photos/2006/request');
            var soapArgs = {};
            soapArgs[searchType]=value;
            if(limit) soapArgs['limit']=limit;
            soap.send(photoServiceURL, soapArgs, this.onSearchReturn);        
        },
        onSearchReturn: function(payload)
        {
            var root = XML.tag(payload, "*", "PhotoList");
            PhotoFinder.clearThumbs();
            showIntro( false );
            if (!root || !root.childNodes.length) 
                return Echo.show("No results found. Please search again.");
            for(var i=0; i<root.childNodes.length; i++)
            {
                var nd = root.childNodes[i];
                var id = XML.tag(nd, "*", "photoID").firstChild.nodeValue; 
                var title = XML.tag(nd, "*", "title").firstChild.nodeValue;
                var a = Element.appendChild($("thumbs"),"a",{
                    id:id,
                    className:"thumbWrapper",
                    href:"#"
                })
                Element.appendChild(a, "img",{
                    className:"photoThumb",
                    src:"photothumb/"+id+".jpg",
                    alt:title
                });   
            }
            PhotoFinder.wrapPhotoThumbs();
            try{pageTracker._trackPageview("/default.aspx" );}catch(e){}
        },
        wrapPhotoThumbs: function()
        {         
            var c = Collection.get("thumbWrapper").concat(Collection.get("thumbWrapper", "largeMapFrame"));
            for (var i=0; i<c.length; i++)
            {      
                Events.add(c[i], "mouseover", function(){ImageViewer.previewSmall(this)});
                Events.add(c[i], "focus",     function(e){ImageViewer.previewSmall(this)});
                Events.add(c[i], "blur",      function(e){ImageViewer.hideSmall(this)});
                Events.add(c[i], "click",     function(e){if (imageLoaded(this.childNodes[0])) ImageViewer.show(this)});
            }
            c=null;         
        },
        clearThumbs: function()
        {
            $("thumbs").innerHTML = "";
        }
    }

    /* ________________________________________________________________ */
    
    btnSearchSubmit_onclick = function(e)
    {
        if (!enhanced) (Events.translate(e).target).form.submit();
        else
        {
            var type = $('inputSearchType').value;
            var search = $('inputSearchValue').value;
            PhotoFinder.search(type, search);
            Events.stop(e);
        }
    }
    
    inputSearchValue_onkeypress = function(e)
    {
        var e = e||event;
        if(e && e.keyCode && e.keyCode==13) {btnSearchSubmit_onclick(e);return false}
    }
    
    toggle = function(title, forceOpen)
    {
        var container = cls("container", title.parentNode)[0];
        var open = (typeof forceOpen=='boolean')?forceOpen:!Element.hasClass(title, title._class+"-open");
        if (open){
            Element.appendClass(title, title._class+"-open");
           Element.appendClass(container, container._class+"-open");
        }
        else{
            Element.removeClass(title, title._class+"-open");
            Element.removeClass(container, container._class+"-open");
        } 
    }
     
    drop_onmouseout = function(e)
    {
        e = window.event||e;  var toEl=e.toElement||e.relatedTarget;
        if(!toEl || this==toEl || this.contains(toEl)) return;                              
        var titles = clsChild("drop-title", this );
        if( titles.length && Element.hasClass(titles[0], "drop-title-open")) toggle(titles[0], false);
    }
    
    drop_onmouseover = function(e)
    {
         e = window.event||e;  var fromEl=e.fromElement||e.currentTarget;
         if(fromEl && this!=fromEl && this.contains(fromEl)) return;        
         var titles = cls("drop-title", this); 
         if(titles.length) toggle(titles[0],true);
    }

    folderTitle_onclick = function()  { toggle(this);}
    folderTitle_onkeypress = function(e){if((e||event).keyCode==13) toggle(this)} 
    
    queryItem_onclick = function(e)
    {
        if (enhanced) this.href="#";
        if(Element.hasClass(this, "drop-title")) toggle(this) ;
        else if (enhanced)
        {
            var type = this.getAttribute("searchType");
            showIntro( type == "home" );
            ImageViewer.hideSmall();
            if (type != "home" )
                PhotoFinder.search(type, this.getAttribute("value"), this.getAttribute("limit"));
            else
                PhotoFinder.clearThumbs();
            Events.stop(e);
        }
    }
   
    showIntro = function(state)
    {
        Echo.hide();
        var o = $("ctl00_ContentPlaceHolder_IntroductionPanel")
        if (o) o.style.display = (state)?"block":"none";
        else  document.location = document.location.pathname;
    }
    
    /* ________________________________________________________________ */
    
    ImageViewer =  {
        active: false,
        current: null,
        setup: function()
        {
            PhotoFinder.wrapPhotoThumbs();
            Events.add("thumbPreviewContainer", "mouseout", function(event){
                    if(this.contains(event.toElement))return;
                    else(this.style.visibility = "hidden");
            });
            Events.add("thumbPreviewContainer","click", function(e){ImageViewer.show();  Events.stop(e); });
            Events.add("imageWrapperClient", "click", function(e){  ImageViewer.hide();  Events.stop(e);  });
            Events.add("imageScreen", "click", function(e){         ImageViewer.hide();  Events.stop(e);  });
            Events.add("showDetails", "click", function(e){         ImageViewer.toggleDetails(); Events.stop(e); });
            Events.add("showMap", "click", function(e){             ImageViewer.toggleMap(); Events.stop(e);});
         },
        centerView: function(element)
        {
            var getScroll = function(){
                if(self.pageYOffset) return self.pageYOffset;
                if(document.documentElement && document.documentElement.scrollTop)return document.documentElement.scrollTop;
                else if (document.body) return document.body.scrollTop;
            }
            if(typeof element=='string') element = $(element); if (!element) return;
            var html = tags('html')[0];
            element.style.left = ((html.clientWidth/2) - (element.offsetWidth/2)) + "px";
            element.style.top  = ((html.clientHeight/2) - (element.offsetHeight/2))+ (getScroll()||0) + "px";
        },
        hideSmall: function(element)
        {
            if(enhanced) $('thumbPreviewContainer').style.visibility = "hidden";
        },
        previewSmall: function(element)
        {
            if(!enhanced) return;
            this.hide();
            var thumbImgs = element.getElementsByTagName("img");
            if(!thumbImgs.length || !imageLoaded(thumbImgs[0])) return;
            this.current = element;
            var previewImg = $('thumbPreview');
                previewImg.src = "photothumb/"+element.id+".jpg";
                previewImg.currentEl = element;
            var offsets = Position.getOffsets(element);
            var o = $('thumbPreviewContainer');
                o.style.left = (offsets.left - (o.offsetWidth - offsets.width)/2)+"px";
                o.style.top = (offsets.top - (o.offsetHeight - offsets.height)/2)+"px" ;
                o.style.visibility = "visible";
        },
        resize: function()
        {
            if(!this.active) return;
            showScreen();
            ImageViewer.centerView('imageWrapperClient');
        },
        show: function()
        {
            if(!this.current || !this.current.id) return;
            this.hide();
            showScreen();
            $('thumbPreviewContainer').style.visibility = 'hidden';
            Element.appendClass('imageWrapperClient', 'loading');
            Element.removeClass('imageLoading', 'hide');
            this.centerView('imageLoading');
           
            var img = $('imageLarge');
            var display = function()
            {
                new Effect['Appear']('imageWrapperClient', 200);
                Element.appendClass('imageLoading', 'hide');
                Element.appendClass('imageWrapperClient', 'ready');
                $('imageFrame').style.width = $('imageLarge').offsetWidth+15+"px";
                $('imageDetails').style.width = $('imageLarge').offsetWidth + "px";
                ImageViewer.centerView('imageWrapperClient');
            } 
            if(typeof img.onreadystatechange=="object")
                img.onreadystatechange= function(){if (img.readyState=="complete") display();}
            else
                img.onload = function() {display();}
        
            img.src = "photobig/"+this.current.id+".jpg";
            
            this.requestDetails(this.current.id);
            this.active = true;
            try{pageTracker._trackPageview("/default.aspx" );}catch(e){}
        },
        hide: function()
        {
            if (!this.active) return; 
            ImageViewer.toggleMap(true);
            Element.appendClass('imageLoading', 'hide');
            Element.removeClass('imageWrapperClient', "loading");
            Element.removeClass('imageWrapperClient', "ready");
            hideScreen();
            this.active = false;
        },
        next: function()
        {
            if (!this.active || !this.current) return;
            var c = cls('thumbWrapper');
            var i = c.indexOf(this.current);
            if ( i+1 < c.length ) {
                this.current = c[i+1];
                this.show();
            }
            else this.hide()
        },
        previous: function()
        {
            if (!this.active || !this.current) return;
            var c = cls('thumbWrapper');
            var i = c.indexOf(this.current);
            if ( i > 0 ) {
                this.current = c[i-1];
                this.show();
            }
            else this.hide()
        },
        requestDetails: function(photoID)
        {
            var callback = function(payload)
            {
                $("imageDetails").innerHTML = "";
                var getVal = function(node, val){
                    var s = XML.tag(node, "*", val);
                    if(s && s.firstChild) return s.firstChild.nodeValue; 
                    return "";     
                }
                var root = XML.tag(payload, "*", "PhotoDetails");
                if (!root || !root.childNodes.length) return;
                          
                var title = getVal(root, "title");
                var location = getVal(root, "city") +", " + getVal(root, "country");
                $('imageLarge').title = title + ": "+ location;
                $("imageTitle").innerHTML = title;
                $("imageLocation").innerHTML = location;
                $("imageDetails").innerHTML =   
                    "<span class='description'>"+ getVal(root, "description") +"<span><br/>";
                var m = $("mapFrame");
                    m.latitude  = getVal(root, "latitude")||getVal(root, "aprx_lat");
                    m.longitude = getVal(root, "longitude")||getVal(root, "aprx_lng");
                    m.approximate = (getVal(root, "longitude")=="");
            }
            var soap = new SOAPEnvelope('GetPhotoInfo', 'http://www.hayesimages.com/photos/2006/request');
            var soapArgs = {photoID:photoID};
            soap.send(photoServiceURL, soapArgs, callback);
        },
        toggleDetails: function()
        {
            Element.toggleClass('imageDetails', 'hide');
            $('showDetails').innerHTML = Element.hasClass('imageDetails', 'hide')?"[ show <u>d</u>etails ]":"[ hide <u>d</u>etails ]";
        },
        toggleMap: function(forceClosed)
        {
            if (!this.active || !this.current) return;
            if (GBrowserIsCompatible()) 
            {
                var mFrame = $('mapFrame');
                var mapOn = (forceClosed)? false: (mFrame.currentStyle.display=='none');  
                $('showMap').innerHTML = (mapOn)?"[ >photo ]":"[ <u>m</u>ap ]";
                if (forceClosed)
                {
                    mFrame.style.display="none";
                }
                else
                {
                    var offsets = Position.getOffsets('imageLarge');
                    mFrame.style.top = offsets.top+"px";
                    mFrame.style.left = offsets.left+"px";
                    mFrame.style.height = offsets.height+"px";
                    mFrame.style.width = offsets.width+"px";
                    mFrame.style.display=(mapOn)?"block":"none";
                }
                if (mapOn)
                {
                    var map = new GMap2(document.getElementById('mapFrame'));
                        map.addControl(new GLargeMapControl());
                        map.addControl(new GMapTypeControl());
                    var zoom = (mFrame.approximate)?6:13;
                    var point = new GLatLng(mFrame.latitude, mFrame.longitude);
                    map.setCenter(point, zoom, G_HYBRID_MAP);
                    var marker = new GMarker(point);  
                    map.addOverlay(marker); 
                    var infoText = (mFrame.approximate)?"<div>(Location approximate)<div>":"";
                    marker.openInfoWindowHtml("<div class='map-marker'>" + $("imageLocation").innerHTML + infoText +"</div>");
                }
                else
                {
                    //getCurrentMapType -> save for later use
                }
            }
            else if(!forceClosed) alert("Your browser doesn't support mapping.")
        }
    }
    
    /* ________________________________________________________________ */
        
    Echo =  {
        show: function(str){
            $('messageBox').innerHTML = str; Element.show($('messageBox'));
            ImageViewer.centerView('messageBox');
        },
        hide: function() {
            $('messageBox').innerHTML = ""; Element.hide($('messageBox'));
        }
    }
    
    window_onload = function() 
    {   
        enhanced = ((browser.msie || browser.gecko) && !debug) ;
        XML.NS.photoreq = 'http://www.hayesimages.com/photos/2006/request';
        XML.NS.photolist = 'http://www.hayesimages.com/photos/2006/list';
        cls("drop", "queries").forEach(function(drop){
            drop.onmouseout = drop_onmouseout;
            drop.onmouseover = drop_onmouseover;
        })
        cls("folder-title", "queries").forEach( function(o){
            o.onclick = folderTitle_onclick;
            o.onkeypress = folderTitle_onkeypress;
           });
        tags("A", "queries").forEach(           function(o){o.onclick = queryItem_onclick;  });
        tags("*", "queries").forEach(           function(element){
            if( element.className ) {
                var c = element.className.split(" ");
                if(c.length) element._class = c[c.length-1];    
            }
        })
       $('inputSearchValue').onkeypress = inputSearchValue_onkeypress;
       $('btnSearchSubmit').onclick = btnSearchSubmit_onclick;
        ImageViewer.setup();
        if($('largeMapFrame')) mapWrapper.initialize('largeMapFrame');
    }
    
    window_onunload = function() { GUnload(); } // GoogleAPI: Fix google memory leakage;
    
    window.document.onkeydown = function(e)
    {
       e = window.event||e; 
       if (e.keyCode == '37') ImageViewer.previous();
       if (e.keyCode == '39') ImageViewer.next();
       if (e.keyCode == '68') ImageViewer.toggleDetails();
       if (e.keyCode == '77') ImageViewer.toggleMap();
       if (e.keyCode == '88') ImageViewer.hide();
    }
    
    window.onresize = function()
    {
        ImageViewer.resize();
}