// creating global named scope for vopium actions
var vopium = {}

// highlight function for selected top menu item
vopium.topMenuHighlight = function() 
{
	$('#menu_top li.active').each(function(index) 
	{
        var activeElement = $('#menu_top li.active');
        var highlighter = $('#menu_split_highlight');

        highlighter.css({
            width: activeElement.outerWidth(),
            left: activeElement.position().left - 30
        })        
    });
}

// highlight function for Hover top menu item upadted by Nauman
vopium.topMenuHighlightHover = function(topMenuId) 
{
		var activeElement = $(document.getElementById(topMenuId));
        var highlighter = $('#menu_split_highlight');

        highlighter.css({
            width: activeElement.outerWidth(),
            left: activeElement.position().left - 30
        });
}


// Price calculator used on price page
vopium.priceCalculator = function() {

    var $selector = $('#price_calculator_country');

    // setting initial price based on selector
    vopium.priceCalculator.setPrices($selector.val());
    
    // attaching on change event to get new prices
    $selector.change(function() {
        vopium.priceCalculator.setPrices($selector.val());
    });
}

// getting the prices from the loaded price data file
vopium.priceCalculator.setPrices = function(country) {
   // $('td#w2w').html(vopiumPrices[country].w2w);
    //$('td#m2m').html(vopiumPrices[country].m2m);
    //$('td#m2l').html(vopiumPrices[country].m2l);
    //$('td#sms').html(vopiumPrices[country].sms);
}


// initilization of the worldmap, pins and pin-hoverstates
vopium.worldMapInitialize = function(map) {

    var $container = $(map);
    
    // create hover bubble
    $container.append('<div class="v-pin_hover"></div>');
            
    $('.v-pin', $container).each(function(index) {

        var pin = this

        $(this).hover(function() {
            vopium.worldMapPinHover(pin, map, 'show');
        }, function() {
            vopium.worldMapPinHover(pin, map, 'hide');
        });

        if ($(this).attr('id') != '') {
            // attaching triggers based on id of the pin
            $('.' + $(this).attr('id')).hover(function() {
                    vopium.worldMapPinHover(pin, map, 'show');
            }, function() {
                    vopium.worldMapPinHover(pin, map, 'hide');
            });        
        };

        
    });




}

// function for triggering a pin hover on a world map
vopium.worldMapPinHover = function(pin, map, state) {
    
    // getting hoverbox
    var $hoverBox = $('.v-pin_hover', map);

    if (state == 'show') {
        //setting position
        $hoverBox.css({
            top: $(pin).position().top - 100,
            left: $(pin).position().left - 100
        })
        
        // injecting content from title attribute
        $hoverBox.html($(pin).attr('title'));
        $(pin).attr('title','');
        
        // showing hover
        $hoverBox.show();        
    } else {
        // resetting content back to title attribute
        $(pin).attr('title', $hoverBox.html());
        // hiding hover
        $hoverBox.hide();        
    };
        
}




