var FullProg = {
	lang       : 'en',
  contentURL : '/ajax.php',
  pages      : {
    home          : 'home',
    contact       : 'contact',
    references    : 'references',
    technologies  : 'technologies',
    playground    : 'playground'
  },
  activePage : '',
  eastWestCollapsed : false
};

FullProg.navigationSetBody = function () {
  $('#navigation-body').html($('#navi div.visible').html());
};

FullProg.navigationSetListeners = function () {
  $('ul.main_navigation li').bind ('mouseover', function () {
  	if (!$(this).attr('class').match(/active/i)) {
      $(this).attr('class', $(this).attr('class')+'_hover');
  	} 
  });
  
  $('ul.main_navigation li').bind ('mouseout', function () {
  	if (!$(this).attr('class').match(/active/i)) {
      $(this).attr('class', FullProg.str_replace('_hover', '', $(this).attr('class')));
  	}
  });
  
  $('li.navi_playground').bind('click', function (){
  	FullProg.showCaseShow();
  	FullProg.activePage = FullProg.pages.playground;
  	FullProg.navigationSetActive($(this));  
  });
  
  $('li.navi_contact').bind('click', function (){
    FullProg.contactShow();
    FullProg.activePage = FullProg.pages.contact;
    FullProg.navigationSetActive($(this));  
  });
  
  $('li.navi_references').bind('click', function (){
    FullProg.referencesShow();
    FullProg.activePage = FullProg.pages.references;
    FullProg.navigationSetActive($(this));  
  });
  
  $('li.navi_technologies').bind('click', function (){
    FullProg.technologiesShow();
    FullProg.activePage = FullProg.pages.technologies;
    FullProg.navigationSetActive($(this));  
  });
  
  $('li.navi_home').bind('click', function (){
    FullProg.homeShow();
    FullProg.activePage = FullProg.pages.home;
    FullProg.navigationSetActive($(this));  
  });
};

FullProg.navigationSetActive = function (item) {
	var collection = $('.main_navigation li');
	for (var i=0; i<collection.length; i++){
		var v = collection[i];
		$(v).attr('class', FullProg.str_replace(['active ', '_hover'], '', $(v).attr('class')));
  }
  item.attr('class', 'active '+item.attr('class')+'_hover');  
};

FullProg.setMainTitle = function (title) {
  Ext.getCmp('center').setTitle(title);
};

FullProg.setWestContent = function () {
  $('#west-body').load(FullProg.contentURL+'?action=cms&content=services_ata_glance&lang='+FullProg.lang);
};

FullProg.referencesShow = function () {
	if (FullProg.activePage != FullProg.pages.references) {
    FullProg.setMainTitle ('References - Project History');
    FullProg.resetMain ();
    Ext.Function.defer(function(){
      $('#center-body').load(FullProg.contentURL+'?action=references', function () {
        FullProg.relayout(300);      
      });
    }, 580);
    FullProg.hideEastWest();
    FullProg.collapseCommandLine();
	}
};

FullProg.contactShow = function () {
	if (FullProg.activePage != FullProg.pages.contact) {
  	FullProg.setMainTitle ('Contact');
    FullProg.resetMain ();
    var t = FullProg.eastWestCollapsed ? 300 : 0;
    FullProg.showEastWest();    
  	Ext.Function.defer(function(){
      Ext.getCmp('center').add(Ext.create('FullProg.contact'));
      FullProg.relayout();
  	}, t);
  	FullProg.collapseCommandLine();
	}
};

FullProg.homeShow = function () {
  FullProg.setMainTitle ('Home');
  FullProg.resetMain ();
  var t = FullProg.eastWestCollapsed ? 800 : 0;
  FullProg.showEastWest();    
  Ext.Function.defer(function(){
  	Ext.getCmp('center').add(Ext.create('FullProg.charts'));
    FullProg.relayout(2000);
  }, t);
  FullProg.collapseCommandLine();
};

FullProg.resetMain = function () {
  Ext.getCmp('center').removeAll();
   Ext.getCmp('center').update('');
  $('#center-body').html('');
};

