how to work with jquery controls in content page

See more:

ASP.NET4

i tried to implement jquery date picker in my master content pagebut the picker was not working any one can please suggest the solution.
<style>
.ui-datepicker {
background: #333;
border: 1px solid #555;
color: #EEE;
}

.ui-datepicker-calendar a.ui-state-default { background: cyan; }
.ui-datepicker-calendar td.ui-datepicker-today a { background: red; }
.ui-datepicker-calendar a.ui-state-hover { background: yellow; }
.ui-datepicker-calendar a.ui-state-active { background: lime; }
</style></style>
<script src="jquery-1.7.js" type="text/javascript"></script>
<script src="datetimepicker_css.js" type="text/javascript"></script>
<script src="jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">

$(function () {
$("input[id$=fname]").datepicker({

showOn: 'button',
buttonText: 'Show Date',
buttonImageOnly: true,
buttonImage: 'cal.gif',
dateFormat: 'dd/mm/yy',
constrainInput: true
});
$(".ui-datepicker-trigger").mouseover(function () {
$(this).css('cursor', 'pointer');
});

});

</script>
content page

<input type="text" id="fname" style="background-color: #0099FF"><br>
<input type="image" src="Image/cal.gif" alt="Submit">