var ThumbTimers = new Array( );
var MapClickListener = null;
var SettingLocation = false;

window.TabCount = 1;
window.ActiveTab = "Map";
window.TabList = new Array ();

function ClickImage ( E )
{
    var Button = 0;

    if( document.all && !window.opera )
    {
        if( event.button == 1 )
            Button = 1;
        else if( event.button == 4 )
            Button = 2;
    }
    else
    {
        if( E.which <= 2 )
            Button = E.which;
    }
    
    if( Button == 1 )
        HidePictureMenu( this.ImgID );

    if( Button == 1 || Button == 2 )
        AddImageTab( this.ImgID, this.ImgThumb, this.ImgHeight, Button );

    return false;
}

function ClickStack ( E )
{
    var Button = 0;

    if( document.all && !window.opera )
    {
        if( event.button == 1 )
            Button = 1;
        else if( event.button == 4 )
            Button = 2;
    }
    else
    {
        if( E.which <= 2 )
            Button = E.which;
    }
    
    if( Button == 1 )
    {
    //  Left-click: Show Pictures
        ZoomStack( this.ImgID, this.ImgUnder );
    }
    else
    {
    //  Middle-click: List Pictures
        ListStack( this.ImgID );
    }

    return false;
}

function AddCPanelTab ( )
{
    var Div = document.getElementById("Tab_CPanel");
    if( Div )
    {
    //  Already open

        ShowTab( "CPanel" );
        return;
    }

    var TabBar = document.getElementById("Tabs");
    var Left = 88 * TabBar.childNodes.length;
    
    if( document.getElementById("Tab_Map") == null )
    {
    //  First create the map tab
    
        var BarContainer = document.getElementById("TabBarContainer");

        Div = document.createElement( "div" );
        Div.ImgID = "Map";
        Div.id = "Tab_Map";
        Div.className = "TabBar_Map";
        Div.onmousedown = ClickTab;
        Div.onmouseover = OverTab;
        Div.onmouseout = OutTab;

        BarContainer.appendChild( Div );
    }
    
    window.TabList[window.TabCount-1] = "CPanel";
    
    Div = document.createElement( "div" );
    
    Div.ImgID = "CPanel";
    Div.id = "Tab_CPanel";
    Div.className = "TabBar_CPanelOpen";
    Div.onmousedown = ClickTab;
    Div.onmouseover = OverTab;
    Div.onmouseout = OutTab;
    Div.style.left = Left + "px";

    TabBar.appendChild( Div );
    TabBar.style.width = (TabBar.childNodes.length * 88) + "px";
    
    EvalTabBarScroll( 0 );
    
    window.TabCount ++;
    if( window.TabCount == 2 )
        OnResize( true );

    ShowTab( "CPanel" );
}

function AddImageTab ( ID, Thumb, Height, ButtonClicked )
{
    var Div;
    
    Div = document.getElementById("Tab_" + ID);
    if( Div )
    {
    //  Already open

        if( ButtonClicked == 1 )
            ShowTab( ID );
            
        return;
    }

    var TabBar = document.getElementById("Tabs");
    var Left = 88 * TabBar.childNodes.length;
    
    if( document.getElementById("Tab_0") == null )
    {
    //  First create the map tab
    
        var BarContainer = document.getElementById("TabBarContainer");

        Div = document.createElement( "div" );
        Div.ImgID = "Map";
        Div.id = "Tab_Map";
        
        if( ButtonClicked == 1 )
            Div.className = "TabBar_Map";
        else
            Div.className = "TabBar_MapOpen";

        Div.onmousedown = ClickTab;
        Div.onmouseover = OverTab;
        Div.onmouseout = OutTab;

        BarContainer.appendChild( Div );
    }
    
    window.TabList[window.TabCount-1] = ID;
    
    Div = document.createElement( "div" );
    
    Div.id = "Tab_" + ID;

    if( ButtonClicked == 1 )
        Div.className = "TabBar_ImageOpen";
    else
        Div.className = "TabBar_Image";

    Div.style.left = Left + "px";
    
    var Image = document.createElement( "div" );
    Image.ImgID = ID;

    Image.className = "Tab";
    Image.style.backgroundImage = "url(thumbnails/" + Thumb + ")";
    Image.style.backgroundPosition = "-80px -" + ((Height-40)/2) + "px";
    Image.onmousedown = ClickTab;
    Image.onmouseover = OverTab;
    Image.onmouseout = OutTab;
    
    Div.appendChild( Image );

    TabBar.appendChild( Div );
    TabBar.style.width = (TabBar.childNodes.length * 88) + "px";
    
    EvalTabBarScroll( 0 );
    
    window.TabCount ++;
    if( window.TabCount == 2 )
        OnResize( true );

    if( ButtonClicked == 1 )
        ShowTab( ID );
}

