$(document).ready(function() {
    $('.hlist.small .scrollable').scrollable( { "next" : "none", "prev" : "none", "nextPage" : ".next", "prevPage": ".prev", "size" : 5 });
	$('.hlist.large .scrollable').scrollable( { "next" : "none", "prev" : "none", "nextPage" : ".next", "prevPage": ".prev", "size" : 6 });
	$('.hlist.multiRow .scrollable').scrollable( { "next" : "none", "prev" : "none", "nextPage" : ".next", "prevPage": ".prev", "size" : 1 });
	
    // add submit for buttons 
    $('#joinBtn').bind('click', function(e) {
		if($('#agree:checked').val() !== null && $('#agree:checked').val() !== undefined) {
	        $('#join').submit();
	        return false;
		} else {
			alert('Please indicate you Agree to the Terms and Conditions');
        	return false;
		}
    });

    $('#topsearchBtn').bind('click', function(e) {
	        $('#searchForm').submit();
	        return false;
    });

    $('#resetBtn').bind('click', function(e) {
	        $('#pinreset').submit();
	        return false;
    });

    $('#pinSubmitBtn').bind('click', function(e) {
	        $('#pinSubmit').submit();
	        return false;
    });

	$("#loginBtn").bind('click', function(e) {
		$(this).closest("form").submit();
	});


    $('.dropdown').each(function(i){
        $.dropdown(this);
    });

	$(".jqtransform").jqTransform();

    bindContent('body');

    /**
     * FieldSampleText lets you add default text to an input Element
     * onFocus the text and class attribute will be removed
     */ 
    $('.fieldSampleText').bind('focus', function(e) {
        $(this).val('');   
        $(this).unbind();
        $(this).removeClass('fieldSampleText')
    });

    // hiding and showing for tabs
    $('.blockTabs a').bind('click',blockTabEvent);

    // add ajax page reloads for search results
    $('.searchResults').each(function() {
            $.pagination(this);
    });

	var marca  = $('#marca');
	var modelo = $('#modelo');
	
    $("#marca").parent().find("ul").find("li").find("a").bind("click", function(e) {
		if($(this).text() == "Marca") {
			if($("#modelo_ul li").length > 1) {
				$("#modelo_ul li").each(function() { if($(this).text() != "Modelo") $(this).remove(); });
				$("#modelo").attr("disabled", "disabled");
				$("#modelo_ul").parent().removeClass("jqTransformSelectActive").addClass("jqTransformSelectDisabled");
				$("#modelo_ul").parent().find("div span").text("Modelo");
				$(".phone_display").hide();
			}
			return;
		}
        populateModelo(modelo, $(this).text());
    });

});

function get_phone_picture(modelo) {
	if(modelo == "Modelo") {
		$(".phone_display").hide();
		return;
	}
	$('.phone_display').show().html('<img src="/phone_models/image?make=' + $("#marca").val() + '&model=' + modelo +'" alt="" style="height:90px; width:65px"/>');
}


// add event listeners for clicks on content
// so that an overlay can be displayed
// @param match only content beneath a element
//        used for ajax refreshed
function bindContent(parentElement) {

    $(parentElement).find('.graphic .contentName, .graphic .contentImage').bind(
            'click', displayGraphicOverlay);
    $(parentElement).find('.video .contentName, .video .contentDescription, .video .contentImage').bind(
            'click', displayVideoOverlay);
    $(parentElement).find('.game .contentName,   .game .contentImage').bind(
            'click', displayGameOverlay);
    $(parentElement).find('.audio .contentDescription,  .audio .contentImage, .audio .audioPreviewIcon').bind(
            'click', displayAudioOverlay);
}



(function($){

    $.pagination = function pgnInit(element) {
        var url=         '';  // url of the resource
        var searchText=  '';  // search text to use 
        var loading=      ''; // blocks while content is loading
        var container= false; // container that holds searchItems

        var _clickEvent = function objClickEvent(e) {
            var offset = $(this).attr('offset');

            if (loading) {
                return false;
            }

            $(container).addClass('loading'); 
            loading = true;

            $.get(
                url,
                {'o':offset, 'q':searchText},
                function paginationCallback(response, textStatus) {
                    loading = false;
                    if (!response.success) {
                        return false;
                    }
                    container.find('a').unbind();
                    container.html(response.data);  

                    //rebind event listeners
                    bindLinks(); 
                    bindContent(container);
            },'json');

            return false;
        }

        var bindLinks = function() {
            var links = container.find('.pagination a');
            links.bind(
                    'click', this, _clickEvent);        
        }

        container = $(element);
        searchText = container.find('.searchText').text();
        url = container.find('.url').text();
        bindLinks();
    }

})(jQuery);



