var distinctcompanies = new Array();
var defaultprojectdescription = 'Simply choose from the drop downs above to view our portfolio of work.';
var whatwedoloaded = false;
var isPlaying = false;

//window.onload = function() {
Event.observe(window, 'load', function() {
  $('homecontentdiv').hide();
   //swfobject.embedSWF("animation.swf", "homeflash", "362", "302", "9.0.0", "expressInstall.swf", false, { wmode:"opaque" }, false) ; 
   swfobject.embedSWF("Tanka_logo_Animation.swf", "mainlogo", "220", "100", "9.0.0", "expressInstall.swf", false, { wmode:"transparent" }, false) ; 
   
    
   $('li_homecontent').observe('click', function(event) { selectcontent('homecontent')} );
   $('li_whatwedo').observe('click', function(event) { selectcontent('whatwedo') });
   $('btn_home_whatwedo').observe('click', function(event) { selectcontent('whatwedo') });
   
   $('li_ourwork').observe('click', function(event) { selectcontent('ourwork') });
   $('btn_home_ourwork').observe('click', function(event) { selectcontent('ourwork') });
   
   $('li_ourworkbyclient').observe('click', function(event) { selectcontent('ourworkbyclient');  Event.stop(event); });
   $('li_ourworkbymedia').observe('click', function(event) { selectcontent('ourworkbymedia'); Event.stop(event); });
//   $('li_usefulstuff').observe('click', function(event) { selectcontent('usefulstuff') });
   $('li_contactus').observe('click', function(event) { selectcontent('contactus') });
   
  
   
   
   $(document.forms['form_ourworkbybrand'].selectBrand).observe('change', function() { loadbrandmedia() } );
   $(document.forms['form_ourworkbymedia'].selectMedia).observe('change', function() { loadmediabrands() } );
   
   
   //new Ajax.Updater('whatwedocontainer', 'whatwedo.html',{method:"GET"});
   //setwidth($('homecontentdiv'), '362px');
   
   Effect.BlindDownFromRight('middlecol',{queue:'end'});
   Effect.BlindDownFromRight('homecontentdiv',{
	 queue:'end',
	 duration:0,
     afterFinish: function(){
   	  swfobject.embedSWF("animation.swf", "homeflash", "362", "302", "9.0.0", "expressInstall.swf", false, { wmode:"opaque" }, false) ;
	  
	  imageassets.sort();
	  
	  distinctbrands = getdistinctbrands();
	  distinctmedia = getdistinctmedia();
	
	  new Ajax.Updater('whatwedocontainer', 'whatwedo.html',{method:"GET"});  
	
	  var latestwork = new Spry.Widget.HTMLPanel("latestprojects_col");
	  latestwork.loadContent('latestwork.html' , {id: "latestworkmaincontent"});
	 }
   
   });
	

});


function getdistinctbrands() { 
		var brands = new Array();
		var brandcount = 0;
		var brandname = '';
		for (i=0; i < imageassets.length; i++) {
		   if (i) {
  		     if (imageassets[(i-1)].split('/')[1] != brandname) {
                brandname =  imageassets[i].split('/')[1];
			    brands[brandcount] = brandname;
				brandcount++;
				addSelectOption(document.forms['form_ourworkbybrand'].selectBrand, brandname.replace(/_/g,' ' ), brandname)
			 }
		   }
		   if ('brandlogo.jpg' == imageassets[i].split('/')[2]) { addbrandlogo(i); }	
		}
		return brands;
}

function addbrandlogo(i) {
    var div = $('projectbrandsscroller');
	var img = document.createElement('img');
	img.src = imageassets[i];
	img.style.width = '120px';
	div.appendChild(img);
	div.appendChild(document.createElement('br'));
	$(img).addClassName('projectbrandlogo');
	$(img).observe('click', function(event) { brandlogoclick(imageassets[i]) } );
}

function brandlogoclick(img) {
   var brandname =  img.split('/')[1];
   var opts = document.forms['form_ourworkbybrand'].selectBrand.options
   selectcontent('ourworkbyclient');
   for (i=0; i < opts.length; i++) {
      if (brandname == opts[i].value) {
	     document.forms['form_ourworkbybrand'].selectBrand.selectedIndex = i;
		 loadbrandmedia();
		 break;
	  } 
   }
//  setwidth($('middlecol'), '288px'); 

//   alert(img.src);
}