function CloseTab ( ID )
{
    if( ID != "Map" )
    {
        if( window.ActiveTab == ID )
        {
            if( window.TabCount <= 2 )
                ShowTab( "Map" );
            else
            {
                if( window.TabList[window.TabCount-2] == ID )
                    ShowTab( window.TabList[window.TabCount-3] );
                else
                    ShowTab( window.TabList[window.TabCount-2] );
            }
        }
        
        for( var N = 0; N < window.TabList.length; N ++ )
        {
            if( window.TabList[N] == ID )
            {
                for( var S = N; S < window.TabList.length-1; S ++ )
                {
                    window.TabList[S] = window.TabList[1+S];

                    document.getElementById("Tab_" + window.TabList[1+S]).style.left = (88*S) + "px";
                }

                break;
            }
        }
        
        window.TabList.pop();
        window.TabCount --;
        
        var TabBar = document.getElementById("Tabs");
        var Tab = document.getElementById("Tab_" + ID);

        TabBar.removeChild( Tab );

        Tab.id = "";
        Tab = null;

        if( window.TabCount > 1 )
            EvalTabBarScroll( 0 );
        else
            OnResize( true ); // Do this to remove the tab bar
    }
}

function OverTab ( )
{
    if( window.TabCount > 0 && window.ActiveTab != this.ImgID )
    {
        if( this.ImgID == "Map" )
            document.getElementById("Tab_" + this.ImgID).className = "TabBar_MapOver";
        else if( this.ImgID == "CPanel" )
            document.getElementById("Tab_" + this.ImgID).className = "TabBar_CPanelOver";
        else
            document.getElementById("Tab_" + this.ImgID).className = "TabBar_ImageOver";
    }
}

function OutTab ( )
{
    if( window.TabCount > 0 && window.ActiveTab != this.ImgID )
    {
        if( this.ImgID == "Map" )
            document.getElementById("Tab_" + this.ImgID).className = "TabBar_Map";
        else if( this.ImgID == "CPanel" )
            document.getElementById("Tab_" + this.ImgID).className = "TabBar_CPanel";
        else
            document.getElementById("Tab_" + this.ImgID).className = "TabBar_Image";
    }
}

function ClickTab ( E )
{
    ShowTab( this.ImgID );
}