function blockTabEvent(e) {
        if ($(this).hasClass('selected')) {
            return false;
        }
        $(this).parents('.blockTabs').find('.selected').each(function(i) {
            $(this).removeClass('selected');
            $($(this).attr('rel')).hide();         
        });
        $($(this).attr('rel')).show();
        $(this).addClass('selected');
        return false;
}

(function($){
    var tab = false;
    var menu = false;

    var toggleEvent = function dropdownToggle(e) {
        $($(this).toggleClass("hover").attr('rel')).toggle();
    };

    $.dropdown = function dropdownInit(element) {
        tab  = $(element);
        menu = $(tab.attr('rel'));
        tab.bind('mouseleave mouseenter',this, toggleEvent);
        var offset = tab.offset();
        menu.css('top',  152 + tab.height());
        menu.css('left', offset.left);
    };
})(jQuery);




/******** code for displaying overlays *********/

function displayGraphicOverlay() {
    var contentContainer = $(this).closest('.content');
    var contentData = getContentData(contentContainer);
    var data = $.tmpl('graphicOverlayTemplate',contentData);

    displayOverlay._init({
         'templateSelector': '#baseOverlayTemplate',
         'openCallback': function(overlayObj) {
            $(overlayObj.overlay).find('.overlayBody').html(data);
            $(overlayObj.overlay).find('.previewImg').load(function() {
                overlayObj.autoresize();
                });
         }
    });
    return false;
}

function displayGameOverlay() {
    var contentContainer = $(this).closest('.content');
    var contentData = getContentData(contentContainer);
    var data = $.tmpl('gameOverlayTemplate',contentData);

    displayOverlay._init({
         'templateSelector': '#baseOverlayTemplate',
         'openCallback': function(overlayObj) {
            $(overlayObj.overlay).find('.overlayBody').html(data);
            $(overlayObj.overlay).find('.previewImg').load(function() {
                overlayObj.autoresize();
                });
         }
    });
    return false;
}

function displayAudioOverlay() {
    var contentContainer = $(this).closest('.content');
    var contentData = getContentData(contentContainer);
    var data = $.tmpl('audioOverlayTemplate',contentData);

    displayOverlay._init({
         'templateSelector': '#baseOverlayTemplate',
         'openCallback': function(overlayObj) {
            $(overlayObj.overlay).find('.overlayBody').html(data);
            $(overlayObj.overlay).find('.previewImg').load(function() {
                overlayObj.autoresize();
                });
         }
    });
    return false;
}

function displayVideoOverlay() {
    var contentContainer = $(this).closest('.content');
    var contentData = getContentData(contentContainer);
    var data = $.tmpl('videoOverlayTemplate',contentData);

    displayOverlay._init({
         'templateSelector': '#baseOverlayTemplate',
         'openCallback': function(overlayObj) {
            $(overlayObj.overlay).find('.overlayBody').html(data);
            $(overlayObj.overlay).find('.previewImg').load(function() {
                overlayObj.autoresize();
                });
         }
    });
    return false;
}


function display() {
    var contentContainer = $(this).closest('.content');
    var contentData = getContentData(contentContainer);
    var data = $.tmpl('graphicOverlayTemplate',contentData);

    displayOverlay._init({
         'templateSelector': '#baseOverlayTemplate',
         'openCallback': function(overlayObj) {
            $(overlayObj.overlay).find('.overlayBody').html(data);
            $(overlayObj.overlay).find('.previewImg').load(function() {
                overlayObj.autoresize();
                });
         }
    });
    return false;
}



// returns the data of a content items html
function getContentData(node) {
   return {
        'contentName': node.find('.contentName').text(),
        'contentDescription': node.find('.contentDescription').text(),
        'contentArtist': node.find('.contentArtist').text(),
        'contentId':node.find('.contentId').text(),
        'fileId':node.find('.fileId').text()
   };
}