function getdistinctmedia() { 
		var media = new Array();
		var mediacount = 0;
		var medianame = '';
		var temp;
		for (i=0; i < imageassets.length; i++) {
		   if (i) {
		     temp = imageassets[(i-1)].split('/')[2] ;
  		     if ((-1 == media.indexOf(temp)) && ('description.html' != temp) && ('brandlogo.jpg' != temp)) {
                medianame =  imageassets[i].split('/')[2];
			    media[mediacount] = medianame;
				mediacount++;
			 }
		   }	
		}
        media.sort();
		for (i=0; i < mediacount; i++) {
		    addSelectOption(document.forms['form_ourworkbymedia'].selectMedia, media[i].replace(/_/g,' ' ), media[i])
        }
		return media;
}

function loadbrandmedia() {
    var brand = document.forms['form_ourworkbybrand'].selectBrand.options[document.forms['form_ourworkbybrand'].selectBrand.selectedIndex].value;
	var media = '';
	var selectMedia = document.forms['form_ourworkbybrand'].selectMedia;
	var temp = '';
	selectMedia.options.length = 0;
    for (i=0; i < imageassets.length; i++) {
      if(i){
       if (imageassets[i].split('/')[1] == brand) {
	      temp = imageassets[i].split('/')[2]
		  if ((temp != media) && ('description.html' != temp) && ('brandlogo.jpg' != temp)) {
		     media = temp;
		     addSelectOption( selectMedia, media.replace(/_/g,' ' ), media);
		  }
	   }
	  }   
     }
	 loadbrandmediathumbs(selectMedia);
	 $('ourworkbyclientlarge').hide();
//	 $('middlecol').style.width = '284px';
	 $(selectMedia).disabled = false;
	 selectMedia.observe('change', function() { loadbrandmediathumbs(selectMedia) } );
	 temp = imageassets[0].split('/')[0] + '/' + brand + '/description.html';
	 
	 if (-1 < imageassets.indexOf(temp)) {
//	    $('projectdescription').update(temp);
         var projectdesc = new Spry.Widget.HTMLPanel("projectdescription");
		 projectdesc.loadContent(temp , {id: "importcontent"});
	 } else {
	    $('projectdescription').update(defaultprojectdescription);
	 }
}

function loadmediabrands() {
    var media = document.forms['form_ourworkbymedia'].selectMedia.options[document.forms['form_ourworkbymedia'].selectMedia.selectedIndex].value;
	var brand = '';
	var selectBrand = document.forms['form_ourworkbymedia'].selectBrand;
	var temp = '';
	selectBrand.options.length = 0;
    for (i=0; i < imageassets.length; i++) {
      if(i){
       if (imageassets[i].split('/')[2] == media) {
	      temp = imageassets[i].split('/')[1];
		  if (temp != brand)  {
		     brand = temp;
		     addSelectOption( selectBrand, brand.replace(/_/g,' ' ), brand);
		  }
	   }
	  }   
     }
	 
	 loadmediabrandthumbs(selectBrand);
	 $('ourworkbyclientlarge').hide();
//	 $('middlecol').style.width = '284px';
	 $(selectBrand).disabled = false;
	 
	 selectBrand.observe('change', function() { 
			loadmediabrandthumbs(selectBrand) ;
			 
			 temp = imageassets[0].split('/')[0] + '/' + selectBrand.value + '/description.html';
	 		 
			 if (-1 < imageassets.indexOf(temp)) {
				 var projectdesc = new Spry.Widget.HTMLPanel("projectdescriptionmedia");
				 projectdesc.loadContent(temp , {id: "importcontent"});
			 } else {
				$('projectdescriptionmedia').update(defaultprojectdescription);
			 } 
			
	 });
	 
	 temp = imageassets[0].split('/')[0] + '/' + selectBrand.value + '/description.html';
	 
	 if (-1 < imageassets.indexOf(temp)) {
         var projectdesc = new Spry.Widget.HTMLPanel("projectdescriptionmedia");
		 projectdesc.loadContent(temp , {id: "importcontent"});
	 } else {
	    $('projectdescriptionmedia').update(defaultprojectdescription);
	 } 
}