FullProg.technologiesShow = function () {
  if (FullProg.activePage != FullProg.pages.technologies) {
    FullProg.setMainTitle ('Services &amp; Technologies');
    FullProg.resetMain ();
    FullProg.showEast();
    FullProg.hideWest();
    Ext.Function.defer(function(){
      $('#center-body').load(FullProg.contentURL+'?action=cms&content=services_ata_glance&lang='+FullProg.lang, function (){
        FullProg.relayout(300);      
      });
    }, 500);
    FullProg.expandCommandLine();
    FullProg.commandLineStart();
  }
};

FullProg.showCaseShow = function () {
	if (FullProg.activePage != FullProg.pages.playground) {
  	FullProg.setMainTitle ('Playground - works that a made just for fun! (and yes, I am spivvi ;-)');
  	FullProg.resetMain ();
  	var t = FullProg.eastWestCollapsed ? 340 : 0;
    FullProg.showEastWest();  	
  	Ext.Function.defer(function(){
      $('#center-body').load('/showcase-en.php', function () {
       FullProg.showCaseSetListeners();
       FullProg.relayout();
      });
    }, t);
    FullProg.collapseCommandLine();
	}
};

FullProg.relayout = function (t) {
	if (!t) {
	 t = 100;
	}
  setTimeout("FullProg.doRelayout()", t);
};

FullProg.doRelayout = function () {
  var c = Ext.getCmp('east');
  var w = c.getWidth();
  if (w > 260) {
    c.setWidth (260);
  } else {
    c.setWidth (261);
  }
};

FullProg.showCaseSetListeners = function thumbAnimation ()
{
  $('.showcase_item img').bind('mouseenter', function (e){
    $(this).animate ({'width' : '260px'}, 300);
    $(this).offsetParent().animate ({'left' : '12px'}, 300);
    
    var target = $(this).parent().attr('rev');
    $('a.showcase_item').each (function(){
        if ($(this).attr('rev') == target)
        $(this).css({'color' : '#fff'});
    });
  });
  
  $('.showcase_item img').bind('mouseleave', function (e){
    $(this).animate ({'width' : '210px'}, 300);
    $(this).offsetParent().animate ({'left' : '34px'}, 300);
    $('a.showcase_item').css({'color' : '#ff9900'});
  });
  
  $('a.showcase_item').bind('click', function (){
    FullProg.showCaseShowItem($(this).attr('rev'));
  });
}

FullProg.showCaseShowItem = function (url) {
	FullProg.showCaseDisplayWindow.update('<iframe src="'+url+'" width="100%" height="100%" marginheight="0" marginwidth="0" frameborder="0"></iframe>');
  FullProg.showCaseDisplayWindow.show();
};

FullProg.sendMail = function (data) {
	$.ajax({
      type: 'POST',
      url: '/ajax.php?action=sendmail',
      data: {
        email : data.email, 
        name : data.name,
        subject : data.subject,
        message : data.message
      }
    }); 
};

FullProg.commandLineStart = function () {
	Ext.getCmp('commandline').expand(true);
  $('#commandline-body').html('<div class="commandline-effect1"></div><div class="commandline-effect2"></div><div class="commandline-effect3"></div>');
  FullProg.commandLineEffect1();
};

FullProg.commandLineStop = function () {
  $('.commandline-effect1, .commandline-effect2, .commandline-effect3').stop();
  $('#commandline-body').html('root@fullprox.de:~ $ ');
  Ext.getCmp('commandline').setHeight(50);
  Ext.getCmp('commandline').collapse(Ext.Component.DIRECTION_LEFT, true);
};

FullProg.commandLineEffect1 = function () {
	$('.commandline-effect1').css({top : '-2100px'});
  $('.commandline-effect1').show();
  $('.commandline-effect1').animate ({
    top : '100px'
  }, 6000,
  'linear',
  function () {
  	$('.commandline-effect1').hide();
    FullProg.commandLineEffect2();
  });
};

FullProg.commandLineEffect2 = function () {
  $('.commandline-effect2').css({top : '-2100px'});
  $('.commandline-effect2').show();
  $('.commandline-effect2').animate ({
    top : '100px'
  }, 6000,
  'linear',
  function () {
  	$('.commandline-effect2').hide();
    FullProg.commandLineEffect3();
  });
};

