(function() {
    YAHOO.example.app = 
    {
		displayName: null,
        itemName: null,
        catName: null,
        
        onItemMouseover: function(o)
        {            
            if(this.className != 'yui-ac2-highlight') 
	        {
                this.className = 'yui-ac2-highlight';
            }
        },
        
        onItemMouseout: function(o)
        {            
            if(this.className == 'yui-ac2-highlight') 
	        {
                this.className = '';
            }
        },
        
        onItemMouseclick: function(o)
        {          
            //Set the large image here 
			//YAHOO.env.ua.ie,
			//YAHOO.env.ua.gecko,
			//YAHOO.env.ua.webkit,
			//YAHOO.env.ua.opera
			//YAHOO.example.app.itemName = o.innerText;
			if(o == null) 
				o = window.event;
				
		   	if (typeof o.target != 'undefined') 
			{
				if(o.target.tagName == "LI")
					 YAHOO.example.app.displayName = YAHOO.example.app.itemName = o.target.textContent;
				else
					YAHOO.example.app.displayName = YAHOO.example.app.itemName = o.target.parentNode.textContent;
			}
			else
			{
				if(o.srcElement.tagName == "LI")
					YAHOO.example.app.displayName = YAHOO.example.app.itemName = o.srcElement.innerText.substring(2,o.srcElement.innerText.length);
				else
					YAHOO.example.app.displayName = YAHOO.example.app.itemName = o.srcElement.parentNode.innerText.substring(2,o.srcElement.parentNode.innerText.length);
			}

			if (YAHOO.example.app.itemName.indexOf('(') > 0 )
			{
				YAHOO.example.app.itemName = YAHOO.example.app.displayName.substr(0, YAHOO.example.app.displayName.indexOf(" ("));
			}
			var itemname =  YAHOO.example.app.itemName.split("/"); 
			
			if(itemname[0] != "")
			{
			 var optionname = itemname[0] ;
		    }else
			{
			  var optionname = itemname[1] ;
			}
			
			

          //  document.getElementById('imgMain').src = "http://www.mystyles2go.com/colors/" + YAHOO.example.app.catName.toLowerCase() + "/" + optionname + ".jpg";
			
			         document.getElementById('imgMain').src = "http://www.mystyles2go.com/colors/" + optionname + ".jpg";

			document.getElementById('imgName').innerHTML = YAHOO.example.app.displayName;
			
        },

        accept: function()
        {
			//Set the appropriate select and it's appropriate option here
            var oSelect = YAHOO.util.Dom.get('sel_' + YAHOO.example.app.catName);
            for(var i=0; i<oSelect.options.length; i++)
                if (oSelect.options[i].innerHTML == YAHOO.example.app.displayName)
                    oSelect.selectedIndex = i;

			//Hide the modal panel
            YAHOO.example.app.panel.hide();
		},
        
        cancel: function()
        {
            //Just hide the modal panel
            YAHOO.example.app.panel.hide();
        }

    };


    //Call loader the first time
    var loader = new YAHOO.util.YUILoader(
        {
            base: '../../../build/',
			
            //Get these modules
            require: 
            [	
			 	'event',
				'dom',
			 	'reset-fonts-grids',
			 	'utilities',
				'button',
                'container'
            ],
			
            onSuccess: function() 
            {
                //Load the global CSS file.
                
                //YAHOO.log('Main files loaded..', 'alert', 'main.js');
				YAHOO.util.Get.css('../css/mystyles2go.css');
            
                //Create a SimpleDialog used to mimic an OS dialog
                YAHOO.example.app.panel = new YAHOO.widget.SimpleDialog('alert', 
                {
					fixedcenter: true,
					modal: true,
					draggable: false,
					close: true,
                    visible: false,
                    //width: '780px',
                    width: '880px',
					icon: YAHOO.widget.SimpleDialog.ICON_INFO,
					constraintoviewport: true,
                    buttons: 
                    [
                        { text: 'Accept', handler: YAHOO.example.app.accept, isDefault: true },
                        { text: 'Cancel', handler: YAHOO.example.app.cancel}
                    ]
                });
                
                //Set the header
                YAHOO.example.app.panel.setHeader('Colors Available');
                
                //Give the body something to render with
                YAHOO.example.app.panel.setBody('Notta');
                
                // Wire up the success and failure handlers
				//YAHOO.example.app.panel.callback.success = YAHOO.example.app.handleSuccess;
				//YAHOO.example.app.panel.callback.failure = YAHOO.example.app.handleFailure;
                
                //Render the Dialog to the body
                YAHOO.example.app.panel.render(document.body);
                
                //Create a namepaced alert method
                YAHOO.example.app.showPicker = function(o) 
                {               
                    //Reset the body
                    YAHOO.example.app.panel.setBody('');
                    
                    //Set the selectID being used here in order to later determine which select to manipulate
                    //YAHOO.example.app.selectID = o.srcElement.id;
                    YAHOO.example.app.catName = o.id;

					
                    //Begin building our body				    
                    var elDoc = document.createElement("div");
                    
			            var elImg = document.createElement("div");
			            elImg.className = "yui-img-container";
			            elImg.innerHTML = "<img id='imgMain' src='blank.gif' width='180' height='180' /><br /><span id='imgName'></span>";
			            elDoc.appendChild(elImg);	
						
						var elSpacer = document.createElement("div");
						elSpacer.className = "yui-spacer";
						elDoc.appendChild(elSpacer);

			            var elContainer = document.createElement("div");
			            elContainer.className = "yui-ac2-container";
			            elDoc.appendChild(elContainer);
				
				            var elContent = document.createElement("div");
				            elContent.className = "yui-ac2-content";
				            elContainer.appendChild(elContent);
	
					            var elBody = document.createElement("div");
					            elBody.className = "yui-ac2-bd";
					            elContent.appendChild(elBody);

                                var elInner = document.createElement("div");
                                elInner.className = "yui-gb";
                                elBody.appendChild(elInner);

                                    // Build our 3 parallel divs
                                    var elDivL = document.createElement("div");
                                    elDivL.className = "yui-u first";
                                    elInner.appendChild(elDivL);
                                    
                                    var elDivC = document.createElement("div");
                                    elDivC.className = "yui-u";
                                    elInner.appendChild(elDivC);
                                    
                                    var elDivR = document.createElement("div");
                                    elDivR.className = "yui-u";
                                    elInner.appendChild(elDivR);                                    
                                    
                                    
                                    //Build our Lists
                                    var oListL = document.createElement("ul");
                                    elDivL.appendChild(oListL);                    
                                    
                                    var oListC = document.createElement("ul");
                                    elDivC.appendChild(oListC);
                                    
                                    var oListR = document.createElement("ul");
                                    elDivR.appendChild(oListR);
                                                                        
                                    // Loop through the appropriate select's option item list
                                    var oSelect = document.getElementById('sel_' + YAHOO.example.app.catName);
                                    for(var i=1; i<oSelect.options.length; i++) 
                                    {
                                        var oItem = document.createElement("li");
										oItem.name = i;
										oItem.id = 'li_' + i;
                                        
                                        if (i%3 == 0)
                                            oListR.appendChild(oItem);
                                        else if (i%2 == 0)
                                            oListC.appendChild(oItem);
                                        else 
                                            oListL.appendChild(oItem);
                                        
                                        //ListItems
                                        YAHOO.example.app.itemName = YAHOO.example.app.displayName = oSelect.options[i].innerHTML;
										
										if (YAHOO.example.app.displayName.indexOf('(') > 0 )
										{
											YAHOO.example.app.itemName = YAHOO.example.app.displayName.substr(0, YAHOO.example.app.displayName.indexOf(" ("));
										}
										
										var itemname =  YAHOO.example.app.itemName.split("/"); 
			
										if(itemname[0] != "")
										{
										 var optionname = itemname[0] ;
										}else
										{
										  var optionname = itemname[1] ;
										}

			                           // var url = "http://www.mystyles2go.com/colors/" + YAHOO.example.app.catName.toLowerCase() + "/" + optionname+ ".jpg";
                									                            var url = "http://www.mystyles2go.com/colors/"  + optionname+ ".jpg";

                                        oItem.innerHTML = "<img src='" + url + " 'class='ac2-img'>" + "<br/>" + YAHOO.example.app.displayName;
                                        //oItem.style.display = "list-item";
                            
                                        //oItem.mouseover = oItem.mouseout = oItem.onclick = null;
                                        YAHOO.util.Event.addListener(oItem,   "mouseover",    YAHOO.example.app.onItemMouseover);
                                        YAHOO.util.Event.addListener(oItem,   "mouseout",     YAHOO.example.app.onItemMouseout);
                                        YAHOO.util.Event.addListener(oItem,   "click",        YAHOO.example.app.onItemMouseclick);
                                    }

                    //Set the body
                    YAHOO.example.app.panel.setBody(elDoc);
                    //YAHOO.example.app.panel.setBody("<table><tr><td style='border:solid 1px red; width:180px; height:180px;'>Hello</td><td style='border:solid 1px red; width:180px; height:180px;'>Hello</td></tr></table>");
                    
                    //Set an icon
                    //YAHOO.example.app.panel.cfg.setProperty('icon', YAHOO.widget.SimpleDialog.ICON_WARN);

                    //Find the selected option item in the select
                    for (var iloop = 0; iloop < oSelect.options.length; iloop++)
                        if (oSelect.options[iloop].selected)
                        {
                            if (iloop == 0)
                                iloop = 1;
                                
                            YAHOO.example.app.displayName = YAHOO.example.app.itemName = oSelect.options[iloop].innerHTML;
                            if (YAHOO.example.app.itemName.indexOf('(') > 0 )
			                {
				                YAHOO.example.app.itemName = YAHOO.example.app.displayName.substr(0, YAHOO.example.app.displayName.indexOf(" ("));
			                }
							var itemname =  YAHOO.example.app.itemName.split("/"); 
			
										if(itemname[0] != "")
										{
										 var optionname = itemname[0] ;
										}else
										{
										  var optionname = itemname[1] ;
										}

                        
                            //document.getElementById('imgMain').src = "http://www.mystyles2go.com/colors/" + YAHOO.example.app.catName.toLowerCase() +"/" + optionname+ ".jpg";
							                            document.getElementById('imgMain').src = "http://www.mystyles2go.com/colors/"+optionname+ ".jpg";

			                document.getElementById('imgName').innerHTML = YAHOO.example.app.displayName;
                        }

                    
                    //Bring the dialog to the top
                    YAHOO.example.app.panel.bringToTop();
                    
                    //Show it
                    YAHOO.example.app.panel.show();
                };

				// Dynamically add our listeners to available categories - FIREFOX DOES NOT LIKE addListener !!!
				//YAHOO.example.app.nodes = YAHOO.util.Selector.query('div[id^=divPicker]');   
				//YAHOO.util.Event.on(YAHOO.example.app.nodes, 'click', YAHOO.example.app.showPicker); 			


			},
			

	        onFailure: function(o) 
			{
				alert("error: " + YAHOO.lang.dump(o));				
			}
			
        });
        
    loader.insert();
})();