function loadbrandmediathumbs(selectMedia) {
    $('ourworkbyclientthumbnailcol').hide();
    var div = $('ourworkbyclientthumbnailcol');
	div.innerHTML = '';
	var brand = $F(document.forms['form_ourworkbybrand'].selectBrand);
	var media = $F(selectMedia);
	var thumbnailfile = '';
    var temp = '';
	var img;
    for (i=0; i < imageassets.length; i++) {
      if(i){
       if (imageassets[i].split('/')[1] == brand) {
	      if (imageassets[i].split('/')[2] == media) {
    	      if (imageassets[i].split('/')[3].toLowerCase() == 'small') {
//	            temp += "<img class='thumbimage faded' src='" + imageassets[i] + "' /><br />";
                img = document.createElement('img');
//                img.lowsrc = 'images/large-loading.gif';
				img.src = imageassets[i];
				img.name = 'thumbimage' + i;
				img.style.width = '100px';
				div.appendChild(img);
				div.appendChild(document.createElement('br'));
				$(img).addClassName('thumbimage faded');
				$(img).setOpacity(.5);
				$(img).observe('mouseover', function(event) { thumbmouseover(this) } );
				$(img).observe('mouseout', function(event) { thumbmouseout(this) } );
				$(img).observe('click', function(event) { thumbclick(this) } );
			  }	
 		  }
	   }
	  }   
     }
     $('ourworkbyclientthumbnailcol').show();
     $('ourworkbyclientlarge').hide();
//     $('middlecol').style.width = '288px';
     setwidth2($('middlecol'), 284);	 
}

function loadmediabrandthumbs(selectBrand) {
    var div = $('ourworkbymediathumbnailcol');
	div.hide();
	div.update('');
	var media = $F(document.forms['form_ourworkbymedia'].selectMedia);
	var brand = $F(selectBrand);
	var thumbnailfile = '';
    var temp = '';
	var img;
    for (i=0; i < imageassets.length; i++) {
      if(i){
       if (imageassets[i].split('/')[1] == brand) {
	      if (imageassets[i].split('/')[2] == media) {
    	      if (imageassets[i].split('/')[3].toLowerCase() == 'small') {
//	            temp += "<img class='thumbimage faded' src='" + imageassets[i] + "' /><br />";
                img = document.createElement('img');
//                img.lowsrc = 'images/large-loading.gif';
				img.src = imageassets[i];
				img.name = 'thumbimage' + i;
				img.style.width = '100px';
				div.appendChild(img);
				div.appendChild(document.createElement('br'));
				$(img).addClassName('thumbimage faded');
				$(img).setOpacity(.5);
				$(img).observe('mouseover', function(event) { thumbmouseover(this) } );
				$(img).observe('mouseout', function(event) { thumbmouseout(this) } );
				$(img).observe('click', function(event) { thumbclick(this) } );
			  }	
 		  }
	   }
	  }   
     }
     $('ourworkbymediathumbnailcol').show();
     $('ourworkbymedialarge').hide();
//     $('middlecol').style.width = '288px';
//     setwidth( $('middlecol'), '288px');
     setwidth2($('middlecol'), 284);	 
}



function thumbmouseover(img) {
  $(img).setOpacity(1); 
}

function thumbmouseout(img) {
  if ($(img).src.toString() != lastclicked) { $(img).setOpacity(.5); } 
}