FullProg.commandLineEffect3 = function () {
  $('.commandline-effect3').css({top : '-2100px'});
  $('.commandline-effect3').show();
  $('.commandline-effect3').animate ({
    top : '100px'
  }, 6000,
  'linear',
  function () {
    $('.commandline-effect3').hide();
    FullProg.commandLineEffect1();
  });
};

FullProg.expandCommandLine = function () {
  Ext.getCmp('commandline').setHeight(200);
};

FullProg.collapseCommandLine = function () {
	Ext.getCmp('commandline').setHeight(50);
	FullProg.commandLineStop();
};

FullProg.hideEast = function () {
  Ext.getCmp('east').collapse(Ext.Component.DIRECTION_RIGHT, true);
  FullProg.eastWestCollapsed = true;
};


FullProg.showEast = function () {
  Ext.getCmp('east').expand(true);
  FullProg.eastWestCollapsed = true;
};

FullProg.hideEast = function () {
  Ext.getCmp('east').collapse(Ext.Component.DIRECTION_RIGHT, true);
  FullProg.eastWestCollapsed = true;
};

FullProg.hideWest = function () {
  Ext.getCmp('west').collapse(Ext.Component.DIRECTION_RIGHT, true);
  FullProg.eastWestCollapsed = true;
};

FullProg.hideWest = function () {
  Ext.getCmp('west').collapse(Ext.Component.DIRECTION_RIGHT, true);
  FullProg.eastWestCollapsed = true;
};

FullProg.showWest = function () {
  Ext.getCmp('west').expand(true);
  FullProg.eastWestCollapsed = true;
};

FullProg.hideWest = function () {
  Ext.getCmp('west').collapse(Ext.Component.DIRECTION_RIGHT, true);
  FullProg.eastWestCollapsed = true;
};

FullProg.hideEastWest = function () {
  Ext.getCmp('west').collapse(Ext.Component.DIRECTION_RIGHT, true);
  setTimeout("Ext.getCmp('east').collapse(Ext.Component.DIRECTION_LEFT, true)", 500);
  FullProg.eastWestCollapsed = true;
};

FullProg.showEastWest = function () 
{
  Ext.getCmp('west').expand(true);
  setTimeout("Ext.getCmp('east').expand(true)", 450);
  FullProg.eastWestCollapsed = false;
};


FullProg.setFortune = function (onlyIfEmpty) {
	var doIt = true;
	if (onlyIfEmpty) {
		if ($('#south-central-body').html()) {
			doIt = false;
		}
	} 
  
	if (doIt) {
    $.get(FullProg.contentURL+'?action=fortune', function(r) {
      $('#south-central-body').html('<pre id="fortune">' + r + '</pre>');
    });
	}
	
};

FullProg.startFortuneSlideShow = function () {
	FullProg.setFortune();
  FullProg.fortuneInterval = window.setInterval ('FullProg.setFortune()', 500); 
}

FullProg.stopFortuneSlideShow = function () {
	if (FullProg.fortuneInterval) {
    window.clearInterval (FullProg.fortuneInterval);
	}
}

FullProg.clearFortune = function () {
	$('#south-central-body').html('');
	FullProg.relayout();
}

FullProg.str_replace = function (search, replace, subject, count) {
  var i = 0,
    j = 0,
    temp = '',
    repl = '',
    sl = 0,        fl = 0,
    f = [].concat(search),
    r = [].concat(replace),
    s = subject,
    ra = Object.prototype.toString.call(r) === '[object Array]', sa = Object.prototype.toString.call(s) === '[object Array]';
    s = [].concat(s);
    if (count) {
      this.window[count] = 0;
    } 
    for (i = 0, sl = s.length; i < sl; i++) {
      if (s[i] === '') {
        continue;
      }        
      for (j = 0, fl = f.length; j < fl; j++) {
        temp = s[i] + '';
        repl = ra ? (r[j] !== undefined ? r[j] : '') : r[0];
        s[i] = (temp).split(f[j]).join(repl);
        if (count && s[i] !== temp) {                this.window[count] += (temp.length - s[i].length) / f[j].length;
        }
      }
    }
  return sa ? s : s[0];
};


