iPhoneUI = {
	widgets:[
		// form widgets
		'iInput',
		'iPassword',
		'iCheckBox',
		'iRadioButton',
		'iSelect',
		
		// navigation widgets
		'iMenu',
		'iScroll', // should be loaded after build iMenu and before hide any elements by iTabs
		'iTabs',
		
		// other widgets
		'iGallery'
	],
	initInterface:function()
	{
		jQuery('.iphone .topbar').addClass('iphoneui')
								 .append('<div class="iclockui"></div>');
		iPhoneUI.updateClock(); 
		// update clock every 30 second
		setInterval('iPhoneUI.updateClock()', 1000 * 30 );
	},
	updateClock:function ( )
	{
		var currentTime = new Date ( );
		
		var currentHours = currentTime.getHours ( );
		var currentMinutes = currentTime.getMinutes ( );
		var currentSeconds = currentTime.getSeconds ( );
		
		// Pad the minutes and seconds with leading zeros, if required
		currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
		currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
		
		// Choose either "AM" or "PM" as appropriate
		var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";
		
		// Convert the hours component to 12-hour format if needed
		currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;
		
		// Convert an hours component of "0" to "12"
		currentHours = ( currentHours == 0 ) ? 12 : currentHours;
		
		// Compose the string for display
		var currentTimeString = currentHours + ":" + currentMinutes + " " + timeOfDay;
		
		// Update the time display
		jQuery('.iclockui').html(currentTimeString);
		//document.getElementById("clock").firstChild.nodeValue = currentTimeString;
	},
	
	
	/**
	 * Try to initialize all loaded widgets
	 */
	initWidgets:function()
	{
		for (var i = 0, size = iPhoneUI.widgets.length; i < size; i++) {
			var widget   = iPhoneUI.widgets[i];
			var selector = widget.toLowerCase();
			
			if (typeof jQuery.fn[widget] == 'function') {
				var el = jQuery('.'+selector)[widget]();
				//console.log(selector);
			}
		}
	},
	/**
	 * Load all widgets from homepage
	 */
	loadWidgets:function()
	{
		for (var i = 0, size = iPhoneUI.widgets.length; i < size; i++) {
			$.getScript("http://iphone.hohli.com/js/ui/ui."+iPhoneUI.widgets[i]+".js");
		}
	},
	
	/**
	 * Bind touch events
	 */
	initTouchEvents:function()
	{
		document.addEventListener("touchstart",  iPhoneUI.touchHandler, true);
	    document.addEventListener("touchmove",   iPhoneUI.touchHandler, true);
	    document.addEventListener("touchend",    iPhoneUI.touchHandler, true);
	    document.addEventListener("touchcancel", iPhoneUI.touchHandler, true); 
	},
	/**
	 * Touch events handler
	 */
	touchHandler:function(event)
	{
	    var touches = event.changedTouches,
	        first = touches[0],
	        type = "";
    
	    switch(event.type)
	    {
	        case "touchstart": type = "mousedown"; break;
	        case "touchmove":  type = "mousemove"; break;        
	        case "touchend":   type = "mouseup";   break;
	        default: return;
	    }
	        
	    //initMouseEvent(type, canBubble, cancelable, view, clickCount, 
	    //           screenX, screenY, clientX, clientY, ctrlKey, 
	    //           altKey, shiftKey, metaKey, button, relatedTarget);
	    
	    var simulatedEvent = document.createEvent("MouseEvent");
	    	simulatedEvent.initMouseEvent(type, true, true, window, 1, 
			                              first.screenX, first.screenY, 
			                              first.clientX, first.clientY, false, 
			                              false, false, false, 0/*left*/, null);
	                                                                            
	    first.target.dispatchEvent(simulatedEvent);
	    //event.preventDefault();
	}
}




jQuery(document).ready(function(){
	iPhoneUI.initInterface();
	iPhoneUI.initWidgets();
	if ($.browser.safari) {
		iPhoneUI.initTouchEvents();
	}
});



		 
// Infowin class for displaying a miniature info window. 
 








 
    


		
		
		// EBubble.js 
