var SplitPane = Class.create();

SplitPane.cache = new Array();
SplitPane.cacheIndex = 0;
SplitPane.handleWidth = 146; // Width of the handle

SplitPane.prototype = {

    initialize: function(div1_id, div1_width, div2_id, div2_left, div2_width, options) {
        this.options = { 
            onStart:    			Prototype.emptyFunction,
            onDrag:     			Prototype.emptyFunction,
            onEnd:      			Prototype.emptyFunction,
            active:     			false,
            div1MinWidth: 			null,
            div2MinWidth: 			420,
            dividerBlockedColor:	"",
            dividerHoverColor:		null
        }
        
        Object.extend(this.options, options || {});
        
        this.div1 = $(div1_id);
        this.div2 = $(div2_id);
        this.container = this.div1.parentNode;  			// This had better be the same for both divs
        this.div1_width = div1_width;   					// as a percentage
        this.div2_left = div2_left;     					// as a percentage
        this.div2_width = div2_width;   					// as a percentage
        
        this.div1_min_width = ( this.options.div1MinWidth == null ) ? 0 : this.options.div1MinWidth;
        this.div2_min_width = ( this.options.div2MinWidth == null ) ? 0 : this.options.div2MinWidth;
        
        SplitPane.cache[SplitPane.cacheIndex] = this;
        SplitPane.cacheIndex = SplitPane.cacheIndex+1;
    },
    set: function() {
        Element.makePositioned(this.container); // Fix IE
        
        // Change widths to percents so that window resizing works
        this.div1.style.width = this.div1_width + "%";
        this.div2.style.width = this.div2_width + "%";
        this.div2.style.left  = this.div2_left + "%";
        
        // Create a divider and make it a child of container
        this.divider = document.createElement("DIV");
        this.container.appendChild(this.divider);
	this.divider.id="SplitPaneDivider";
        this.divider.className="splitpane-divider clearfix";
        this.divider.style.position="absolute";
	this.divider.style.width=SplitPane.handleWidth + "px";
        this.divider.style.top="0px";
        this.divider.style.zIndex=1000;
		
								
								
								
								
								
							this.divider.innerHTML = '<div id="SliderWrapper" class="clearfix"><div id="SplitPanelLeft">		<img src="../images/tagicon/cultural.jpg" class="ImgLink" onclick="runSearch(\'Cultural\'); tagLayerClosetime();" alt="Cultural" title="Cultural" width="64" height="64" />		<img src="../images/tagicon/property.jpg" class="ImgLink" onclick="runSearch(\'Property\'); tagLayerClosetime();" alt="Property" title="Property" width="64" height="64" />		<img src="../images/tagicon/metrorail.jpg" class="ImgLink" onclick="runSearch(\'Metro Rail\'); tagLayerClosetime();" alt="Metro Rail" title="Metro Rail" width="64" height="64" />		<img src="../images/tagicon/nightlife.jpg" class="ImgLink" onclick="runSearch(\'Nightlife\'); tagLayerClosetime();" alt="Nightlife" title="Nightlife" width="64" height="64" />		<img src="../images/tagicon/shopping.jpg" class="ImgLink" onclick="runSearch(\'Shopping\'); tagLayerClosetime();" alt="Shopping" title="Shopping" width="64" height="64" />		<img src="../images/tagicon/waterfront.jpg" class="ImgLink" onclick="runSearch(\'Waterfront\'); tagLayerClosetime();" alt="Waterfront" title="Waterfront" width="64" height="64" /></div><div id="SplitPanelRight">		<img src="../images/tagicon/cafe.jpg" class="ImgLink" onclick="runSearch(\'Cafe\'); tagLayerClosetime();" alt="Cafe" title="Cafe" width="64" height="64" />		<img src="../images/tagicon/events.jpg" class="ImgLink" onclick="runSearch(\'Events\'); tagLayerClosetime();" alt="Events" title="Events" width="64" height="64" />		<img src="../images/tagicon/kids.jpg" class="ImgLink" onclick="runSearch(\'Kids\'); tagLayerClosetime();" alt="Kids" title="Kids" width="64" height="64" />		<img src="../images/tagicon/music.jpg" class="ImgLink" onclick="runSearch(\'Music\'); tagLayerClosetime();" alt="Music" title="Music" width="64" height="64" />		<img src="../images/tagicon/food.jpg" class="ImgLink" onclick="runSearch(\'Food\'); tagLayerClosetime();" alt="Food" title="Food" width="64" height="64" />		<img src="../images/tagicon/tour.jpg" class="ImgLink" onclick="runSearch(\'Tour\'); tagLayerClosetime();" alt="Tour" title="Tour" width="64" height="64" /></div><img src="images/DividerGrip.gif" id="DividerGrip"/></div>';
        
        this.divider_init_color=this.divider.style.backgroundColor;
        this.containerWidth = this.getWidth(this.container);
        
        this.setDividerX();
        this.setDividerHeight();

        if (this.options.active) {
            this.eventMouseDown = this.startDrag.bindAsEventListener(this);
            this.eventMouseUp   = this.endDrag.bindAsEventListener(this);
            this.eventChangeCursor = this.cursor.bindAsEventListener(this);
            this.eventMouseMove = this.update.bindAsEventListener(this);
            
            this.eventMouseOver = this.mouseOver.bindAsEventListener(this);
            this.eventMouseOut = this.mouseOut.bindAsEventListener(this);
    
            Event.observe(this.divider, "mousedown", this.eventMouseDown);
            Event.observe(document, "mouseup", this.eventMouseUp);
            Event.observe(this.divider, "mousemove", this.eventChangeCursor);
            Event.observe(document, "mousemove", this.eventMouseMove);
            
            Event.observe(this.divider, "mouseover", this.eventMouseOver);
            Event.observe(this.divider, "mouseout", this.eventMouseOut);
        }
    },
    serialize: function() {
        return "div1=" + this.div1.id
        + "&div1_left=" + this.getXPercent(this.div1)
        + "&div1_width=" + this.getWidthPercent(this.div1)
        + "&div2=" + this.div2.id
        + "&div2_left=" + this.getXPercent(this.div2)
        + "&div2_width=" + this.getWidthPercent(this.div2);
    },
    dispose: function() {
        Event.stopObserving(this.divider, "mousedown", this.eventMouseDown);
        Event.stopObserving(document, "mouseup", this.eventMouseUp);
        Event.stopObserving(this.divider, "mousemove", this.eventChangeCursor);
        Event.stopObserving(document, "mousemove", this.eventMouseMove);

        Event.stopObserving(this.divider, "mouseover", this.eventMouseOver);
        Event.stopObserving(this.divider, "mouseout", this.eventMouseOut);
    },    
    cursor: function(event) {
        this.divider.style.cursor = "e-resize";     
    },
    mouseOver: function(event) {
    	if (this.options.dividerHoverColor != null) {
    		this.divider.style.backgroundColor=this.options.dividerHoverColor;
    	}
    },
    mouseOut: function(event) {
    	this.divider.style.backgroundColor=this.divider_init_color;
    },    
    startDrag: function(event) {
        if(Event.isLeftClick(event)) {
            this.active = true;            
            this.setStartWidth(event);            
            Event.stop(event);            
            this.options.onStart(this, event);
        }
    },
    endDrag: function(event) {
        if (this.active) {
            this.active = false;
            Event.stop(event);
            this.setDividerX();
            this.setDividerHeight();
            this.options.onEnd(this, event);
            this.divider.style.backgroundColor=this.divider_init_color;
        }
    },
    update: function(event) {
        if (this.active) {      
            if (this.getWidth(this.container) != this.containerWidth) {
            	this.setStartWidth(event);
            }
            
            var pointer  = [Event.pointerX(event), Event.pointerY(event)];
            var delta = pointer[0] - this.start_pointer[0];
            
            // Calculate new div1 width
            var new_div1_width = this.start_div1_width + delta;
            
            var canResize = true;
            
            // Limit width of div1
            if (new_div1_width < this.div1_min_width) {
                canResize = false;
            }
                        
            // Calculate new div2 width (in %)
            var new_div2_width = this.start_div2_width - delta;
            
            // Limit width of div2
            if (new_div2_width < 420) {
                canResize = false;
            }

            if (canResize) {	            
	            // resize/position the divs
	            this.div1.style.width = (new_div1_width * 100.0 / this.containerWidth) + "%";           
	            this.div2.style.left  = ((this.start_div2_left + delta) * 100.0 / this.containerWidth) + "%";
	            this.div2.style.width = (new_div2_width * 100.0 / this.containerWidth) + "%";
	            
	            // Reset the divider location.
	            this.setDividerX();	            
            
				//Reset the list height to accomodate page ranges dropping
				$('ListContent').setStyle({ 'height': Element.getHeight('ListWrapper') 
					- Element.getHeight('ListLock') - Element.getHeight('PaginationDisplay') - 2 + 'px' });

				var version=0;
				if (navigator.appVersion.indexOf("MSIE")!=-1) {
 					temp=navigator.appVersion.split("MSIE");
 					version=parseFloat(temp[1]);
				}
				if($('StreetViewDiv')){
					scaleContent();
				}
				if(version > 5.5) {
					$('ListContent').setStyle({ 'width': new_div1_width + 'px' });		

					if (document.getElementById('ListContent').scrollHeight >
						document.getElementById('ListContent').clientHeight) {
							if ($('DivForIE')) {
								$('DivForIE').style.width = new_div1_width - 86 + 'px';
							}
					} else {
						if ($('DivForIE')) {
							$('DivForIE').style.width = new_div1_width + 'px';
						}
					}
	
					if(Element.getWidth($('ListContent')) <= 480) {
						if($('DivForIE')) {
							$('DivForIE').style.width = '480px';
						}
						$('ListContent').style.overflowX = 'auto';
					} else {
						$('ListContent').style.overflowX = 'hidden';
					}
				}
			} else {
            	this.divider.style.backgroundColor=this.options.dividerBlockedColor;
            }

        Event.stop(event);            
        this.options.onDrag(this, event);
        }
    },    
    setStartWidth: function(event) {
    	var offsets = Position.cumulativeOffset(this.divider); 
        this.start_pointer  = [Event.pointerX(event), Event.pointerY(event)];
        this.inset = this.start_pointer[0] - offsets[0];
        this.containerWidth = this.getWidth(this.container);
        this.start_div1_width = this.getWidth(this.div1);
        this.start_div2_left = this.getX(this.div2);
		var browser=navigator.vendor;
		//alert(browser);
		//alert(window.opera);
		if (browser=="Google Inc." || browser == "Apple Computer, Inc.") {
	        this.start_div2_width = this.getWidth(this.div2) + 2;
		} else {
		this.start_div2_width = this.getWidth(this.div2);
		}
	
		if(window.opera) {
			this.start_div2_width + 8;
		}

		this.start_divider_x = this.getX(this.divider);
    },
    setDividerX: function() {
        // Place the center of 'divider' half way between div1 and div2
        var div1_right = this.getX(this.div1) + this.getWidth(this.div1);
//       var l = (((this.getX(this.div2)- div1_right - SplitPane.handleWidth) + div1_right) * 100.0 / this.containerWidth) + "%";
	this.divider.style.left = Math.round(div1_right)-73 +"px";;
    },
    setDividerHeight: function() {
        // Set the divider height to the greater of the heights of the two divs
        var h = Math.max(this.getHeight(this.div1), this.getHeight(this.div2));
        this.divider.style.height = h + "px";
    },
    getX: function(el) {
        return el.x ? el.x : el.offsetLeft;
    },  
    getXPercent: function(el) {
        var x = "0";
        x = Element.getStyle(el,"left");
        if (x) {
            x = x.replace("%","");  //moz
        }
        
        return x ? parseFloat(x) : 0.0;
    },  
    getWidthPercent: function(el) {
        var w = "0";
        w = Element.getStyle(el,"width");
        if (w) {
            w = w.replace("%","");  //moz
        }
        
        return w ? parseFloat(w) : 0.0;
    },  
    getWidth: function(el) {
        return el.offsetWidth;
    },  
    getHeight: function(el) {
        if (el.currentStyle){
            return el.offsetHeight;                                 //ie
        } else {
            return Element.getStyle(el,"height").replace("px","");  //moz
        }
    }
}

SplitPane.setAll = function () {
    for(i=0; i<SplitPane.cache.length; i++){
        SplitPane.cache[i].set();
    }
}

SplitPane.handleResize = function(left) {
	for(i=0; i<SplitPane.cache.length; i++){
        	SplitPane.cache[i].setDividerXFromResize(left);
		SplitPane.cache[i].setDividerHeight();
    	}
}

//Event.observe(window, "load", SplitPane.setAll);