Object.extend(Element, {
	setWidth: function(element,w) {
	   	element = $(element);
    	element.style.width = w +"px";
	},
	setHeight: function(element,h) {
   		element = $(element);
    	element.style.height = h +"px";
	},
	setTop: function(element,t) {
	   	element = $(element);
    	element.style.top = t +"px";
	},
	setLeft: function(element,l) {
	   	element = $(element);
    	element.style.left = l +"px";
	},
	setSrc: function(element,src) {
    	element = $(element);
    	element.src = src; 
	},
	setHref: function(element,href) {
    	element = $(element);
    	element.href = href; 
	},
	setInnerHTML: function(element,content) {
		element = $(element);
		element.innerHTML = content;
	}
});

function cs3_showLargeSize(src,title) {
    if (!title) title = '';
    var body = document.getElementsByTagName("body").item(0);
	var overlay = $('zoom_overlay');
    var container = $('zoom_container');
    var img = $('zoom_img');
    var zoom_box = $('zoom_box'); 
    var page_size = getPageSize();
    var page_scroll = getPageScroll();
    var zoom_loading = $('zoom_loading');
    if (!container) {
        container = document.createElement("div");
	    container.setAttribute('id','zoom_container');
	    container.style.display = 'none';
	    container.style.position = 'absolute';
        container.style.top = 0;
        container.style.left = 0;
        container.style.zIndex = 100000;
        container.onclick = function() { cs3_hideLargeSize(); }
        body.appendChild(container);
    }
    
    if (!overlay) {
        overlay = document.createElement("div");
	    overlay.setAttribute('id','zoom_overlay');
	    overlay.onclick = function() { cs3_hideLargeSize(); }
        overlay.style.position = 'absolute';
        overlay.style.top = 0;
        overlay.style.left = 0;     
        overlay.style.opacity = .9;
	    overlay.style.filter = 'alpha(opacity:90)';
        overlay.style.zIndex = 1;  
        container.appendChild(overlay);
    }
    
    if (!zoom_box) {
    	zoom_box = document.createElement("div");
    	zoom_box.setAttribute('id','zoom_box');
    	zoom_box.style.position = 'absolute';
    	zoom_box.style.top = 0;
    	zoom_box.style.left = 0;
    	zoom_box.style.zIndex = 2;
    	zoom_box.style.textAlign = 'left';
        
    	var html = "<div id='zoom_title' style='float:left;padding-bottom:8px'></div><div style='float:right;padding-bottom:8px'><a style='color:#fff; text-decoration:underline' href='javascript:cs3_hideLargeSize()'>close</a></div>";
    	zoom_box.innerHTML = html; 
    	zoom_box.style.color = '#fff';
    	zoom_box.style.height = '25px';
    	zoom_box.style.paddingTop='10px';
    	zoom_box.onclick = function() { cs3_hideLargeSize(); }
    	container.appendChild(zoom_box);
    }
    
    if (!zoom_loading) {
        zoom_loading = document.createElement('img');
        zoom_loading.setAttribute('id','zoom_loading');
        zoom_loading.src = '/images/loadingAnimation.gif';
        zoom_loading.style.position = 'absolute';
	zoom_loading.style.display = 'none';
        body.appendChild(zoom_loading);
    }
    
    if (!img) {
        img = document.createElement("img");
        img.setAttribute('id','zoom_img');
        img.style.border='10px solid white';
        img.onload = function() { cs3_positionLargeImage(); }
        img.onclick = function() { cs3_hideLargeSize(); }
        zoom_box.appendChild(img);
    } 
    Element.setWidth(container, page_size[0]);
    Element.setHeight(container, page_size[1]);
    Element.setWidth(overlay, page_size[0]);
    Element.setHeight(overlay, page_size[1]); 

    $('zoom_title').innerHTML = title; 
    zoom_box.style.visibility='hidden';
    Element.setTop(zoom_loading,page_scroll[1]+(page_size[3]-13)/2);
    Element.setLeft(zoom_loading,page_scroll[0]+(page_size[2]-208)/2);
    zoom_loading.show();
    img.setAttribute('src',src); 
    new Effect.Appear(container, { duration: .25});
    Event.observe(window,'resize',cs3_positionLargeImage);

}