FullProg.showCaseDisplayWindow = Ext.create('Ext.Window', { 
  width: 1000, 
  height: 500,
  resizable : true,
  maximizable : true,
  closeAction : 'close',
  title : 'Playgound Item',
  html : '',
  listeners : {
    beforeclose : function (p) {
      p.update('');
    }
  }
});

FullProg.checkIE = function () {
  if (Ext.isIE) {
    FullProg.ieWarningWindow.update('');
    FullProg.ieWarningWindow.show();  
    $('#ie-warning-body').load('/stop-internet-explorer.php', function () {
      
    });
  }
};


FullProg.ieWarningWindow = Ext.create('Ext.Window', { 
	id : 'ie-warning',
  width: 520, 
  height: 400,
  modal : true,
  resizable : true,
  maximizable : false,
  title : 'OMG',
  html : ''
});



Ext.define('FullProg.pageVersionGrid', {
  extend : Ext.grid.Panel,
  title: false,
  viewConfig: {
      stripeRows: true
  },
  store: Ext.create('Ext.data.ArrayStore', {
        fields: [
           {name: 'page'},
           {name: 'year'}
        ],
        data: [['fullprox.de', '2010'],
          ['fullprox.de', '2008'],
          ['fullprox.de', '2005']]
    }),
  columns: [
  {
    text     : 'URL',
    flex     : 1,
    sortable : true,
    enableColLock: false,
    dataIndex: 'page'
  },{
    text     : 'Year',
    width    : 75,
    sortable : true,
    dataIndex: 'year'
  }],
  listeners : {
    itemclick : function (grid, record) {
      Ext.Msg.show({
        width: 400,
        title : 'Visit the version of fullprox.de from the year '+record.data.year+'',
        msg : 'This will open a new browser tab.<br>Mayby you have to allow popups for this.',
        buttons: Ext.Msg.OKCANCEL,
        icon: Ext.Msg.INFO,
        animCollapse : 2000,
        animEl : Ext.getBody(),
        fn : function(btn, text){
          if (btn == 'ok'){
            window.open('http://version'+record.data.year+'.fullprox.de');
          }
        }
      });
    }
  }
});

Ext.onReady(function() {
  
  var cw;
  
  Ext.create('Ext.Viewport', {
    layout: {
      type: 'border',
      padding: 5
    },
    defaults: {
      split: true
    },
    items: [{
      id : 'navigation',
      region: 'north',
      collapsible: true,
      title: 'Navigation',
      split: true,
      height: 80,
      minHeight: 70,
      html : ''
    },{
      id : 'west',
      region: 'west',
      collapsible: true,
      title: 'Services at a glance',
      autoScroll : true,
      split: true,
      width: 260,
      minWidth: 100,
      minHeight: 140,
      bodyStyle : 'padding:5px 5px 5px 10px',
      html: ''
    },{
      region: 'center',
      layout: 'border',
      border: false,
      items: [{
        id : 'center',
        region: 'center',
        bodyStyle : 'padding: 10px',
        title: 'Home',
        cls : 'x-panel-center-center',
        minHeight: 200,
        autoScroll : true
      },{
        id : 'commandline',
        region: 'south',
        height: 50,
        minHeight: 50,
        split: true,
        collapsible: true,
        collapsed : true,
        title: 'Command line',
        html: 'root@fullprox.de:~ $ ',
        bodyStyle : 'background:#000!important;font-family:monospace; padding:5px 0 0 10px;'
      }]
    },{
      id : 'east',
      region: 'east',
      collapsible: true,
      title: 'fullprox.de - history',
      autoScroll : true,
      split: true,
      width: 261,
      minWidth: 100,
      minHeight: 140,
      bodyStyle : 'padding:5px',
      items: [Ext.create('FullProg.pageVersionGrid')]
    },{
      id : 'south',
      region: 'south',
      collapsible: true,
      split: true,
      height: 140,
      minHeight: 100,
      title: false,
      layout: {
        type: 'border',
        padding: 5
      },
      items: [{
        id : 'south-central',
        title: 'Fortunes',
        region: 'center',
        minWidth: 80,
        bodyStyle : 'padding:5px 0 0 10px',
        html: ''
      }, {
        title: 'Contact details',
        region: 'east',
        flex: 1,
        minWidth: 80,
        bodyStyle : 'padding:5px 0 0 10px',
        html: 'Stephan Pekram<br />Phone: ++49 (0)30 - 53 00 56 37 &nbsp; | &nbsp; Mobil: ++49 - (0)176 - 780 10 416<br/>E-Mail: stephan@fullprox.de &nbsp; | &nbsp; Web: http://fullprox.de',
        split: true,
        collapsible: true
      }, {
        title: 'Fortune Options',
        region: 'west',
        flex: 1,
        minWidth: 80,
        split: true,
        collapsible: true,
        collapseMode: 'mini',
        bodyStyle : 'padding:20px; text-align:right',
        items : [{
          xtype : 'button',
          text : 'Finish',
          handler : function () {
            FullProg.stopFortuneSlideShow();
            Ext.getCmp('south').setHeight(140);
            FullProg.clearFortune();
          }
        },{
          xtype : 'button',
          margin : '0 0 0 10',
          text : 'Fortune Slide Show',
          handler : function () {
            if (Ext.getCmp('south').getHeight() < 300) {
              Ext.getCmp('south').setHeight(300);
            }
            FullProg.startFortuneSlideShow();
          }
        },{
          xtype : 'button',
          margin : '0 0 0 10',
          text : 'New Fortune',
          handler : function () {
            if (Ext.getCmp('south').getHeight() < 300) {
              Ext.getCmp('south').setHeight(300);
              FullProg.setFortune(true);
            } else {
             FullProg.setFortune();
            }
          }
        }]
      }]
    }]
  });
  
  FullProg.navigationSetBody();
  FullProg.navigationSetListeners();
  FullProg.setWestContent();
  FullProg.setFortune();
  FullProg.technologiesShow();
  window.setTimeout("FullProg.checkIE ()", 1500);
});