function displayGraphicOverlay() {
	$(".overlay").remove();
    var contentContainer = $(this).closest('.content');
    var contentData = getContentData(contentContainer);
    var data = $.tmpl('graphicOverlayTemplate',contentData);

    displayOverlay._init({
         'templateSelector': '#baseOverlayTemplate',
         'openCallback': function(overlayObj) {
            $(overlayObj.overlay).find('.overlayBody').html(data);
            $(overlayObj.overlay).find('.previewImg').load(function() {
                overlayObj.autoresize();
                });
         }
    });
    return false;
}

/**
 * display confirmation overlay
 */
displayOverlay = {
    overlay: '',
    className:'overlay',
    templateSelector: '', 
    closeSelector: '.close',
    borderSize: 5, // in pixels
    openCallback: function() {},
    closeCallback: function() {},

    _init: function (options) {
        //positioning
        var scrollTop = $(window).scrollTop();
        this.left = ($(window).width() / 2) - 200 + "px";
        this.topp =  ($(window).height() / 2) - 50 + scrollTop + "px";
        this.bottom = false;
        this.right = false;
        
        for (var key in options) {
            this[key] = options[key];
        }

        this._open();
   },
        // when user clicks the to close   
    _close: function(e) {
            e.data.closeCallback();
            e.data.overlay.hide();
            e.data.overlay.remove();
            return false;
   },
    
    // on object creation
    _open: function() {
        this.overlay = document.createElement('div');
        this.overlay.className = this.className;

        if (!this.templateSelector) {
            throw("no template defined");
        }
        var overlaytemplate = $(this.templateSelector);
        if (!overlaytemplate.length) {
            throw("Could Not Find " + this.templateSelector);
        }

        this.overlay.innerHTML = overlaytemplate.html();
        document.body.appendChild(this.overlay);
        this.overlay = $(this.overlay);
        this.overlay.css({
                left: this.left,
                top: this.topp
        });
        this.openCallback(this);
        this.overlay.hide();
        this.overlay.show();
        this.autoresize();
        this.overlay.find(this.closeSelector).bind('click',  this, this._close);
    },

    autoresize: function() {
        var main = this.overlay.find('.main .preview');
        if (main) {
            this.resize(
                main.width()  + (2 * this.borderSize),
                main.height() + (2 * this.borderSize)
            );
        }
    },

    resize: function (width, height) {
       
      this.overlay.width(width);     
      this.overlay.height(height);
      // resize borders
      this.overlay.find('.border.left, .border.right').height(
              height - (this.borderSize * 2));
    }
}

function populateModelo(element, manufacturer) {
    var html = '<option val="">Modelo </option>';

    $.get('/phone_models/get', {'url':'http://wurfl.services.onfresh.com/modelsfor/' + manufacturer}, function(r) {
	
		$("#modelo option").each(function() { $(this).remove(); });
		$("#modelo").parent().find("ul").find("li").each(function() { $(this).remove(); });
		
        $.each(r.data, function(i,phone) {
               html += '<option value="' + phone + '">' + phone + "</option>";
            });
        element.html(html);
        element.attr("disabled",""); 
		
		/* Now we add the options */
		var $select = $("#modelo");
		var $ul = $("#modelo").parent().find("ul");
		
		$("#modelo option").each(function(i){
			var oLi = $('<li><a href="#" onclick="javascript:get_phone_picture(\''+$(this).val()+'\')" index="'+ i +'">'+ $(this).html() +'</a></li>');
			$ul.append(oLi);
		});
		
		$ul.css({"overflow":"auto", "height":"150px"});
		
		var $wrapper = $("#modelo option").closest(".jqTransformSelectWrapper");
		
		$wrapper.removeClass("jqTransformSelectDisabled").addClass("jqTransformSelectActive");
		
		/* Add click handler to the a */
		$ul.find('a').click(function(){
				$('a.selected', $wrapper).removeClass('selected');
				$(this).addClass('selected');	
				/* Fire the onchange event */
				if ($select[0].selectedIndex != $(this).attr('index') && $select[0].onchange) { $select[0].selectedIndex = $(this).attr('index'); $select[0].onchange(); }
				$select[0].selectedIndex = $(this).attr('index');
				$('span:eq(0)', $wrapper).html($(this).html());
				$ul.hide();
				return false;
		});
		/* Set the default */

		$('a:eq('+ element[0].selectedIndex +')', $ul).click();
		//$('span:first', $wrapper).click(function(){$("a.jqTransformSelectOpen",$wrapper).trigger('click');});
		
       return; 
    },'json');
}