function ShowTab ( ID )
{
    if( window.ActiveTab != ID )
    {
        if( window.ActiveTab == "Map" && GoogleMap != null )
            GoogleMap.disableDragging();

        var Width = GetWindowWidth();
        var Height = GetWindowHeight();
        var TopOfMap = 0;
        
        var ClientW = Width - 16;
        var ClientH = Height - 8;

        if( window.TabCount > 1 )
        {
            TopOfMap += 52;
            ClientH -= 52;
        }

        if( ID != "Map" && ID != "CPanel" )
        {
            var Div = document.getElementById("ImageFrame");
            Div.width  = ClientW;
            Div.height = ClientH;
            
            frames["ImageFrame"].location.href = "http://pixplot.com/" + ID + ".jpg";
            
            document.getElementById("MapContainer").style.display = "none";
            document.getElementById("CPanelContainer").style.display = "none";

            var Contents = document.getElementById("ImageContainer");
            Contents.style.left   = "8px";
            Contents.style.top    = (8+TopOfMap) + "px";
            Contents.style.width  = ClientW + "px";
            Contents.style.height = ClientH + "px";
            Contents.style.display = "block";
        }
        else if( ID == "Map" )
        {
            frames["ImageFrame"].location.href = "about:blank";

            document.getElementById("ImageContainer").style.display = "none";
            document.getElementById("CPanelContainer").style.display = "none";

            var Contents = document.getElementById("MapContainer");
            Contents.style.left   = "8px";
            Contents.style.top    = (8+TopOfMap) + "px";
            Contents.style.width  = ClientW + "px";
            Contents.style.height = ClientH + "px";
            Contents.style.display = "block";
        }
        else if( ID == "CPanel" )
        {
            var Div = document.getElementById("CPanelFrame");
            Div.width  = ClientW;
            Div.height = ClientH;
            
            frames["CPanelFrame"].location.href = "http://pixplot.com/CPanel";
            frames["ImageFrame"].location.href = "about:blank";

            document.getElementById("ImageContainer").style.display = "none";
            document.getElementById("MapContainer").style.display = "none";

            var Contents = document.getElementById("CPanelContainer");
            Contents.style.left   = "8px";
            Contents.style.top    = (8+TopOfMap) + "px";
            Contents.style.width  = ClientW + "px";
            Contents.style.height = ClientH + "px";
            Contents.style.display = "block";
        }
        
        if( window.ActiveTab == "Map" )
            document.getElementById("Tab_" + window.ActiveTab).className = "TabBar_Map";
        else if( window.ActiveTab == "CPanel" )
            document.getElementById("Tab_" + window.ActiveTab).className = "TabBar_CPanel";
        else
            document.getElementById("Tab_" + window.ActiveTab).className = "TabBar_Image";
        
        window.ActiveTab = ID;

        if( window.ActiveTab == "Map" )
            document.getElementById("Tab_" + window.ActiveTab).className = "TabBar_MapOpen";
        else if( window.ActiveTab == "CPanel" )
            document.getElementById("Tab_" + window.ActiveTab).className = "TabBar_CPanelOpen";
        else
            document.getElementById("Tab_" + window.ActiveTab).className = "TabBar_ImageOpen";
            
        if( window.ActiveTab != "Map" && window.ActiveTab != "CPanel" )
        {
            if( frames["ImageFrame"].Loaded == true )
                frames["ImageFrame"].OnResize( ClientW, ClientH );
        }
        else if( window.ActiveTab == "Map" )
        {
            document.title = "PixPlot";

            if( GoogleMap != null )
            {
                GoogleMap.enableDragging();
                GoogleMap.checkResize( );
                
                StopMoving( );
            }
            else
                CreateMap( );
        }
        else if( window.ActiveTab == "CPanel" )
        {
            document.title = "PixPlot";
            
            if( frames["CPanelFrame"].Loaded == true )
                frames["CPanelFrame"].OnResize( ClientW, ClientH );
        }
    }
}

function MouseOutImage ( )
{
    if( window.HidePictureMenuTimer )
        window.HidePictureMenuTimer( this.ImgID, this.ImgUnder );
}

function MouseOverImage ( )
{
    if( window.ShowPictureMenu )
        window.ShowPictureMenu( this.ImgID );
}

function ListStack ( ID )
{
    var URL = "./Stack?ID=" + ID + "&Zoom=" + GoogleMap.getZoom() + "&MinTime=" + DateFilter;
    frames["ZoomFrame"].location.href = URL;
}

function ZoomStack ( ID, Under )
{
    GoogleMap.enableDragging();

    var URL = "./Zoom?ID=" + ID
                + "&Zoom=" + GoogleMap.getZoom()
            + "&NumUnder=" + Under
             + "&MinTime=" + DateFilter;

    frames["ZoomFrame"].location.href = URL;
}

function CenterStack ( Lat, Lon )
{
    GoogleMap.panTo( new GLatLng(Lat, Lon) );
}

function ClickZoom ( )
{
    ZoomStack( this.ImgID, this.ImgUnder );
}

function ClickList ( )
{
    ListStack( this.ImgID );
}

function ClickCenter ( )
{
    CenterStack( this.ImgLat, this.ImgLon );
}

function StopPictureMenuTimer ( ID )
{
    if( ThumbTimers[ID] )
    {
        clearTimeout( ThumbTimers[ID] );
        ThumbTimers[ID] = null;
    }
}

function HidePictureMenuTimer ( ID )
{
    StopPictureMenuTimer( ID );
    
    ThumbTimers[ID] = setTimeout( "HidePictureMenu(" + ID + ")", 100 );
}