function cs3_positionLargeImage() {
    var img = $('zoom_img');
    var zoom_box = $('zoom_box');
    var page_size = getPageSize();
    var page_scroll = getPageScroll();
    Element.setWidth('zoom_container', page_size[0]);
    Element.setHeight('zoom_container', page_size[1]);
    Element.setWidth('zoom_overlay', page_size[0]);
    Element.setHeight('zoom_overlay', page_size[1]);

    var pad = 50;
    var defaultWidth = 980; 
    var width = defaultWidth  > page_size[2]-pad*2? page_size[2]-pad*2:defaultWidth; 
    Element.setWidth(img,width);
 
    width+=20;
    var height = img.height + 50 + 20; 
    Element.setWidth(zoom_box,width);
    var window_width = page_size[2];
    var window_height = page_size[3]; 
    var top = page_scroll[1]+ (window_height-height)/2;
    var left = page_scroll[0] + (window_width-width)/2;
    if (top < page_scroll[1]) top = page_scroll[1];
    if (left < 0) left = 0;
    Element.setLeft(zoom_box,left);
    Element.setTop(zoom_box,top);
    var bgsize= top+height>page_size[1]?top+height:page_size[1];
    Element.setHeight($('zoom_overlay'),bgsize);
    Element.setHeight($('zoom_container'),bgsize);
    $('zoom_loading').hide();
    zoom_box.style.visibility='visible';
}


function cs3_hideLargeSize() {
    $('zoom_loading').hide();
    new Effect.Fade($('zoom_container'), { duration: .25});
    Event.stopObserving(window,'resize',cs3_positionLargeImage);
}