Ext.define('FullProg.contact', {
  extend : Ext.Panel,
  title : false,
  border : false,
  
  items : [{
    xtype : 'panel',
    title : false,
    border : true,
    width: 580,
    bodyStyle : 'padding: 7px 15px 15px 15px;',
    cls : 'semi-transparent',
    html : '<h3 style="font-size:14px;margin-bottom:10px;">Contact me for project inquiries.</h3>' + 
           '<table><tr><td width="400"><p style="line-height:20px;">'+
             'Stephan Pekram<br/>stephan@fullprox.de<br/>' + 
             'Phone: ++49-(0)176 780 10 416<br/>'+
             'Berlin, Germany<br/>'+
             'UstId 75693148423</p></td>'+
             '<td><img src="/images/webportrait.png" /></td></tr></table>'
  },{
    xtype : 'panel',
    title : false,
    border : false,
    height: 15
  },{
    xtype : 'panel',
    title : false,
    border : true,
    width: 580,
    bodyStyle : 'padding: 0px 75px 25px 0;',
    cls : 'semi-transparent',
    items : [{
      xtype : 'form',
      border: false,
      bodyStyle: 'padding:20px; border:1px solid #000;',
      // bodyPadding: 10,
      fieldDefaults: {
          labelAlign: 'left',
          labelWidth: 140,
          labelStyle: 'font-weight:bold; font-size:12px;text-shadow: 1px 1px 5px #000;',
          fieldStyle: 'font-size:12px;',
          allowBlank : false,
          width: 340
      },
      /*
      defaults: {
          margins: '0 0 10 0'
      },
      */
      items: [{
        xtype: 'textfield',
        name : 'name',
        fieldLabel: 'Name'
      },{
        xtype: 'textfield',
        name : 'email',
        fieldLabel: 'Email Address',
        vtype: 'email'
      },{
        xtype: 'textfield',
        name : 'subject',
        fieldLabel: 'Subject'
      },{
        xtype: 'textareafield',
        name : 'message',
        fieldLabel: 'Message',
        width   : 480,
        height : 180,
        resizable : true
      }],
      buttons: [{
        text: 'Cancel',
        handler: function() {
          this.up('form').getForm().reset();
        }
      }, {
        text: 'Send Message',
        handler: function() {
          if (this.up('form').getForm().isValid()) {
            Ext.MessageBox.alert('Thank you!', 'Your message has been sent. I will respond as soon as possible.');
            var data = this.up('form').getForm().getValues();
            FullProg.sendMail(data);
            this.up('form').getForm().reset();
          }
        }
      }]
    }]
  }]
});