function GetPx ( StrValue )
{
    return parseInt( StrValue.substring(0, StrValue.length-2) );
}

function OverThumbCmd ( )
{
    StopPictureMenuTimer( this.ImgID );
    
    this.style.backgroundPosition = "-80px " + this.ImgYOffset;
}

function OutThumbCmd ( )
{
    HidePictureMenuTimer( this.ImgID );

    this.style.backgroundPosition = "0px " + this.ImgYOffset;
}

function ShowPictureMenu ( ID )
{
    GoogleMap.disableDragging();

    if( !SettingLocation )
    {
        StopPictureMenuTimer( ID );
        
        var Picture = document.getElementById("Picture_" + ID);
        if( Picture )
        {
            if( document.all && !window.opera )
            {
            //  Internet Explorer hack to display PNG alpha transparency

                Picture.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='thumbnails/" + Picture.name + "', sizingMethod='crop')";
                Picture.style.backgroundImage = 'url(graphics/Transparent.gif)';
            }
            else
                Picture.style.backgroundPosition = "0 0";
        }
        
        document.getElementById("ThumbBox_" + ID).style.zIndex = 10;
        document.getElementById("ThumbMenu_" + ID).style.display = "block";

        for( var C = 1; C <= 4; C ++ )
        {
            var Cmd = document.getElementById("ThumbCmd" + C + "_" + ID);
            if( Cmd )
            {
                if( C == 1 )
                    Cmd.style.backgroundPosition = "-80px " + Cmd.ImgYOffset;
                else
                    Cmd.style.backgroundPosition = "0px " + Cmd.ImgYOffset;
            }
        }
    }
}

function HidePictureMenu ( ID )
{
    GoogleMap.enableDragging();

    var Picture = document.getElementById("Picture_" + ID);
    if( Picture )
    {
        if( document.all && !window.opera )
        {
        //  Internet Explorer hack

            Picture.style.filter = "";
            Picture.style.backgroundImage = 'url(thumbnails/' + Picture.name + ')';
        }
        else
            Picture.style.backgroundPosition = "-80px 0";
    }
    
    var ThumbBox = document.getElementById("ThumbBox_" + ID);
    if( ThumbBox )
        ThumbBox.style.zIndex = 1;
    
    var ThumbMenu = document.getElementById("ThumbMenu_" + ID);
    if( ThumbMenu )
        ThumbMenu.style.display = "none";
}

function MapThumbnail ( Center, NumUnder, ID, Thumb, Width, Height, Title )
{
    this.Center = Center;
    this.NumUnder = NumUnder;
    this.ID = ID;
    this.Thumb = Thumb;
    this.Width = Width;
    this.Height = Height;
    this.Title = Title;
    this.Visible = true;
        
    ThumbTimers[ID] = null;
}

MapThumbnail.prototype = new GOverlay( );