var lastclicked = '';
function thumbclick(img) {
  if(isPlaying == true){
	return;   
  }
  var div;
  if ( 'ourworkbyclient' == currentcontent) {
     $$('#ourworkbyclientthumbnailcol img').each( function(s){s.setOpacity(.5)}); 
     div = $('ourworkbyclientlarge');
  } else {
     $$('#ourworkbymediathumbnailcol img').each( function(s){s.setOpacity(.5)}); 
     div = $('ourworkbymedialarge');
  } 
  $(img).setOpacity(1);
  $(img).addClassName('unfaded');
  lastclicked = $(img).src.toString();
  var assetindex = parseInt($(img).name.toString().replace('thumbimage',''));
  var swfindex = imageassets.indexOf(imageassets[assetindex].replace('Small','Large').replace('.jpg','.swf'))
  div.update('');
  div.hide();
 // $('middlecol').style.width = '288px';
  if (-1 == swfindex) {
	  var bigimg = document.createElement('img');
	  bigimg.style.width = '400px';
	 // bigimg.lowsrc = 'images/large-loading.gif';
	  //bigimg.style.display = 'none';
	  bigimg.src = img.src.toString().replace('Small','Large');
	  div.appendChild(bigimg);
	  $(bigimg).observe('click', function(event) { bigimgclick(this) } );
	  $(bigimg).addClassName('bigimg');
	  //Effect.Appear($(bigimg));
	  
	  
  }  else {
      var divholder = document.createElement('div');
	  divholder.id = 'divholder' +swfindex;
	  divholder.style.width = '400px';
	  divholder.style.height = '518px';
  	  div.appendChild(divholder);
	  
	  var t = new Date().getTime();
	  
	  new Ajax.Request('flashsize.php?swf=' + imageassets[swfindex] + '&time=' + t  ,   {     
		method:'get',     
		onSuccess: function(transport){       
		  var response = transport.responseText;  
		  swfobject.embedSWF(imageassets[swfindex], 'divholder' + swfindex,  "400", response, "9.0.0", "expressInstall.swf", false, { wmode:"transparent" }, false) ;     
		},     
		onFailure: function(){ 
			swfobject.embedSWF(imageassets[swfindex], 'divholder' +swfindex,  "400", "300", "9.0.0", "expressInstall.swf", false, { wmode:"transparent" }, false) ;
		}   
	  }); 
	  
	   
  }
//  setwidth(div, '400px'); 
//  div.show();
//  $('middlecol').style.width = '705px';
  if ('705px' != $('middlecol').style.width) Effect.BlindDownFromRight2('middlecol', {queue:'end',duration:0.4});
  Effect.Appear(div.id, {queue:'end', duration:0.1});
//  Effect.BlindDownFromRight(div.id, {queue:'end',duration:0.4});
}

function bigimgclick(img) {
   window.open(img.src.toString().replace('Large','OriginalFiles'));
}

function addSelectOption(sel, text, value) {
	var newOption = new Option();
	newOption.value = value;
	newOption.text = text;
	sel.options[sel.options.length] = newOption; 
}

var currentcontent = 'homecontent' ;

function selectcontent(id) {

   if(isPlaying == true){
	return;   
   }
   
//   Effect.BlindUpFromRight('middlecol');

   $('homecontentdiv').hide();
   pageTracker._trackPageview("/"+id);
   
   if ('homecontent' == id) {
	   //$('homecontentdiv').show();
   }
  
   if ('ourwork' == id) {
      $('ourworkbyclientlarge').hide();
//	  $('middlecol').style.width = '705px';
      $('li_ourwork').removeClassName('opened');
      setwidth($('middlecol'), '705px'); 
	  $('li_ourworkbyclient').up('ul').show();
   }
   
   if ('whatwedo' == id) {
	  $('li_ourworkbyclient').up('ul').hide(); 
       $('li_ourwork').removeClassName('opened');
      setwidth($('middlecol'), '705px'); 
   }
   
   if  (('ourwork' != id) && ('ourworkbyclient' != id) && ('ourworkbymedia' != id) && ('whatwedo' != id)) { 
       $('li_ourworkbyclient').up('ul').hide(); 
       $('li_ourwork').removeClassName('opened');
//	   $('middlecol').style.width = '362px';
       setwidth($('middlecol'), '362px'); 
   }
   if  (('ourworkbyclient' == id) || ('ourworkbymedia' == id)) { 
//	   $('ourworkbyclientthumbnailcol').show();
       $('li_ourwork').addClassName('opened'); 
  	    $('projectdescription').update(defaultprojectdescription);
   }
   if  ('ourworkbyclient' == id) {
       $('ourworkbyclientlarge').hide();
	   $('ourworkbyclientthumbnailcol').hide();
//	   $('middlecol').style.width = '165px';
       setwidth($('middlecol'), '165px'); 
	   document.forms['form_ourworkbybrand'].selectBrand.selectedIndex = 0;
	   document.forms['form_ourworkbybrand'].selectMedia.options.length = 0;
	   document.forms['form_ourworkbybrand'].selectMedia.disabled = true;	   
   }
   if  ('ourworkbymedia' == id) {
       $('ourworkbymedialarge').hide();
	   $('ourworkbymediathumbnailcol').hide();
//	   $('middlecol').style.width = '165px';
       setwidth($('middlecol'), '165px'); 
	   document.forms['form_ourworkbymedia'].selectMedia.selectedIndex = 0;
	   document.forms['form_ourworkbymedia'].selectBrand.options.length = 0;
	   document.forms['form_ourworkbymedia'].selectBrand.disabled = true;	  
   }
   if (currentcontent != id) {
//       Effect.BlindUpFromRight(currentcontent);
       $(currentcontent).hide();
	   $('li_' + currentcontent).removeClassName('selected');
       currentcontent = id;
	   //if (currentcontent == 'homecontent')  Effect.BlindDownFromRight('homecontentdiv',{queue:'end',duration:0});
	   $('li_' + currentcontent).addClassName('selected');
//       $(id).show();
       Effect.Appear(id, {queue:'end', duration:0.1});
   }	
   
   if (currentcontent == 'homecontent')  Effect.BlindDownFromRight('homecontentdiv',{queue:'end',duration:0});
}