//
//   This Javascript is provided by Mike Williams
//   Community Church Javascript Team
//   http://www.bisphamchurch.org.uk/   
//   http://econym.org.uk/gmap/
//
//   This work is licenced under a Creative Commons Licence
//   http://creativecommons.org/licenses/by/2.0/uk/
//
// Version 0.0  13/07/2007 Initial version
// Version 0.1  14/07/2007 Bugfix: Was failing to apply the position offset.
// Version 0.2  30/07/2007 Bugfix: Wasn't clearingout the old contents.
// Version 0.3  21/09/2007 Added noCloseOnClick parameter
// version 0.4  25/12/2007 Bugfix: Problem with offset
// version 0.5  13/01/2009 Bugfix: Problem with offset (thanks to Joerg Wagner)

      function EBubble(map,image,size,insize,inset,anchor,noCloseOnClick) {
        // parameters
        var that=this;
        this.map = map;
        this.image=image;
        this.size=size;
        this.insize=insize;
        this.inset=inset;
        this.anchor=anchor;
        this.noCloseOnClick=noCloseOnClick;
        // internal variables
        this.visible = false;
        // browser - specific variables
        this.ie = false;
        var agent = navigator.userAgent.toLowerCase();
        if ((agent.indexOf("msie") > -1) && (agent.indexOf("opera") < 1)){ this.ie = true} else {this.ie = false}

        this.div1 = document.createElement("div");
        this.div1.style.position = "absolute";
        this.div1.style.display="none";

        this.div1.className = "infowin-container";

        document.body.appendChild(this.div1);
        
        if (this.ie && this.image.indexOf(".png")>-1) 
        {
          var loader = "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.image+"', sizingMethod='scale');";
          this.div1.innerHTML = '<div style="height:' +this.size.height+ 'px; width:'+this.size.width+'px; ' +loader+ '" ></div>';
        } 
        else 
        {
          this.div1.innerHTML = '<img src="' + this.image + '" width="' + this.size.width +'" height="' + this.size.height +'">';
        }
        
        
        // === Close the bubble if the map moves ===
        GEvent.addListener(map, "dragstart", function() {
          that.hide();
        } );
        GEvent.addListener(map, "moveend", function() {
          that.hide();
        } );
        
        /*
        // === Listen for clicks and mousedowns ===
        GEvent.addDomListener(this.div1,"click", function() 
        {
          if (!that.noCloseOnClick) 
          {
          		that.hide();
          }
          
          //GEvent.trigger(that,"click");
        });
        
        
        
        GEvent.addDomListener(this.div1,"mousedown", function() {
          if (!that.noCloseOnClick) that.hide();
          //GEvent.trigger(that,"click");
        });
*/
        
        this.div2 = document.createElement("div");
        this.div1.appendChild(this.div2);
        this.div2.style.position = "absolute";
        
        this.div2.className = "infowin-content";

        //$("#infowin-content").addClass('infowin-content');

        /*
        this.div2.style.width = "95%";
        this.div2.style.height = this.insize.height + "px";
		*/
      } 
      

      EBubble.prototype.openOnMap = function(point, html, offset) {
        this.offset = offset||new GPoint(0,0);
        this.point = point;


        //div2.style.backgroundColor = "#0000ff"; 
        this.div2.innerHTML = html;

        // pixel relative to map world
        var p = this.map.fromLatLngToDivPixel(point);

        // map world relative to map container
        var dragObject = this.map.getPane(G_MAP_MAP_PANE).parentNode;
        var x = p.x + parseInt(dragObject.style.left);
        var y = p.y + parseInt(dragObject.style.top);

        // map container relative to the page
        var container = this.map.getContainer();
        while(container != null){
          y += container.offsetTop;
          x += container.offsetLeft;
          container = container.offsetParent
        }
        
        // offset by the requested anchor position
        y -= this.anchor.y;
        x -= this.anchor.x;

        // offset by the specified offset position
        y -= this.offset.y;
        x -= this.offset.x;


        // Apply those values 
        this.div1.style.left = x+"px";
        this.div1.style.top = y+"px";
        
        // make it visible
        this.visible = true;
        this.show();
      }
      
      EBubble.prototype.openOnMarker = function(marker,html) {
        var vx = marker.getIcon().iconAnchor.x - marker.getIcon().infoWindowAnchor.x;
        var vy = marker.getIcon().iconAnchor.y - marker.getIcon().infoWindowAnchor.y;
        this.openOnMap(marker.getPoint(), html, new GPoint(vx,vy));
      }
      

      EBubble.prototype.show = function() {
        this.div1.style.display="";
        this.div2.style.display="";
        this.visible = true;
      }
      
		      EBubble.prototype.hide = function() {
        this.div1.style.display="none";
        //this.div2.style.display="none";
        this.visible = false;
      }
      
      EBubble.prototype.isHidden = function() {
        return !this.visible;
      }
      
      EBubble.prototype.supportsHide = function() {
        return true;
      }






function Infowin(latlng, html) 
{

        this.latlng_ = latlng;
        this.html_ = html;
        this.prototype = new GOverlay();
 
        // Creates the DIV representing the infowindow
        this.initialize = function(map) 
        {
                var div = $('<div />');
                div.css({
                        position : 'absolute',
                        width : 234
                }).appendTo(map.getPane(G_MAP_FLOAT_PANE))
 
                
                $("p").click(function () { 
			      $(this).slideUp(); 
			    });
    
                this.map_ = map;
                this.div_ = div;
 
                this.update(html);
        }
 
        this.update = function(html)
        {
                this.html_ = html;
 
                this.div_.empty();
 
                $('<div />').addClass('infowin-top').appendTo(this.div_);
 
                var content = $('<div />').addClass('infowin-content').html(html);
 
                $('<div />').addClass('infowin-bottom').append(content).appendTo(this.div_);
 
                this.redraw(true);
        }
 
        // Remove the main DIV from the map pane
        this.remove = function() {
          this.div_.remove();
        }
 
        // Copy our data to a new instance
        this.copy = function() {
          return new Infowin(this.latlng_, this.html_);
        }
 
        // Redraw based on the current projection and zoom level
        this.redraw = function(force) {
                if (!force) return;
 
                var point = this.map_.fromLatLngToDivPixel(this.latlng_);
 				var baloon_width = 250;
                // Now position our DIV based on the DIV coordinates of our bounds
                this.div_.css(
                {
                        left 	: point.x - (baloon_width/2),
                        top 	: point.y - this.div_.height() - 40,
                        width	: baloon_width
                });
        }
}