// Transformation for creating visual select boxes
vopium.transformSelects = function() {
    
    $('select.transform').each(function(index) {
        
        // setting up variables for easy access and caching
        var $selectOriginal = $(this);
        var $selectOriginalElements = $('option', $selectOriginal)
        
        var $selectNewContainer = $('<div class="transformed_select"><div class="transformed_select_headline"></div><ul></ul></div>');
        var $selectNewUl = $('ul', $selectNewContainer);
        var $selectNewHeadline = $('.transformed_select_headline', $selectNewContainer);
        
        // create list of elements
        $selectOriginalElements.each(function(index) {
            $selectNewUl.append("<li>" + $(this).html() + "</li>");
        });
        
        // transfering styles to new select container
        $selectNewContainer.css({
            width: $selectOriginal.width(),
            fontSize: $selectOriginal.css('font-size'),
            float: $selectOriginal.css('float'),
            zIndex: $selectOriginal.css('z-index')
        })
        
        // setting headline to selected item
        $selectNewHeadline.html($(':selected', $selectOriginal).html());
        
        // attaching hovering display
        $selectNewContainer.hover(function() {
            $(this).addClass('hover');
            $selectNewUl.css({
                top: $(this).outerHeight(),
                width: $(this).outerWidth(),
                overflow: "auto"
            })
            
            if ($selectNewUl.height() > 200) {
                $selectNewUl.height(200)
            };
            
            $selectNewUl.show();
        }, function() {            
            $selectNewUl.hide()
            $(this).removeClass('hover');
        });
        
        // adding hover and click states to visual list
        $('li', $selectNewUl).each(function(index) {
            
            $(this).hover(function() {
                $(this).addClass('hover');
            }, function() {
                $(this).removeClass('hover');
            });
            
            $(this).click(function() {
                $selectOriginal.val($('option:eq('+ index +')', $selectOriginal).val());

                $selectOriginal.change();
                $selectNewHeadline.html($(':selected', $selectOriginal).html());
                $selectNewUl.hide()
                $(this).removeClass('hover');
                return false
            });
            
        });        
        
        // hide orginal select and append visual version
        $selectOriginal.hide();
        $selectOriginal.before($selectNewContainer);
        
        
    });
    
}


// actions fired on document loaded
$(document).ready(function() {
    
    // render menu highlight
    vopium.topMenuHighlight();
	
	// transforming selects to visual selects
    vopium.transformSelects();

    // initialize every world map on page
    $('.worldmap').each(function(index) {
        vopium.worldMapInitialize(this);
    });


    // if pricecalculator is found attach functions
    $('#price_calculator').each(function(index) {
        vopium.priceCalculator();
    });
    
    // replace <hr>'s with divs for compatability
    $('hr').each(function(index) {
        $(this).after('<div class="hr '+ $(this).attr('class') +'"></div>').remove()
    });;
    
    // adding last-indicator to top_bar link list
    $('#top_bar li:last').addClass('last');

    // inserting splits
    $('#top_bar li:not(:last)').each(function(index) {
        $(this).after('<li class="split">&nbsp;</li>')
    });
    
    // attaching top bar hover
    $('#top_bar li:not(.split, .active)').hover(function() {
        $(this).addClass('hover')
        
        // replacing image width hover state version by detecting current image url
        var imageUrl = $('img', this).attr('src');
		
		/*var theImage;
		theImage=imageUrl.split("/");
		//alert(theImage[6]);
		imageName=theImage[6].split("_");
		var imageFinal="";
		var extension="";
		for(xyz=0; xyz<imageName.length; xyz++)
		{
			checkGif=imageName[xyz].split(".gif");	
			if(checkGif.length==1)
				imageFinal+=imageName[xyz]+"_";
			if(checkGif.length==2)
			{
				extension="_"+imageName[xyz];
				extensionSrc=imageName[xyz];
			}
			//alert(imageName[xyz]);
		}
		imageSrc="";
		imageSrc+=imageFinal+extensionSrc;
		imageFinal+="HOVER"+extension;
		//alert(imageSrc);
		//alert(imageFinal);
		//var imageUrlHover = imageUrl.replace(imageSrc, imageFinal)
		//alert(imageUrlHover);*/
		var imageUrlHover = imageUrl.replace('.gif', '_hover.gif')
		
		
        $('img', this).attr('src', imageUrlHover);
        
    }, function() {
        $(this).removeClass('hover')

        // replacing image width hover state version by detecting current image url
        var imageUrl = $('img', this).attr('src');
        var imageUrlHover = imageUrl.replace('_hover.gif', '.gif')
		//var imageUrlHover = imageUrl.replace(imageFinal, imageSrc)
		
        $('img', this).attr('src', imageUrlHover);

    });
    
    // attaching currency select box
    $('#country_select').hover(function() {
        $('#country_select_chooser').show();
    }, function() {
        $('#country_select_chooser').hide();
    });
        
});