function setwidth(div, width) {
   Effect.BlindUpFromRight(div.id,{
	 queue:'end',
	 duration:0.4,
     afterFinish: function(){
		div.style.width = width;  
        Effect.BlindDownFromRight(div.id,{queue:'end',duration:0.4}); 
     }
   });
}

function setwidth2(div, width) {
  element = $(div);
  var elementDimensions = element.getDimensions();
  if (width < elementDimensions.width) {
	  element.makeClipping();
	  return new Effect.Scale(element, (100 * (width/elementDimensions.width)),
		Object.extend({ scaleContent: false,
		  scaleY: false,
		  restoreAfterFinish: false,
		  afterFinishInternal: function(effect) {
		    div.style.width = width + 'px';  
			effect.element.undoClipping();
		  }
		}, arguments[1] || {})
	  );
  } else {
	  return new Effect.Scale(element, 100, Object.extend({
		scaleContent: false,
		scaleY: false,
		scaleFrom: (100 * (elementDimensions.width/width)),
		scaleMode: {originalHeight: elementDimensions.height, originalWidth: width},
		restoreAfterFinish: true,
		afterSetup: function(effect) {
		  effect.element.makeClipping();
//		  effect.element.setStyle({width: '0px'});
		  effect.element.show();
		},
		afterFinishInternal: function(effect) {
		  div.style.width = width + 'px'; 
		  effect.element.undoClipping();
		  effect.element.forceRerendering();
		  isPlaying = false;
		}
	  }, arguments[1] || {}));
   }
}




Effect.BlindUpFromRight = function(element) {
  element = $(element);
  element.makeClipping();
  return new Effect.Scale(element, 0,
    Object.extend({ scaleContent: false,
      scaleY: false,
      restoreAfterFinish: true,
      afterFinishInternal: function(effect) {
        effect.element.hide();
        effect.element.undoClipping();
      }
    }, arguments[1] || {})
  );
}

Effect.BlindDownFromRight = function(element) {
  isPlaying = true;
  element = $(element);
  var elementDimensions = element.getDimensions();
  return new Effect.Scale(element, 100, Object.extend({
    scaleContent: false,
    scaleY: false,
    scaleFrom: 0,
    scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
    restoreAfterFinish: true,
    afterSetup: function(effect) {
      effect.element.makeClipping();
      effect.element.setStyle({width: '0px'});
      effect.element.show();
    },
    afterFinishInternal: function(effect) {
      effect.element.undoClipping();
      effect.element.forceRerendering();
	  isPlaying = false;
    }
  }, arguments[1] || {}));
}


Effect.BlindDownFromRight2 = function(element) {
  isPlaying = true;
  element = $(element);
  var elementDimensions = element.getDimensions();
  return new Effect.Scale(element, 100, Object.extend({
    scaleContent: false,
    scaleY: false,
    scaleFrom: 40,
    scaleMode: {originalHeight: elementDimensions.height, originalWidth: 705},
    restoreAfterFinish: true,
    afterSetup: function(effect) {
      effect.element.makeClipping();
//      effect.element.setStyle({width: '305px'});
//      effect.element.show();
    },
    afterFinishInternal: function(effect) {
      effect.element.setStyle({width: '705px'});
      effect.element.undoClipping();
      effect.element.forceRerendering();
	  isPlaying = false;
    }
  }, arguments[1] || {}));
}