function getPageSize(){
	
	var xScroll, yScroll;
	
	if (window.innerHeight && window.scrollMaxY) {	
		xScroll = window.innerWidth + window.scrollMaxX;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
	
	var windowWidth, windowHeight;
	
//	console.log(self.innerWidth);
//	console.log(document.documentElement.clientWidth);

	if (self.innerHeight) {	// all except Explorer
		if(document.documentElement.clientWidth){
			windowWidth = document.documentElement.clientWidth; 
		} else {
			windowWidth = self.innerWidth;
		}
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) { // other Explorers
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}	
	
	// for small pages with total height less then height of the viewport
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else { 
		pageHeight = yScroll;
	}

//	console.log("xScroll " + xScroll)
//	console.log("windowWidth " + windowWidth)

	// for small pages with total width less then width of the viewport
	if(xScroll < windowWidth){	
		pageWidth = xScroll;		
	} else {
		pageWidth = windowWidth;
	}
//	console.log("pageWidth " + pageWidth)

	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
	return arrayPageSize;
}

function getPageScroll(){

	var xScroll, yScroll;

	if (self.pageYOffset) {
		yScroll = self.pageYOffset;
		xScroll = self.pageXOffset;
	} else if (document.documentElement && document.documentElement.scrollTop){	 // Explorer 6 Strict
		yScroll = document.documentElement.scrollTop;
		xScroll = document.documentElement.scrollLeft;
	} else if (document.body) {// all other Explorers
		yScroll = document.body.scrollTop;
		xScroll = document.body.scrollLeft;	
	}

	arrayPageScroll = new Array(xScroll,yScroll) 
	return arrayPageScroll;
}

function cs3_screenshot_over(largeid,smallid,src) {
    var large = $(largeid);
    var small = $(smallid);
    small.addClassName('history-over');
    large.style.backgroundImage="url("+src+")";
    large.addClassName('history-over-large');
}

function cs3_screenshot_out(largeid,smallid,src) {
   var large = $(largeid);
   var small = $(smallid);
   small.removeClassName('history-over');
   large.style.backgroundImage="url("+src+")";
   large.removeClassName('history-over-large');
}

function cs3_zoom_set(img, dir, file,width, height, margin, zIndex, delay) {
  setTimeout(function() {
    if (img.dir==dir) {
      img.style.width=width;
      img.style.height=height;
      img.style.margin=margin;
      img.style.zIndex=zIndex;
      img.src=file;
      img.parentNode.parentNode.style.zIndex=zIndex;
    }
  }, delay);
}

function cs3_zoom_larger(img, f1,f2,w1, h1, w2,h2) {
  img.dir='rtl';
  now=parseInt(img.style.zIndex);
  var steps = 10;
  for (i=now+1; i<=steps; i++) {
    w=w1+((w2-w1)/steps*i)+'px';
    h=h1+((h2-h1)/steps*i)+'px';
    m=((h1-h2)*i/(2*steps))+'px 0 0 '+((w1-w2)*i/(2*steps))+'px';
    f=(i==steps)?f2:f1;
    cs3_zoom_set(img, 'rtl', f,w, h, m, i, 20*(i-now));
  }
}

function cs3_zoom_smaller(img,f1,f2, w1, h1, w2, h2) {
  img.dir='ltr';
  var steps = 10;
  now=parseInt(img.style.zIndex);
  for (i=now-1; i>=0; i--) {
    w=w1+((w2-w1)/steps*i)+'px';
    h=h1+((h2-h1)/steps*i)+'px';
    m=((h1-h2)*i/(2*steps))+'px 0 0 '+((w1-w2)*i/(2*steps))+'px';
    f=(i==steps)?f2:f1;
    cs3_zoom_set(img, 'ltr', f,w, h, m, i, 20*(now-i));
  }
}

function cs3_visit() {
    var expires = 60*60;
    
    var jar = new CookieJar({
        expires:365*24*60*60,
        path:'/'
    });
    
    var lastVisit = jar.get("lastVisit");
    var lastClickTime = jar.get("lastClickTime");
    if (!lastVisit) lastVisit = Math.floor((new Date()).getTime()/1000);
    if (!lastClickTime) lastClickTime = Math.floor((new Date()).getTime()/1000);
    
    var now = Math.floor((new Date()).getTime()/1000);
    var diff = now - lastClickTime;
    if (diff > expires) {
        lastVisit = lastClickTime;
    }
    lastClickTime = now;
    jar.put('lastVisit',lastVisit);
    jar.put('lastClickTime',lastClickTime);
}


function cs3_choose(result,site1,site2,url) {
      if (navigator.cookieEnabled || typeof(navigator.cookieEnabled) != "undefined") {
          document.cookie = "submit=" + result+":"+site1+":"+site2+"; path=/";
      }
      document.location.href = url;
}

function cs3_flag(id) {
     if (navigator.cookieEnabled || typeof(navigator.cookieEnabled) != "undefined") {
          document.cookie = "flag=" + id;
      }
      document.location.href = document.location.href;
}

function cs3_over(e,pos) {
    var desc = (pos == 1?'first':'second');
    var other = (pos == 2?'first':'second');
    var queue1 = desc +'queue';
    var queue2 = desc +'queue';
    var dur = .2;
    var del = 0;
    
     // Don't display the rollover when the page first loads
    var relTarg = e.relatedTarget || e.fromElement;
    if (!relTarg) return;
    if (relTarg.tagName == "HTML") return;
    //$('test').innerHTML=relTarg.id+" 2."+relTarg.className+" 3."+relTarg.tagName+" 4."+relTarg;
    var isChild = Element.descendantOf(relTarg,desc+'-site') || (relTarg.id == desc+'-site');
    if (isChild) return;
    
    // Don't display the rollover when rolling from one tag to the next within the screenshot
    var elem = Event.element(e);
    if (!elem) return;    
    var isChild = Element.childOf(elem,desc+'-site') || (elem.id == desc+'-site');
    if (!isChild) return;
    
    if (Element.visible(desc + '-check-div')) return;
    new Effect.Appear(desc + '-check-div',{
        queue:{position:'end',scope:desc+'top'},
        duration:dur,
        delay:del,
        to:.9
    });

    new Effect.Appear(desc+'-tools',{
        queue:{position:'end',scope:desc+'bottom'},
        duration:dur,
        delay:del,
        to:.9
    });
	
  
	 new Effect.Fade(other+'-check-div',{
        queue:{position:'end',scope:other+'top'},
        duration:dur
    });
    new Effect.Fade(other+'-tools',{
        queue:{position:'end',scope:other+'bottom'},
        duration:dur
    });

    
    Event.stop(e);
}

function cs3_out(e,pos) {
    var desc = (pos == 1?'first':'second');
    var other = (pos == 2?'first':'second');
    var relTarg = e.relatedTarget || e.toElement;
    if (!relTarg) return;
    var isChild = Element.childOf(relTarg,desc+'-site');
    if (isChild) return;
    var dur = .2;
    
  
    if (!Element.visible(desc+'-check-div')) return;
    new Effect.Fade(desc+'-check-div',{
        queue:{position:'end',scope:desc+'top'},
        duration:dur
    });
new Effect.Fade(desc+'-tools',{
        queue:{position:'end',scope:desc+'bottom'},
        duration:dur
    });
}



function cs3_voting_setup() {
    
    $('first-check-div').hide();
    $('first-tools').hide();
    $('second-check-div').hide();
    $('second-tools').hide();
    
    $('first-site').observe('mouseout', function(e){
       cs3_out(e,1);
    });
    
    $('first-site').observe('mouseover', function(e){
        cs3_over(e,1);
    });
    
    $('second-site').observe('mouseout', function(e){
        cs3_out(e,2);
    });
    
    $('second-site').observe('mouseover', function(e){
        cs3_over(e,2);
    });

}