FullProg.storeColumnStack = Ext.create('Ext.data.JsonStore', {
  fields: ['year', 'Firefox', 'Chrome', 'Safari', 'IE', 'Opera', 'Others'],
  data: [
    {year: 2008, Firefox: 48, Chrome: 15, Safari: 6, IE: 22, Opera : 6, Others : 3},
    {year: 2009, Firefox: 46, Chrome: 18, Safari: 6, IE: 21, Opera : 5, Others : 4},
    {year: 2010, Firefox: 45, Chrome: 21, Safari: 8, IE: 17, Opera : 4, Others : 5},
    {year: 2011, Firefox: 42, Chrome: 26, Safari: 8, IE: 14, Opera : 5, Others : 5}
  ]
});

FullProg.storePie = Ext.create('Ext.data.JsonStore', {
  fields: ['name', 'data'],
  data: [
    {name : 'Firefox', data : 43},
    {name : 'Chrome', data : 21},
    {name : 'Safari', data : 8},
    {name : 'IE', data : 16},
    {name : 'Opera', data : 6},
    {name : 'Others', data : 7}
  ]
});

Ext.define('Ext.chart.theme.chartBrowsers', {
  extend: 'Ext.chart.theme.Base',
  constructor: function(config) {
    this.callParent([Ext.apply({
      colors: ['#FF8809','#FFD505', '#C5C7BA', '#70C2F2', '#E80076', '#69C300']
    }, config)]);
  }
});  

Ext.define('FullProg.charts', {
  extend : Ext.Panel,
  title : false,
  border : false,
  
  items : [{
    xtype : 'panel',
    title : 'Stacked Column Chart - Browser Usage - fullprox.de',
    border : true,
    bodyStyle : 'padding: 10px',
    cls : 'semi-transparent',
    items : [{
      xtype: 'chart',
      theme: 'chartBrowsers',
      width : 500,
      height: 250,
      animate: {
        easing: 'bounceOut',
        duration: 1500
      },
      insetPadding: 20,
      shadow: true,
      store: FullProg.storeColumnStack,
      legend: {position: 'right'},
      axes: [{
        type: 'Numeric',
        position: 'bottom',
        fields: ['Firefox', 'Chrome', 'Safari', 'IE', 'Opera', 'Others'],
        title: false,
        grid: true,
        label: {
      	 fill: '#fff',
         renderer: function(v) {return v+'%';}
        },
        roundToDecimal: false
      }, {
        type: 'Category',
        position: 'left',
        fields: ['year'],
        title: false,
        label: {fill: '#fff'}
      }],
      series: [{
        type: 'bar',
        axis: 'bottom',
        gutter: 80,
        xField: 'year',
        yField: ['Firefox', 'Chrome', 'Safari', 'IE', 'Opera', 'Others'],
        stacked: true,
        tips: {
          trackMouse: true,
          width: 100,
          height: 28,
          renderer: function(storeItem, item, field) {
        	  var d = storeItem.getId();
            this.setTitle(String(item.value[0]) +' : '+ String(item.value[1]) + '%');
          }
        },
        highlight: false
      }]
    }]
  },
  	{xtype : 'panel',
  	border: false,
  	height: 15
  },{
    xtype : 'panel',
    title : 'Pie Chart - Browser Usage - fullprox.de',
    border : true,
    bodyStyle : 'padding: 10px',
    cls : 'semi-transparent',
    items : [{
      xtype: 'chart',
      width : 500,
      height: 300,
      animate: true,
      store:  FullProg.storePie,
      shadow: true,
      legend: {
          position: 'right'
      },
      insetPadding: 20,
      theme: 'chartBrowsers',
      series: [{
        type: 'pie',
        field: 'data',
        showInLegend: true,
        donut: 35,
        tips: {
          trackMouse: true,
          width: 100,
          height: 28,
          renderer: function(storeItem, item) {
            this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + '%');
          }
        },
        highlight: {
          segment: {margin: 20}
        },
        label: {
          field: 'name',
          display: 'rotate',
          contrast: true,
          font: '14px Arial'
        }
      }]
    }]
  }]
});