MapThumbnail.prototype.initialize = function(Map)
{
    var Div;
    var Child;
    var Inner;
    
    var NumLayers = 0;

    if( this.NumUnder > 0 )
        NumLayers ++;
    
    if( this.NumUnder >= 4 )
        NumLayers ++;

    if( this.NumUnder >= 9 )
        NumLayers ++;

    if( this.NumUnder >= 24 )
        NumLayers ++;

    if( this.NumUnder >= 100 )
        NumLayers ++;

    if( this.NumUnder >= 250 )
        NumLayers ++;

    if( this.NumUnder >= 1000 )
        NumLayers ++;

    if( this.NumUnder >= 2500 )
        NumLayers ++;

    if( this.NumUnder >= 10000 )
        NumLayers ++;

    if( NumLayers > 0 )
    {
        Div = document.createElement( "div" );
        Div.id = "ThumbStack_" + this.ID;
        Div.className = "ThumbBox";
        Div.style.backgroundColor = "transparent";
        Div.style.zIndex = "0";
        Div.style.width = this.Width + "px";
        Div.style.height = this.Height + "px";

        for( var L = 0; L < NumLayers; L ++ )
        {
            Child = document.createElement( "div" );
            Child.className = "ThumbStack_Bottom";
            Child.style.overflow = "hidden";
            
            if( L == 0 )
            {
                Child.style.width = this.Width + "px";
                Child.style.height = "3px";
                Child.style.left = (2+(3*L)) + "px";
                Child.style.top = (1+(4*L)+this.Height) + "px";
            }
            else if( L <= 2 )
            {
                Child.style.width = this.Width + "px";
                Child.style.height = "2px";
                Child.style.left = (4+(2*(L-1))) + "px";
                Child.style.top = (5+(3*(L-1))+this.Height) + "px";
            }
            else
            {
                Child.style.width = this.Width + "px";
                Child.style.height = "1px";
                Child.style.left = (7+(1*(L-3))) + "px";
                Child.style.top = (11+(2*(L-3))+this.Height) + "px";
            }
            
            Div.appendChild( Child );

            Child = document.createElement( "div" );
            Child.className = "ThumbStack_Right";
            Child.style.overflow = "hidden";
            
            if( L == 0 )
            {
                Child.style.width = "2px";
                Child.style.height = this.Height + "px";
                Child.style.left = (1+(3*L)+this.Width) + "px";
                Child.style.top = (3+(4*L)) + "px";
            }
            else if( L <= 2 )
            {
                Child.style.width = "1px";
                Child.style.height = this.Height + "px";
                Child.style.left = (4+(2*(L-1))+this.Width) + "px";
                Child.style.top = (6+(3*(L-1))) + "px";
            }
            else
            {
                Child.style.width = "0px";
                Child.style.height = this.Height + "px";
                Child.style.left = (8+(1*(L-3))+this.Width) + "px";
                Child.style.top = (11+(2*(L-3))) + "px";
            }
            
            Div.appendChild( Child );
        }

        Map.getPane(G_MAP_MAP_PANE).appendChild( Div );
        this.Stack = Div;
    }
    else
        this.Stack = null;
    
    Div = document.createElement( "div" );
    Div.className = "ThumbBox";
    Div.id = "ThumbBox_" + this.ID;
    Div.style.width = this.Width + "px";
    Div.style.height = this.Height + "px";
    Div.style.zIndex = "1";
    
    var NumItems = 0;
    var Items = new Array( );
    
    if( this.NumUnder == 0 )
    {
        Items[NumItems++] = "VIEW";
        
        if( GoogleMap.getZoom() < 17 )
            Items[NumItems++] = "ZOOM";

        Items[NumItems++] = "CENTER";
    }
    else
    {
        if( GoogleMap.getZoom() < 17 )
            Items[NumItems++] = "EXPAND";

        Items[NumItems++] = "LIST ALL";
        Items[NumItems++] = "CENTER";
    }
    
    if( this.NumUnder == 0 )
    {
        Child = document.createElement( "div" );
        Child.ImgID = this.ID;
        Child.ImgUnder = this.NumUnder;
        Child.ImgThumb = this.Thumb;
        Child.ImgHeight = this.Height;

        Child.id = "Picture_" + this.ID;
        Child.name = this.Thumb;
        Child.onmousedown = ClickImage;
        Child.onmouseover = MouseOverImage;
        Child.onmouseout = MouseOutImage;
        Child.style.position = "absolute";
        Child.style.zIndex = "1000";
        Child.style.cursor = "pointer";
        Child.style.width = this.Width + "px";
        Child.style.height = this.Height + "px";
        Child.style.backgroundImage = "url(thumbnails/" + this.Thumb + ")";
        Child.style.backgroundPosition = "-80px 0";
    
        Div.appendChild( Child );
    }
    else
    {
        Child = document.createElement( "div" );
        Child.ImgID = this.ID;
        Child.ImgUnder = this.NumUnder;
        Child.ImgThumb = this.Thumb;
        Child.ImgHeight = this.Height;
        
        Child.id = "Picture_" + this.ID;
        Child.name = this.Thumb;
        Child.style.position = "absolute";
        Child.style.zIndex = "1000";
        Child.style.cursor = "pointer";
        Child.style.width = this.Width + "px";
        Child.style.height = this.Height + "px";
        Child.style.backgroundImage = "url(thumbnails/" + this.Thumb + ")";
        Child.style.backgroundPosition = "-80px 0";
        Child.onmouseover = MouseOverImage;
        Child.onmouseout = MouseOutImage;
        
        if( GoogleMap.getZoom() < 17 )
            Child.onmousedown = ClickStack;
        else
            Child.onmousedown = ClickList;
        
        Inner = document.createElement( "div" );
        Inner.className = "ThumbTextShadow";
        Inner.appendChild( document.createTextNode("(" + (1+this.NumUnder) + ")") );
        Child.appendChild( Inner );

        Inner = document.createElement( "div" );
        Inner.className = "ThumbText";
        Inner.appendChild( document.createTextNode("(" + (1+this.NumUnder) + ")") );
        Child.appendChild( Inner );
    
        Div.appendChild( Child );
    }
    
    Child = document.createElement( "div" );
    Child.id = "ThumbMenu_" + this.ID;
    Child.style.position = "absolute";
    Child.style.display = "none";
    Child.style.left = "-1px";
    Child.style.top = this.Height + "px";
    Child.style.width = "82px";
    Child.style.height = (2+(20*NumItems)) + "px";
    Child.style.backgroundColor = "black";
    Child.style.cursor = "pointer";

    for( var I = 0; I < NumItems; I ++ )
    {
        var Count = I+1;
        
        var Title = "";
        
        if( Items[I] == "VIEW" || Items[I] == "VIEW IMG" )
        {
            if( this.Title )
                Title = "click to view \'" + this.Title + "\'";
            else
                Title = "click to view this image";
        }
        else if( Items[I] == "EXPAND" )
            Title = "left-click to show this stack\'s images on the map";
        else if( Items[I] == "ZOOM" )
            Title = "left-click to zoom in";
        else if( Items[I] == "LIST ALL" )
            Title = "left-click to view all the images in this stack";
        else
            Title = "left-click to center the map here";
            
        Inner = document.createElement( "div" );
        Inner.ImgID = this.ID;
        
        Inner.style.top = (1+(I*20)) + "px";
        Inner.id = "ThumbCmd" + Count + "_" + this.ID;
        Inner.title = Title;
        Inner.onmouseover = OverThumbCmd;
        Inner.onmouseout = OutThumbCmd;
        Inner.className = "ThumbCmd";

        if( Items[I] == "VIEW" || Items[I] == "VIEW IMG" )
        {
            Inner.onmousedown = ClickImage;
            Inner.ImgYOffset = "-40px";
            Inner.ImgID = this.ID;
            Inner.ImgThumb = this.Thumb;
            Inner.ImgHeight = this.Height;
        }
        else if( Items[I] == "EXPAND" )
        {
            Inner.onclick = ClickZoom;
            Inner.ImgYOffset = "0px";
            Inner.ImgUnder = this.NumUnder;
        }
        else if( Items[I] == "ZOOM" )
        {
            Inner.onclick = ClickZoom;
            Inner.ImgYOffset = "-80px";
            Inner.ImgUnder = this.NumUnder;
        }
        else if( Items[I] == "LIST ALL" )
        {
            Inner.onclick = ClickList;
            Inner.ImgYOffset = "-20px";
        }
        else
        {
            Inner.onclick = ClickCenter;
            Inner.ImgYOffset = "-60px";
            Inner.ImgLat = this.Center.lat();
            Inner.ImgLon = this.Center.lng();
        }

        if( I == 0 )
            Inner.style.backgroundPosition = "-80px " + Inner.ImgYOffset;
        else
            Inner.style.backgroundPosition = "0px " + Inner.ImgYOffset;

        Child.appendChild( Inner );
    }

    Div.appendChild( Child );

    Map.getPane(G_MAP_MAP_PANE).appendChild( Div );
    
    this.Map = Map;
    this.Div = Div;
}

MapThumbnail.prototype.remove = function()
{
    this.Div.parentNode.removeChild( this.Div );
    
    if( this.Stack )
        this.Stack.parentNode.removeChild( this.Stack );
}

MapThumbnail.prototype.redraw = function(Force)
{
    if( !Force )
        return;
        
    var Center = this.Map.fromLatLngToDivPixel( this.Center );
    var L = Center.x - (this.Width / 2);
    var T = Center.y - (this.Height / 2);
    
    this.Div.style.left = L + "px";
    this.Div.style.top  = T + "px";
    
    if( this.Stack )
    {
        this.Stack.style.left = L + "px";
        this.Stack.style.top  = T + "px";
    }
}