

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Timeline</title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<link rel="stylesheet" type="text/css" href="/style.dcss" />
	<script type="text/javascript" src=/include/mootools-1.2-core-yc.js></script>
	<script type="text/javascript" src=/include/mootools-1.2-more-yc.js></script>
	<script type="text/javascript" src="/include/inc_basic.js"></script>
	<script type="text/javascript" src="/flash/swfobject.js"></script>
</head>
<body>
    
    <div id="extern">
    
    <div id="outer">
    <div id="menu">
        <div id="menuinner">
            <div id="logo">
                <h1><a href="/home"><span class="hide">The Ebbsfleet Landmark Project Limited</span></a></h1>
            </div>
            <div id="menuarea">
                <ul class="menu1">
<li class = " hasChildren" id='item1'><a  href="/artists-proposals/">Artists Proposals</a>
<ul class="menu2">
<li class = " hasChildren"><a  id='sub4' href="/artists-proposals/winning-landmark/">Winning Landmark</a></li>
<li><a  id='sub6' href="/artists-proposals/shortlisted-artists/">Shortlisted Artists</a></li>
</ul>
</li>
<li class = " hasChildren" id='item2'><a  href="/community/">Community</a>
<ul class="menu2">
<li><a  href="/community/exhibition/">Exhibition</a></li>
<li><a  href="/community/landmark-link/">Landmark Link</a></li>
<li><a  href="/community/culture-at-ebbsfleet-valley/">Culture At Ebbsfleet Valley</a></li>
</ul>
</li>
<li class = "childselectedl1 hasChildren" id='item3'><a  href="/context/">Context</a>
<ul class="menu2">
<li class = " hasChildren"><a  href="/context/overview/">Overview</a></li>
<li><a  href="/context/ebbsfleet-valley/">Ebbsfleet Valley</a></li>
<li><a  href="/context/ebbsfleet-international/">Ebbsfleet International</a></li>
<li><a  href="/context/context-map/">Context Map</a></li>
<li class = " selectedl2"><a  href="/context/timeline/">Timeline</a></li>
</ul>
</li>
<li class = " hasChildren" id='item4'><a  href="/founding-partners/">Founding Partners</a>
<ul class="menu2">
<li><a  href="/founding-partners/eurostar/">Eurostar</a></li>
<li><a  href="/founding-partners/land-securities/">Land Securities</a></li>
<li><a  href="/founding-partners/lcr/">LCR</a></li>
</ul>
</li>
<li class = " hasChildren" id='item5'><a  href="/selection-panel/">Selection Panel</a></li>
<li id='item6'><a  href="/press/">Press</a></li>
</ul>

                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <div id="central">


<script type="text/javascript">
    <!--//
    window.addEvent('domready',function(){
        var position=1-1;
        var limit;
        var inMotion = false;
        var boxes=$('timelinescreen').getChildren('div.timelinebox');
        limit=boxes.length.toInt()-3;
        
        
        //Slider
        var mySlide = new Fx.Morph('timelinescreen',{
            duration:1000,
            transition:Fx.Transitions.Quint.easeOut,
            onStart:function(){
                inMotion=true;
            },
            onComplete:function(){
                inMotion=false;
            }
        });
        //Calc width of slide
        $('timelinescreen').setStyle('width',147*(8+1));
        
        //right button
        $$('a[rel=right]').each(function(e){
            e.addEvent('click',function(i){
                if(inMotion==false){
                    if(position+1==limit){
                        $('tRight').setProperty('src','/images/timeline-right-off.gif');
                    }
                    
                    var currPos = $('timelinescreen').getStyle('left').toInt();
                    clRi = currPos - 148;
                    if(position<limit){
                        mySlide.start({'left':clRi});
                        $('tLeft').setProperty('src','/images/timeline-left-on.gif');
                        if(position!=limit){
                            position++;
                        }   
                    }
                }
                return false;
           });
        });
        
        //left buton
        $$('a[rel=left]').each(function(e){
            e.addEvent('click',function(i){
                if(inMotion==false){
                    if(position==1){
                        $('tLeft').setProperty('src','/images/timeline-left-off.gif');
                    }
                    var currPos = $('timelinescreen').getStyle('left').toInt();
                    clRi = currPos + 148;
                    if(position>0){
                        mySlide.start({'left':clRi});
                        $('tRight').setProperty('src','/images/timeline-right-on.gif');
                        if(position!=0){
                            position--;
                        }  
                    }
                }
                        
                return false;
           });
        });
        
        
    });
    //-->
</script>
<div>
<div id="left" class="tLineLeft">
   <h2>Timeline</h2>
       <div id="timeline">
    
            <div class="timelinenav" id="moveleft">
            
                <a rel="left" href="/context/timeline/1"><img id="tLeft" src="/images/timeline-left-off.gif" alt="Move Tineline Left" /></a>
            
            </div>
            <div id="oscreen">
            
                <div id="timelinescreen" style="left:1px">
                
                    <div class="timelinebox" >
                        <div class="timelinedate">May 2007</div>
                        <div class="timelinedesc">Project Launched</div>
                    </div>
                    
                    <div class="timelinebox" >
                        <div class="timelinedate">December</div>
                        <div class="timelinedesc">Artists Shortlisted</div>
                    </div>
                    
                    <div class="timelinebox" >
                        <div class="timelinedate">January 2008</div>
                        <div class="timelinedesc">Announcement of shortlisted artists</div>
                    </div>
                    
                    <div class="timelinebox" >
                        <div class="timelinedate">May 8th</div>
                        <div class="timelinedesc">Shortlisted artists' proposals unveiled</div>
                    </div>
                    
                    <div class="timelinebox" >
                        <div class="timelinedate">May 27th</div>
                        <div class="timelinedesc">Proposal exhibition at Bluewater between May 27th and August 26th</div>
                    </div>
                    
                    <div class="timelinebox" >
                        <div class="timelinedate">October</div>
                        <div class="timelinedesc">Announcement of shortlisted artists</div>
                    </div>
                    
                    <div class="timelinebox" >
                        <div class="timelinedate">January 2009</div>
                        <div class="timelinedesc">Announcement of winning artist
</div>
                    </div>
                    
                    <div class="timelinebox" >
                        <div class="timelinedate">2009 – ongoing</div>
                        <div class="timelinedesc">Planning application for winning proposal submitted</div>
                    </div>
                    
                    <div class="clear"></div>
                </div>
            </div>
            <div class="timelinenav" id="moveright">
            
                <a rel="right"  href="/context/timeline/2"><img id="tRight" src="/images/timeline-right-on.gif" alt="Move Timeline Right" /></a>
            
            </div>
            <div class="clear"></div>
            
    </div>
</div>
<div id="right" class="tLineRight">
    <div id="thumbcolumn"></div>
    <div id="righttext"></div>
    <!-- all boxed removed -->

    <div class="clear"></div>
</div>
<div class="clear"></div>
</div>


        </div>
        <div id="footer">
            <a href="/disclaimer">Disclaimer</a>
        </div>
    </div>
    
    
    </div>
    <script type="text/javascript" src="/include/taglinks.js"></script>
    <script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-9645496-22");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>

