var myChain = new Chain();
window.addEvent('domready', function() {
	
	var opts = {duration: 1000, steps: 8000};
	var opts2 = {duration: 1000, steps: 9000};
	var opts3 = {duration: 1000, steps: 7000};
	var opts4 = {duration: 1000, steps: 6000};
	var fx = new Fx.Cycle.shuffle('main1' ,  $merge({sizes:[80, 20]}, opts));
	var fx2 = new Fx.Cycle.shuffle('main2' , $merge({sizes:[80, 20]}, opts2));
	var fx3 = new Fx.Cycle.shuffle('main11' ,  $merge({sizes:[80, 20]}, opts3));
	var fx4 = new Fx.Cycle.shuffle('main12' , $merge({sizes:[80, 20]}, opts4));
	fx2.next();
	fx3.next();
	
	var moveW = new Fx.Move('logo', {duration:800, link:'chain'});
 
	$('logo').addEvent('click', function(event) {
		moveW.start(180, -180).start(-140, -80).start(90, 90).start(290, 390).start(490, 890).start(390, 690).start(90, 690).start(690, 90).start(0, 0);
	});
	
	$$('div.initial').fade(0);
	$$('ul.initial').fade(0);
	
	var showAll= function(){
			$$('div.initial').setStyle('display','block');
			$$('ul.initial').setStyle('display','block');
		$$('div.initial').fade(1);
		$$('ul.initial').fade(1);
	}

	myChain.chain(
function(){ 

		moveW.start(490, 490).start(490, 0).start(0,490).start(0, 0);
	},
	function(){ showAll(); },
	
	function(){
		/*
 * Ext JS Library 2.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license



Ext.onReady(function(){
	var cp = new Ext.state.CookieProvider({
       path: "/",
       expires: new Date(new Date().getTime()+(1000*60*60*24*3650))
   })
   Ext.state.Manager.setProvider(cp);

	Ext.util.CSS.swapStyleSheet('theme', '/ext/resources/css/xtheme-gray.css'); 

	
    // create the Data Store
    var store = new Ext.data.Store({
        // load using HTTP
       url: '/kiki/data/articles.xml',

        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
           // records will have an "Article" tag
           record: 'Article',
           id: 'ASIN',
           totalRecords: '@total'
       }, [
           // set up the fields mapping into the xml doc
           // The first needs mapping, the others are very basic
           {name: 'Author', mapping: 'ArticleAttributes > Author'},
		   'Title',
           'Site',
		   'Type',
		   'Category',
		   'HasSnippet',
		   // Detail URL is not part of the column model of the grid
		   'Lang',
		   'PageUrl',
		   'UrlSnippet',
		   'Description'
       ])
    });

    // create the grid
    var grid = new Ext.grid.GridPanel({
        store: store,
         columns: [
	        {header: "Title", width: 220, dataIndex: 'Title', sortable: true},
			{header: "Site", width: 100,dataIndex: 'Site', sortable: true},
	        {header: "Type", width: 50, dataIndex: 'Type', sortable: true},
			{header: "Category", width: 50, dataIndex: 'Category', sortable: true},
    		 {header: "Lang", width: 50,dataIndex: 'Lang', sortable: true},
	        {header: "Snip", width: 50, dataIndex: 'HasSnippet', sortable: true},
		   {header: "Author", width: 60, dataIndex: 'Author', sortable: true}
	        ],
		sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
		viewConfig: {
			forceFit: true
		},
        height:310,
		split: true,
		region: 'north'
    });
	
	// define a template to use for the detail view
	var articleTplMarkup = [
		'<b>Title</b>: <a href="{PageUrl}" target="_blank">{Title}</a><br/>',
		'<b>Author</b>: {Author}<br/>',
		'<b>Lang</b>: {Lang}<br/>',	
		'<b>Type</b>: {Type}<br/>',	
		'<b>Site</b>: {Site}, {Category}<br/>',
		'<b>Description</b>: {Description}<br/>',
		'<b>Has a snippet for download</b>: {HasSnippet}<br/> ',
		'<a href="{UrlSnippet}" target="_blank">{UrlSnippet}</a>',	
	];
	var articleTpl = new Ext.Template(articleTplMarkup);

	var ct = new Ext.Panel({
		renderTo: 'binding-example',
		frame: true,
		title: 'Article List',
		width:800,
		height: 600,
		layout: 'border',
		items: [
			grid,
			{
				id: 'detailPanel',
				region: 'center',
				bodyStyle: {
					background: '#fefefe',
					padding: '7px'
				},
				html: '<img src="/img/arrowup.jpg"><br>Please select an article to see additional details.'
			}
		]
	})
	grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
		var detailPanel = Ext.getCmp('detailPanel');
		articleTpl.overwrite(detailPanel.body, r.data);
	});
    store.load();


});*/
	},
		function(){ clearInterval(callCh); }
);
	
	var callCh = window.setInterval("myChain.callChain()", 500);



});